WPFのTextBoxでデータバインディングを行うサンプルプログラム

TextBoxの入力した内容をデータバインディングを使い、TextBlcokに表示するサンプルプログラムです。

MainWindowViewModel.cs

// メインウィンドウのViewModel
using Maywork.WPF.Helpers;

namespace TextBoxBindingDemo;

public class MainWindowViewModel : ViewModelBase
{
    // バインド可能なUserNameプロパティ
    string _userName = "";  // 初期値は""
    public string UserName
    {
        get => _userName;
        set => SetProperty(ref _userName, value);
    }
}

XAMLのコントロールのプロパティとバインド元となるクラスです。
ViewModelBase.csを継承し、ViewModelを作成します。
バインド可能なプロパティUserNameを定義しています。
値の変更をトリガーとして、変更通知の処理を行いますが、定型な処理ですので、ViewModelBaseのSetProperty()へ処理を集約しています。

MainWindow.xaml.cs

using System.Windows;

namespace TextBoxBindingDemo;

public partial class MainWindow : Window
{
    MainWindowViewModel _vm;
    public MainWindow()
    {
        InitializeComponent();

        // ビューモデルを生成
        _vm = new MainWindowViewModel();
        // データコンテキストに生成したビューモデルのインスタンスをセット
        DataContext = _vm;
    }
}

メインウィンドウのコードビハインド部分です。
コンストラクタで、ViewModelを生成しメインウィンドウのDataContextとして登録しています。
ViewとViewModelを紐づけしている部分になります。

<Window x:Class="TextBoxBindingDemo.MainWindow"
        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:TextBoxBindingDemo"
        mc:Ignorable="d"
        Title="Binding Sample" Height="200" Width="300">
    <Grid>
        <StackPanel Margin="20">

            <!-- 入力用 -->
            <TextBox Text="{Binding UserName, UpdateSourceTrigger=PropertyChanged}"
                    Margin="0,0,0,10"/>

            <!-- 表示用 -->
            <TextBlock FontSize="16"
                    Text="{Binding UserName}" />

        </StackPanel>
    </Grid>
</Window>

XAMLで定義された View部分になります。

TextBoxとTextBlockが定義されており、
それぞれの Text プロパティに UserName がバインディングされています。

<TextBox Text="{Binding UserName, UpdateSourceTrigger=PropertyChanged}" />
<TextBlock Text="{Binding UserName}" />

TextBox の UpdateSourceTrigger=PropertyChanged を指定しているため、
1文字入力されるごとに、即座に ViewModel 側の UserName が更新されます
もしこれを指定しない場合、
デフォルトではフォーカスが外れたタイミングで更新されます。

実際の処理の流れは以下のようになります。

TextBox
   ↓
Binding Engine
   ↓
VM.UserName set
   ↓
OnPropertyChanged
   ↓
Binding Engine
   ↓
TextBlock

WPFは

「値が変わったことを通知されたときだけUIを更新する」

という仕組みです。

そのため、

INotifyPropertyChanged

の実装が必要になります。

今回利用している
ViewModelBase.cs は、

INotifyPropertyChanged を実装したヘルパークラスです。

ViewModelはこのクラスを継承して作成しています。

実行すると、テキストボックスが表示されます。

テキストボックスに文字を入力すると、その入力内容が下の TextBlock にも表示されます。

これは、TextBox.TextとTextBlock.Textの両方が、
同じ ViewModel の UserName プロパティにバインディングされているためです。