WPF データバインディング is 何？

どうも、先日ダイパリメイクが発表されテンションが高いhakaseです。

さて前回WPFの初歩を刻んだところで、
今回はWPFの基本であり全てとも言って過言ではない、
「データバインディング」について書いていきます。

よくMVVMとかMVCの設計パターンを勉強していると、
「ViewとModelは分離しろ」
「疎結合になるようにしろ」
的な文言を見ると思います。

それを実現するためにWPFに用意されている機能です。(ざっくり)

WPFは基本的にViewはxamlで、ModelやViewModelはC#で作ります。
つまりC#とxamlのつながりをかな～りゆるくするために使います。

イメージこんなの。
f:id:hakase0274:20210228164202p:plain

DataContextっていうのはxamlに設定できるC#インスタンスのことです。
TextBlockのTextプロパティにDataContextの中にあるTextプロパティの値がはめられます。

あとはそれぞれのTextプロパティが変わったとき、
それを通知してそれぞれの値を更新するという流れです。

実際に具体例を交えてやっていきます。
前回の記事で出した例を流用して話をします。

まずはxamlとC#インスタンスを繋げます。
とりあえずDataContextにC#インスタンスを突っ込みます。

xmlns:vm="clr-namespace:LivetApp1.ViewModels"

<Window.DataContext>
    <vm:MainWindowViewModel />
</Window.DataContext>

xmlns～はC#でいうusingみたいなもんです。
DataContextの中に突っ込みたいC#クラス名を入れます。
(そしたら勝手にインスタンス化してくれます)
ちなみにDataContextには一つのインスタンスしか入れれません。

そしてDataContext内のプロパティをxamlのプロパティにあてはめます。

<Grid>
    <TextBlock Text="{Binding BindText,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"/>
</Grid>

あてはめたクラスとプロパティはこんな感じ。

private string mBindText = "Hello World";
public string BindText
{
    get => mBindText;
    set => RaisePropertyChangedIfSet(ref mBindText,value);
}

C#->xamlはRaisePropertyChangedで通知を行います。
これはLivetの機能なので詳細割愛です。

xaml->C#はModeをTwoWayとかにしておけば勝手に通知されます。

例ではフルで書いてますが、
ModeとUpdateSourceTriggerはDefaultで設定されているので、
基本なんも書かなくても通知はいきます。

つまりやることとしては
・DateContextにインスタンスをはめる
・xaml側プロパティにBindingを書く
・C#でプロパティを定義し変更時に通知する
ぐらいです。簡単ですね。

今回はデータバインディングとはなんぞや？ってのを書いてみました。

ぶっちゃけ自分はここに書いてあることぐらいしかわかっていません。
RaisePropertyChangedがどういう方法でxamlに通知してるのかとか、
よくわかっていません。(コード読めって話ですが)

今後もまったり作ったりしながら勉強していきまーす・・

それでは今回はこの辺でノシ

はかせのラボ