WPF・MVVMを学び始めると、こんなコードをよく見かけます。
<TextBlock Text="{Binding UserName}" />
初めて見たとき、私はこう思いました。
「これだけで画面に表示されるの？」
UserNameはViewModelにあるだけなのに、画面には値が表示されています。
何か値を設定するコードを書いた覚えもありません。
今回は、Bindingの書き方ではなく、
「なぜViewModelの値が画面に表示されるのか」
という仕組みについて整理していきます。
Bindingとは？
Bindingは、
ViewとViewModelのデータを結び付ける仕組みです。
例えば、
<TextBlock Text="{Binding UserName}" />
と書くと、
ViewModel
│
│ UserName
▼
View(TextBlock.Text)
という関係が作られます。
つまり、
「Textプロパティには、ViewModelのUserNameを表示してください」
という意味になります。
Bindingを使わなくても画面は作れる
実は、Bindingを使わなくても画面へ値を表示することはできます。
例えば、
UserNameTextBlock.Text = ViewModel.UserName;
このようにコードから値を設定すれば、画面には正しく表示されます。
つまり、
Bindingがなくても画面は作れます。*
では、なぜWPFにはBindingという仕組みが用意されているのでしょうか？
Bindingを使わない場合のデメリット
例えば、画面に表示する項目が増えたとします。
NameTextBlock.Text = ViewModel.Name;
AgeTextBlock.Text = ViewModel.Age.ToString();
AddressTextBlock.Text = ViewModel.Address;
PhoneTextBlock.Text = ViewModel.Phone;
MailTextBlock.Text = ViewModel.Mail;
項目が増えるたびに、
表示するコードも増えていきます。
さらに、
・画面を表示するとき
・データを更新したとき
・初期表示するとき
など、それぞれで表示するコードを書く必要があります。
画面が大きくなるほど、
View側のコードはどんどん増えてしまいます。
なぜBindingを使うの？
そこで登場するのがBindingです。
<TextBlock Text="{Binding Name}" />
<TextBlock Text="{Binding Age}" />
<TextBlock Text="{Binding Address}" />
Bindingを使えば、
Viewには
「何を表示するか」
だけを書けばよくなります。
値を取得して画面へ表示する処理は、
WPFが自動で行ってくれます。
Bindingを使うメリット
Bindingを使うことで、
Viewは
「どのデータを表示するか」
だけを考えればよくなります。
一方、ViewModelは
「どんなデータを持つか」
だけを管理します。
View
「UserNameを表示したい」
│
Binding
│
ViewModel
「UserNameは田中です」
このように、
ViewとViewModelの役割を分けられる
ことが、Bindingの大きなメリットです。
また、
・表示用のコードが減る
・保守しやすくなる
・Viewは表示だけ、ViewModelはデータだけを考えればよくなる
というメリットもあります。
デバッグするときはどこを見る？
画面に値が表示されないとき、
最初からBindingを書き直す必要はありません。
例えば、
Text="{Binding UserName}"
だった場合、
まず確認したいのは、
・ViewModelのUserNameに値が入っているか
・Binding先のプロパティ名が間違っていないか
です。
DataContextやPropertyChangedについては、
次回以降の記事で詳しく説明します。
まとめ
今回のポイントです。
✅BindingはViewとViewModelを結び付ける仕組み
✅Bindingを使わなくても画面は作れる
✅Bindingを使うことで表示処理をWPFに任せられる
✅ViewとViewModelの役割を分けられる
✅デバッグでは、まずViewModelの値を確認する
📚 WPF・MVVM基礎シリーズ
第1回
✅ 新人・初級PGが最初に覚えた方がいいこと｜言語より先に理解したいプログラムの仕組み
第2回
✅ WPF・MVVMで最初に覚えておきたいこと｜プログラムは「データ」と「処理」だけでは動かない
第3回
✅ ボタンを押したらなぜ処理が動くの？｜WPF・MVVMのEventを理解しよう
第4回
✅ [ボタンを押したらなぜ画面が切り替わるの？｜WPF・MVVMのCommandを理解しよう](https://qiita.com/k-shimaoka-dev/items/e41fa6cd06177106ed40）
第5回（今回）
👉 なぜViewModelの値が画面に表示されるの？｜WPF・MVVMのBindingを理解しよう
📖 あわせて読みたい（実践編）
WPFでよくあるCommandハマりポイント3選＋回避策
WPFのDataContextでハマるポイント3選【MVVM】実務で迷子にならないための整理
WPFで後から辛くなるバインディングの典型パターン3選 実務でハマる！ 後悔しないための注意ポイントも解説