前回は、
Bindingは
ViewとViewModelを結び付ける仕組み
という話を書きました。
例えば、
<TextBlock Text="{Binding UserName}" />
と書くだけで、
ViewModelの値が画面に表示されます。
私も最初は、
「Bindingを書けば画面に表示されるもの」
だと思っていました。
でも実際には、
DataContextが設定されていたから表示されていたんです。
では、
BindingはどこからViewModelを見つけているのでしょうか。
今回は、
その裏側で動いている
DataContext
について整理してみます。
Bindingだけでは表示できない
例えば、
<TextBlock Text="{Binding UserName}" />
このBindingは、
「UserNameという値が欲しい」
と言っているだけです。
でも、
ここで一つ疑問があります。
どこのUserName？
Bindingだけでは、
どこからUserNameを取得すればいいのか分かりません。
そこで登場するのが
DataContext
です。
DataContextはどこで設定するの？
例えば、
Windowでは、
こんなコードを書くことがあります。
public MainWindow()
{
InitializeComponent();
DataContext = new MainViewModel();
}
この一行で、
この画面のDataContextは
MainViewModel
になります。
すると、
Bindingは
MainViewModelの中から
UserName
を探せるようになります。
※「MVVMでは、フレームワークやDIコンテナを使ってDataContextを設定することもあります。今回は仕組みを理解するため、一番シンプルな書き方で説明しています。」
DataContextとは？
DataContextを一言でいうと、
Bindingがデータを探す基準になるもの
です。
図にすると、
MainWindow
DataContext
│
▼
MainViewModel
│
▼
UserName
そして、
<TextBlock Text="{Binding UserName}" />
というBindingは、
DataContextに設定された
MainViewModel
の中から
UserName
を探します。
つまり、
Bindingは
直接ViewModelを見ているわけではありません。
DataContextを通して、
ViewModelを見ています。
なぜDataContextを使うの？
もしDataContextが設定されていなければ、
Bindingは
「UserNameが欲しい」
とは言えても、
どこから取得すればいいのか分かりません。
一方、
DataContextを設定すると、
画面で使うViewModelが決まります。
そのため、
画面中のBindingは、
毎回ViewModelを意識することなく、
必要なプロパティだけを書けばよくなります。
例えば、
<TextBlock Text="{Binding Name}" />
<TextBlock Text="{Binding Age}" />
<TextBlock Text="{Binding Address}" />
これらはすべて、
DataContextに設定されたViewModelから
それぞれの値を取得しています。
デバッグするときはどこを見る？
例えば、
画面に値が表示されない。
そんな時、
Bindingだけを見ても原因は分かりません。
まず確認したいのは、
・DataContextは設定されているか
・想定したViewModelが設定されているか
・そのViewModelにプロパティがあるか
です。
Bindingが正しくても、
DataContextが違えば、
値は表示されません。
実際の現場でも、
まずDataContextを確認するだけで原因が分かることは少なくありません。
※DataTemplateやUserControlなどでは、DataContextが途中で切り替わることもあります。実務でよくあるハマり方については、関連記事で紹介しています。
まとめ
今回覚えておきたいポイントです。
✅ Bindingは「値が欲しい」と伝えているだけ
✅ DataContextが「どこを探すか」を教えている
✅ BindingはDataContextを通してViewModelを見る
✅ 値が表示されない時は、まずDataContextを確認すると原因を切り分けやすい
📚 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のDataContextでハマるポイント3選【MVVM】実務で迷子にならないための整理
WPFで後から辛くなるバインディングの典型パターン3選 実務でハマる！後悔しないための注意ポイントも解説