[WPF]データバインド初歩～変更検知

WPFのデータバインディングと、バインドしたコントロールのプロパティ変更を検知できるよう作ってみる。

• テキストボックスとバインディングしてみる

• テキストの変更を検知できるようにする

テキストボックスとバインディングしてみる

WPFの新規プロジェクトを作り、メイン画面にテキストボックスとボタンを適当に追加。

クラスMyDataBindを追加。テキストボックスのTextプロパティにバインドするためのクラス。

    
class MyDataBind
{
    public string TextData { get; set; } = "しょきちです。";
}
    

作成したバインド用クラスを、メイン画面のDataContextプロパティに登録する。

メイン画面のDataContextプロパティで「新規作成」クリック（クリック前にいちど、ビルドしておく）

さきほど作成したMyDataBindを選択

選択後

DataContextに紐付けられた。

テキストボックスのTextプロパティにバインドする。

テキストボックスのTextプロパティの赤枠をクリック

データバインディングの作成をクリック

DataContextに紐付けたMyDataBindが表示される。そのTextDataプロパティを選択する。

Textプロパティにバインドされ、初期値が表示された。

実行してみる。テキストボックスにMyDataBindで設定した初期値が表示された。

テキストの変更を検知できるようにする

ボタンをクリックしたときにテキストの内容を変更するよう作ってみる。

ボタンのプロパティからClickイベントを作成する。

ボタンクリックイベントハンドラ

メイン画面にバインドしたDataContextのTextDataに、現在時刻を設定してみる。ボタンをクリックするたびに、現在時刻がテキストボックスに表示されるようにしたい。

    
private void Button_Click(object sender, RoutedEventArgs e)
{
    (this.DataContext as MyDataBind).TextData = DateTime.Now.ToLongTimeString();
}
    

実行してみる。

ボタンをクリック

・・・しても、一切変わらない。

テキストの内容を検知するためには、バインドクラス側でイベントを実装してやる必要がある。

    
using System.ComponentModel;

namespace WpfApp1
{
    // INotifyPropertyChangedインターフェースを実装する。
    class MyDataBind : INotifyPropertyChanged
    {
        // インターフェースを実装すると、イベントの実装が強制される
        public event PropertyChangedEventHandler PropertyChanged;

        // プロパティ内でイベントを発動させるので、自動実装プロパティじゃそぐわない
        // public string TextData { get; set; } = "しょきちです。";

        // プロパティを作り直す。
        private string textData = "しょきちです。改";
        public string TextData
        {
            get
            {
                return this.textData;
            }

            set
            {
                this.textData = value;

                // ここでイベントを発動させる。
                // valueと比較し値が変わったときだけ起動させてもいいかもしれない。
                this.OnPropertyChanbed("TextData");
            }
        }

        // プロパティ値変更時にイベントを発動させるメソッド
        private void OnPropertyChanbed(string propertyName)
        {
            this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}
    

試してみる。ボタンクリック

時刻がテキストボックスにセットされた。もう一度クリック。

変更された。OKそう。