WPFのMVVMパターンでのデータバインディングの方法

Question

###前提
最近、C#でWPFを使用しているプロジェクトに参加することになりましたが、
WPF(MVVMパターン)でのデータバインディングの方法が理解できず困っています。
（MVVMにはPrismやLivetなどのフレームワークを使わず、独自に類似の仕組みを作成して実現しているようです）

あまりに分からないことが多く、まともに質問もできない状態ですが…
せめて自分の状況を理解していただくために、理解していること・困っていることなどを下に書きます。
（が、状況を理解してもらうことが目的なので、読まなくても構いません）

このようなレベルの私に、理解の助けになるテキストやサイト等を教えてください。
（プロジェクトで作成されたコードを読んでも理解が追いつかないことから、「サンプルコードを読んで理解する」ことは難しいと思っています。だいたい解説が無いですし、あっても英語ですし…）

できれば、下で紹介しているXAMLコードのような書き方の解説がされているものが良いと思っています。
贅沢を言うようですが、日本語の解説が欲しいです。
（ある程度WPFの仕組みを理解をしているなら英語でも良いのですが、ほとんど理解できていない状況で英語の解説はキツいものがあります）

質問として失礼な形になっているかもしれませんが、切羽詰まっており藁にもすがりたい思いですのでお許し下さい。

###発生している問題

以下、非常に読みづらいですが、「このくらい何も分かっていないんだな」ということを理解して頂ければ十分です。

---

理解が困難な点が複数あります。
何が分からないのかも分からない状態なので、現状で分かっていることを書きます。

例えば、以下の様なXAMLがあります。
OrigUI:OrigButtonは、標準のButtonクラスを継承したものです。
同様に、OrigUI:OrigTreeViewも、標準のTreeViewクラスを継承したものです。

<grid>
    <OrigUI:OrigButton x:name="MyButton" DataContext="{Binding MyButton, Mode=TwoWay}" />
    <OrigUI:OrigTreeView x:name="MyTreeView" DataContext="{Binding MyTreeView, Mode=TwoWay}" />
<grid>

ここでは、ボタンやツリーにセットするデータはDataContextを経由するように書かれています。
ところがネットで検索をかけても、XAML上でDataContext="{Binding Xxx}"と書かれている例はほとんどありません。
（恐らく、ここで躓いているのが理解が出来ない一番の原因だと思います）

コードビハインド(.xaml.cs)側では、このボタンやツリーのバインディングに関する処理は何も書かれていません。
（でも、画面上のUIによっては.xaml.csにそういった処理が書かれているものもあります。何が違うのか分かりません）

そもそも、XAML上でDataContextに指定したものは、何を指しているのでしょうか…
そもそもDataContextとは？というところが、ネット上の解説を読んでも理解できていません。

継承をしたボタンやツリーには、データを格納するためのデータクラスOrigButtonData, OrigTreeViewDataがあります。（ButtonやTreeViewとは全く継承関係の無いクラスです）
どうやらMyButtonとOrigButtonDataのインスタンス、MyTreeViewとOrigTreeViewDataのインスタンスをバインディングし、ViewModelから画面上のボタンやツリーにアクセスする際には、OrigButtonDataやOrigTreeViewを使うようです。

ViewModelには、"MyButton"や"MyTreeView"という名前のプロパティが作られています。このせいで、「MyButtonとバインドする」と言われても、XAMLのx:NameのことかXAMLのDataContextのことかViewModelの"MyButton"というプロパティのことか分かりません。

ところがOrigButtonDataやOrigTreeViewは、元のButtonやTreeViewとは全く関係のないクラスなので、ButtonやTreeViewが本来持っているプロパティにアクセスすることができません。
例えばTreeViewを構築するためにはTreeView.ItemsSourceというプロパティにオブジェクトを挿入すれば良いのですが、ViewModelからはMyTreeViewにアクセスできないため、ツリーを構築できません。

そこで、OrigTreeViewDataにTreeItemsというプロパティを追加し、TreeView.ItemsSourceとOrigTreeViewData.TreeItemsをバインドします。
そうすることでViewModel側から本来アクセスできないはずのMyTreeView.ItemsSourceにデータを追加することができるようになります。

ButtonやTreeViewには、もちろんこれ以外のプロパティも存在します。そのプロパティにViewModelからアクセスするためには、またデータクラスに対応するプロパティを追加して、バインドの設定が必要です。

どうやら元々のButtonやTreeViewが持っているプロパティにXxxPropertyという名前のプロパティが「ある場合」「ない場合」でバインディングの方法が異なるようです。複雑です。

ButtonやTreeViewが持っているプロパティにViewModelからアクセスしたいものの、そのプロパティの型ではコンストラクタの使用が禁止されていると、データクラスでその型のインスタンスを作れないため、バインドができません。
またアクセスしたいプロパティがgetterしか持っておらず、値のセットができず途方に暮れることもあります。

ここでバインドを行うためには、データクラス・ViewModel・継承したMyButton MyTreeViewのそれぞれにもバインディングの設定が必要です。
OnPropertyChangedとかNotifyPropertyChangedとか…DependencyPropertyなんてものも登場します。

複雑すぎて理解ができません。理解が追いつかず、「プロパティの変更を通知する」と言われても何のことだか分かっていません。

そもそも、XAMLではOrigButtonやOrigTreeViewというクラスを使っているのに、ViewModelから操作するのはOrigButtonDataやOrigTreeViewDataという全く継承関係のないクラスです。なぜViewModelからOrigButtonやOrigTreeViewクラスのオブジェクトを操作できるようになっていないのか理解に苦しみます。
（どうやら、ViewModelからは本当に必要なプロパティのみ操作できるようになることがメリットのようですが…）

この場合、例えばTreeViewの中にListがあり、そのリストの中身をバインドしてViewModelから操作したい…という場合、もう複雑すぎて手も足も出せません。
（例えばMyTreeView.Nodes[0].NodeItemというものがあったとして、ViewModelからOrigTreeViewDataを経由してアクセスするためには何をどうバインドしたら良いのか分かりません。）
（Nodesに対応するプロパティをデータクラスに作って…どうやってMyTreeView.Nodesとバインドするの？バインドできたとしても、さらにリストのそれぞれの要素のNodeItemとデータクラスをバインドする方法は…？）
（そもそも、何をしたらMyTreeViewとOrigTreeViewDataが結びついたのか分かっていないので、混乱に混乱を重ねて理解どころではありません…）

---

非常に長くなりましたが、自分の「分かっているところ」「分かっていないところ」は、だいたいこんな感じです。

Answer 1

長いので、前半部分・バインディングだけにします。
分かりやすさ重視のため、例えが多いので厳密には違うという部分もありますが、それはご了承ください。

そもそも、このWindowのDataContextに設定している、クラス（あえてクラスと言います）があるはずです。（その部分の名前も書いておいてくれると説明しやすかったんですが、Name="window1"とします。ViewModelと言っているそのクラスをmyClass ( MyClass myClass = new MyClass(); なイメージ)とします）
そしてそのクラスにはMyButtonとMyTreeViewプロパティがあるでしょう。

ViewModelには、"MyButton"や"MyTreeView"という名前のプロパティが作られています。

この部分ですね。

で、Window内ではDataContextはそのクラスなので、{Binding MyButton}と言えば、ようするにmyClass.MyButtonをバインドしますという事です。
（さらに言えば ((MyClass)window1.DataContext).MyButton )

<OrigUI:OrigButton x:name="MyButton" DataContext="{Binding MyButton, Mode=TwoWay}" />

これはコードで言えば

MyButton.DataContext = myClass.MyButton;

です。
バインディングはデータソース(DataContext)であるクラス(インスタンス)の情報をコントロール等に提供する事です。
WinFormsでたとえるなら、DataGridViewのDataSourceにDataTableをセットすると、DataGridViewにその表が表示されます。
OneWayとTwoWayは、この例では DataTableを変更するとDataGridViewのセル表示も変わるが、セルをいじってもDataTableの内容が変わらないような状態がOneWay。どっちをいじっても双方とも変わるのがTwoWayです。

---

てことがわかったところで、実際にやってみましょう。

まずWPFアプリケーションを作成します(名前は私はtt45592としましたが、なんでもいいです)。
Gridは行列を作ったりする必要がありますが、それは説明しません。
置いてくたびに積まれてくStackPanelが（説明に楽なので）それに代えて、TextBoxを３つ配置します。

※ MainWindow.xamlの <grid>～</grid>をStackPanelで置き換えます。これぐらいなので自分で書きましょう。

    <StackPanel>
        <TextBox Text="{Binding SourceText, Mode=TwoWay}"></TextBox>
        <TextBox Text="{Binding SourceText, Mode=OneWay}"></TextBox>
        <TextBox Text="{Binding SourceText, Mode=TwoWay}"></TextBox>
    </StackPanel>
</Window>

さて、意地悪にもいきなりBindingが登場しました。
このまま実行してもエラーにはなりませんが、ただ何も起きないテキストボックスが並んでいるだけになります。Bindingって書いたけど何もしてないので当然です（エラーが起きないのは違和感あるかもしれませんがそういうものです）。

ともかくSourceTextってなんなの？という状態です。
これはTextBoxに、「DataContextにSourceTextというプロパティがあればそれを元ネタにしてね。」
と、言っている状態になります。

なので、DataContextに「SourceTextのプロパティを持つ何か」を設定してあげましょう。
言い換えると「「SourceTextのプロパティを持つ何か」をこのMainWindowのDataContextにしよう」です。

そんな「SourceTextのプロパティを持つMyClass」を作ってあげましょう。

プロジェクトに追加＞クラスで、MyClass.csを足してください。
MyClass.cs

namespace tt45592 {
    public class MyClass {
        public string SourceText { get; set; }
    }
}

これをMainWindowのDataContextにしてあげます。
XAMLにも書けますが、今回はC#から指定してあげます。

MainWindow.xaml.cs

namespace tt45592 {
    public partial class MainWindow : Window {
        public MainWindow() {
            InitializeComponent();
            var myClass = new MyClass();
            myClass.SourceText = "Hello, Binding";
            DataContext = myClass;
        }
    }
}

実行してみてください。
テキストボックスに、コンストラクタでSourceTextにしか設定していない値が表示されましたね。
これがBindingです。

テキストボックスに何か入力して別のテキストボックスに移動してください。
上下のテキストボックスに入力したあと他のテキストボックスに移ると、ほかのテキストボックスにも反映されます。
しかし真ん中のテキストボックスに入力しても、ほかのテキストボックスの値は変わりません。
これがOneWayとTwoWayの差です。
どのテキストボックスもSourceTextを元ネタとしていますが、SourceTextにも影響を及ぼす（双方向に影響しあう：TwoWay）のは上と下のテキストボックスだけだからです。
ここではやりませんが、myClassのSourceTextプロパティの値も画面と同じように変わっています。

ここまでで知ったこと：インスタンスをDataContextに設定したら、そのプロパティをバインドできた。

---

では、MyButtonにMyButtonをBindingして…の謎に行きましょう。
（説明はざっくりですけど、後は自分でも頑張ってください）

プロジェクトにユーザーコントロールを追加します。
名前はOrigButtonとします。
Buttonと名付けたものの、デフォルトではUserControlを継承してますのでButtonになってません。
まずはButtonを継承してButtonにしてあげましょう。

Xamlとコードビハインド両方の修正が必要です。

OrigButton.xaml

<Button x:Class="tt45592.OrigButton"

（タグをUserControlからButtonに。タグを閉じる方は自動的にかわっている(</Button>になってる)はずなので割愛）
OrigButton.xaml.cs

public partial class OrigButton : Button {

同様にUserControlからButtonに。
（こっちは継承情報消してもXamlにあれば良かったと思うけど、一応書き換える方向で）

テキストブロックを置くためにXamlを編集します。今回はGridのまま。
OrigButton.xaml

<Grid>
    <TextBlock Text="{Binding SourceText}"></TextBlock>
</Grid>

Bindingが現れました。じゃぁC#側でDataContextを追加...しません。

そのままMainWindow.xamlにこのコントロールを追加してあげます。

<StackPanel>
    <TextBox Text="{Binding SourceText, Mode=TwoWay}"></TextBox>
    <TextBox Text="{Binding SourceText, Mode=OneWay}"></TextBox>
    <TextBox Text="{Binding SourceText, Mode=TwoWay}"></TextBox>
    <local:OrigButton></local:OrigButton>
</StackPanel>

質問にあった DataContext=もありません。
やたら細いボタンが追加されたら、実行します。

※ 突然 local:というのが出てきました。これはMainWindowのxamlの方で、xmlns:local="clr-namespace:tt45592"と定義されているものです。このプロジェクトの名前空間の別名と思っておいてください。
※ 無理やりC#風に書くなら using local = tt45592(名前空間の別名)からの、local.OrigButtonといった感じです。

実行してみると、OrigButtonのDataContextに対して何もしていないのにHello, Bindingと表示されました。

自分のDataContextになくとも、親のコンテナのDataContextにあるのでそれが利用されています。

※ ここから少し駆け足気味になります。

ところで、現実問題、どれもこれも同じプロパティをバインドすることは、まぁありませんね。
ボタンにはボタンのためのプロパティが欲しくなりました。
MyClassに新しいプロパティを追加してあげましょう。

MyClass.cs

public class MyClass {
    public string SourceText { get; set; }
    public string ButtonText { get; set; }

このままじゃButtonTextは空なので、MainWindowのmyClassを作っているところでこれの値もセットします。
MainWindow.xaml.cs

// MainWindowコンストラクタの中
    var myClass = new MyClass();
    myClass.SourceText = "Hello, Binding";
    myClass.ButtonText = "OrigButton!";    // ここ
    DataContext = myClass;

バインド対象も変えないといけませんね
OrigButton.xaml

<Grid>
    <TextBlock Text="{Binding ButtonText}"></TextBlock>
</Grid>

実行して変わったのが確認できたと思います。

MyClassのプロパティ、このまま増えるとどれがボタン用でどれが他の用途かわかりませんね。
OrigButton用にクラスを作ってあげて、それ（のインスタンス）をMyClassに持たせてあげましょう。

MyClass.cs

public class MyClass {
    public string SourceText { get; set; }
    public MyClass() {
        MyButton = new MyButton();
    }
    public MyButton MyButton { get; } // あえてですがこの名前かぶりに注意。あとgetterのみ。
}

public class MyButton {
    public string ButtonText { get; set; }
}

MainWindow.xaml.csのコンストラクタも修正しないといけません。

// MainWindowコンストラクタの中
    myClass.SourceText = "Hello, Binding";
    myClass.MyButton.ButtonText = "OrigButton!";  // これ
    DataContext = myClass;

Bindingはどうなるでしょうか。
このように指定します。上のコンストラクタでも同じようにアクセスしてますよね。
OrigButton.xaml

<Grid>
    <TextBlock Text="{Binding MyButton.ButtonText}"></TextBlock>
</Grid>

実行して、変化がない（しかし構成を変えることができた）ことを確認します。

ところで、OrigButtonにしてみれば、「MyButton.ButtonText」よりも「ButtonText」の方が良かったりします。
なぜなら、DataContextの構成が MyButtonプロパティ(クラスじゃないんです）を持っていることまで知らないといけないためです。
欲しいのはButtonTextを持っているなにかだけが使える方がシンプルなわけで、MyButtonというのを間に挟んでいるのは（DataContextに指定した）クラスの都合に過ぎず、OrigButtonは知らなくても良いわけです。
（知ってなきゃいけない実装にしたいときはそうすればいいですが、今回は欲しいのはButtonTextだけです）

で、それに対する対策の一つとして、MainWindowの方で、OrigButtonのDataContextを設定してあげるという手があります。
それがこれです。
MainWindow.xaml

<!-- 省略 -->
    <local:OrigButton DataContext="{Binding MyButton}"></local:OrigButton>
</StackPanel>

これで、OrigButtonのDataContextには（MainWindowのDataContextのおさがりではなく）ここで指定したMyButton（MainWindowのDataContextのMyButtonプロパティ）がバインドされます。OrigButtonも併せて修正してみましょう。

OrigButton.xaml

<Grid>
    <TextBlock Text="{Binding ButtonText}"></TextBlock>
</Grid>

そして、質問のxamlの様になりました。
後半大分駆け足ですが、これが基本です。
なお、これだけだと、ただのクラスをBindしているにすぎません（ViewModelと呼ぶには役割がはっきりしていない）。Modelの役割、ViewModelの役割を他資料で参照してみてください。

---

最後にINotifyPropertyChangedについて簡単に。
TwoWayバインディングしたTextBoxはテキストを書き換えたら、プロパティも書き換わるし、それを参照している他のTextBoxも書き換わりました。では変更の通知がなぜ必要なのかという疑問がでるかもしれません。

簡単な例では、MainWindow.xamlにもうひとつボタンを配置して、クリックイベントを作ります（ここでは動きを知りたいだけなのでWinFormsのノリで作っていいです。配置してダブルクリックするとか、イベントプロパティから作るとか）
で、以下の様なコードを書いてみます。

private void Button_Click(object sender, RoutedEventArgs e) {
    MessageBox.Show(((MyClass)DataContext).SourceText);
    ((MyClass)DataContext).MyButton.ButtonText = "Greeting!!";
}

1行目はSourceTextも変わったことを確認できるようにしているだけです。
2行目で、ButtonTextを書き換えています。しかし、OrigButtonのテキストは変わりません。

こういう場合もあります。そしてこのような場合、OrigButtonのBindingの方で、「何がおきたら元ネタ（Source）が変わったとするか」設定してあげます。そこで「プロパティが変わったと報告が来たらSourceは更新されたトリガとする」という設定をしておいてあげて、
DataContext（この場合は、ButtonTextを持つMyButtonクラス）には、INotifiProertyChangedの実装を通じて、「(MyButton) ＜ｘｘプロパティ変わったよ！」と通知する機能を追加してあげます。
これが組み合わさって、OrigButtonはプロパティが変わったときSourceの更新を行う事ができるようになります。

以上。長くなりましたが、他の資料を読む上での助けになれば。幸いです。
わかりにくかったらごめんなさい。

Comments

[Peri]

詳しい解説、ありがとうございます。
まさかここまで詳しく教えて頂けるとは思っていませんでした。本当にありがとうございます。

Window自体にDataContextが存在し、そこにViewModelが設定されている、ということを認識していませんでした。
XAMLに書かれているDataContextとは何なのか、ということがようやく理解できました。

解説していただいた内容は理解できたと思います。
ここで質問なのですが、実際のプロジェクトで書かれているコードは
`<TextBox Text="{Binding SourceText, Mode=TwoWay}" />` ではなく
`<TextBox DataContext="{Binding Source, Mode=TwoWay}" />`
としていることがほとんどです。

後者の場合はWindow自体のDataContext=ViewModel だった場合、
ViewModelクラスの`Source`という名前のプロパティをTextBoxのDataContextとしてセットする、という意味になるかと思います。
この場合、もしかしたら`ViewModel.Source` が`Text`という名前のプロパティを持っていれば画面に`Text`に指定した文字が表示されるのでは？と思いましたが、結果としては何も表示されませんでした。
これは何故でしょうか。

[flied_onion]

OrigButtonの実際の実装はわかりませんが、DataContext=～ について追記しましたので読んでみてください。
OrigButtonの方で、TextをどこかにBindしてなければ出てこないと思います。

プロジェクトだとLivetなどMVVMライブラリなどを利用する事も多いでしょうから、その辺りの作用も気にしないといけません。

[Peri]

本当にありがとうございます。何度も読み返しました。
お陰でようやくプロジェクトのコードが少しずつ読めるようになってきました。

[flied_onion]

お役に立てたようで何よりです。

Answer 2

自分は門外漢なので、以下に書くことは単なる受け売りです･･･
先ずは雰囲気を掴み解決の糸口を見出す為に、軽い気持ちでお読みください。

初めての言語に取り組む際には、最初の壁を乗り越えるまでが大変ですよね～

とは言え、日々進化し続けるIT技術は一見複雑に見えますが、様々な困難や矛盾を解決するために多かれ少なかれ「抽象化」を行ってきた結果なので、先ずはその背景から理解した方が近道かもしれません。

ということで、参考になりそうなサイトをサラッと紹介してみます。

雑把の UI アーキテクチャー史(MVCからMVVMへ)
MVVMおぼえがき
WPF4.5入門 その60「データバインディングを前提としたプログラミングモデル」

それと、サンプルソースに基づく説明を少し。
サンプルコードを見ながら理解するMVVMの基礎的な実装

以上、幾らかでもご参考になれば幸いです。