locked
How to create an undertermined amount of grid columns? RRS feed

  • Question

  • Hi, I have a text property bound to a textbox. For each letter that is in the textbox I want to create a grid column with a textblock inside it. So if I have a six letter word in there I get six grid columns each with a textblock inside it. As you can see, the number of columns/textblocks to make could be anything.

    I don't understand how this can be done without explicity naming and making a specficic amount of columns/textblocks.

    Could someone advise me on this?

    Thanks

    Saturday, February 15, 2020 11:17 AM

Answers

  • Hi
    you can use ItemsTemplate in ControlTemplate of TextBox. Try following demo.

    XAML:

    <Window x:Class="Window80"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:local="clr-namespace:WpfApp1"
            mc:Ignorable="d"
            Title="Window80" Height="450" Width="800">
      <Window.DataContext>
        <local:Window80VM/>
      </Window.DataContext>
      <StackPanel>
        <TextBox Text="{Binding Word, UpdateSourceTrigger=PropertyChanged}" Margin="5"/>
        <TextBox Margin="5">
          <TextBox.Template>
            <ControlTemplate>
              <ItemsControl ItemsSource="{Binding LetterList}">
                <ItemsControl.ItemTemplate>
                  <DataTemplate>
                    <Border BorderBrush="Red" BorderThickness="2" Width="20" Margin="5 0 5 0">
                      <TextBlock Text="{Binding}" HorizontalAlignment="Center"/>
                    </Border>
                  </DataTemplate>
                </ItemsControl.ItemTemplate>
                <ItemsControl.ItemsPanel>
                  <ItemsPanelTemplate>
                    <VirtualizingStackPanel IsItemsHost="True" 
                                      Orientation="Horizontal" 
                                      VerticalAlignment="Top"/>
                  </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
              </ItemsControl>
            </ControlTemplate>
          </TextBox.Template>
        </TextBox>
      </StackPanel>
    </Window>

    and ViewModel:

    Imports System.ComponentModel
    Imports System.Runtime.CompilerServices
    
    Public Class Window80VM
      Implements INotifyPropertyChanged
    
      Private _word As String
      Public Property Word As String
        Get
          Return Me._word
        End Get
        Set(value As String)
          Me._word = value
          LetterList = (From item In value).ToList
          OnPropertyChanged(NameOf(LetterList))
        End Set
      End Property
    
      Public Property LetterList As List(Of Char)
    
      Public Class Letter
        Public Property l As String
      End Class
    
      Public Event PropertyChanged As PropertyChangedEventHandler Implements INotifyPropertyChanged.PropertyChanged
      Private Sub OnPropertyChanged(<CallerMemberName> Optional propName As String = "")
        RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(propName))
      End Sub
    
    End Class


    --
    Best Regards / Viele Grüße
    Peter Fleischer (former MVP for Developer Technologies)
    Homepage, Tipps, Tricks


    • Edited by Peter Fleischer Sunday, February 16, 2020 8:56 AM
    • Marked as answer by Integrater Sunday, February 16, 2020 6:23 PM
    Sunday, February 16, 2020 8:55 AM