Сложность в реализации связана с выбранным вами подходом. Нужно работать с данными, а не с элементами управления.
В вашем случае вы ожидаете от пользователя ввод какого-то текста.
Каждому текстовому полю с правой стороны отвечает одно свойство. Для примера рассмотрим случаи наличия только одного поля для ввода. Назовем его
Greeting.
Для начала определим XAML разметку:
<TextBox Text="{Binding Greeting, UpdateSourceTrigger=PropertyChanged}"
TextWrapping="Wrap" />
UpdateSourceTrigger=PropertyChanged означает что вы хотите изменять свойство
Greeting всякий раз когда пользователь меняет что-то в текстовом поле.
Теперь нужно определить класс который будет отвечать за хранения и обработку данных, назовем его
SimpleVM:
public class SimpleVM : INotifyPropertyChanged
{
private string greeting;
public string Greeting
{
get { return greeting; }
set
{
greeting = value;
OnPropertyChanged(nameof(Greeting));
}
}
public event PropertyChangedEventHandler PropertyChanged;
public void OnPropertyChanged([CallerMemberName]string prop = "")
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(prop));
}
}
Интерфейс
INotifyPropertyChanged необходим для того чтобы оповещать всех интересующихся об изменениях значений в свойстве объекта. В роли интересующегося здесь у нас выступает интерфейс. Всякий раз когда вы будете изменять свойство
Greeting графический интерфейс будет обновлять свое представление.
Осталось отобразить вводимое слово в виде квадратиков. Для этого прекрасно подойдет
ItemsControl:
<ItemsControl Grid.Column="0" ItemsSource="{Binding Greeting}" >
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBox IsReadOnly="True" Text="{Binding .}"
Width="20" Foreground="Black"
BorderThickness="1" BorderBrush="Black" Height="23"
Background="{x:Null}" Margin="1, 3" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
И не забываем установить DataContext, для начала можно в конструкторе главного окна:
public MainWindow()
{
InitializeComponent();
DataContext = new SimpleVM();
}
Когда вы станет познакомитесь с MVVM немного больше вы сможете устанавливать контекст снаружи окна (как это обычно и делается).
А пока результат получается следующим: