question

CharlesHe-MSFT avatar image
0 Votes"
CharlesHe-MSFT asked ·

How to create an undetermined amount of grid columns?

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-wpf
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

AlexLi-MSFT avatar image
1 Vote"
AlexLi-MSFT answered ·

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.


1546480.png (8.4 KiB)
· Share
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.