How to create an undetermined amount of grid columns?

Charles He-MSFT 96 Reputation points Microsoft Employee
2020-02-25T02:32:13.2+00:00

Source thread: How to create an undertermined amount of grid columns?, answered by Peter Fleischer.

I have a text property bound to a TextBox. For each letter in the TextBox, I want to create a gird cell with a TextBlock inside it. So if I have a six letter word in the TextBox I get six grid columns with a TextBlock inside each column. How can I do this?

Windows Presentation Foundation
Windows Presentation Foundation
A part of the .NET Framework that provides a unified programming model for building line-of-business desktop applications on Windows.
2,638 questions
{count} votes

Accepted answer
  1. Alex Li-MSFT 1,096 Reputation points
    2020-02-25T02:42:53.713+00:00

    Hi,

    Welcome to our Microsoft Q&A platform!

    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  
    

    3421-1546480.png

    Thanks.

    2 people found this answer helpful.
    0 comments No comments

2 additional answers

Sort by: Most helpful
  1. Deleted

    This answer has been deleted due to a violation of our Code of Conduct. The answer was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.


    Comments have been turned off. Learn more

  2. cacasdxdd 0 Reputation points
    2023-09-23T10:09:17.2766667+00:00

    افضل معالج روحاني♻️❇️00/966/540/290/979❇️♻️ جلـب الحـبيب السعودية / البحرين

    فلاح بي ان جي

    0 comments No comments