質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

MVVM

MVVM(Model View ViewModel)は構築上のデザインパターンで、表現ロジック(ViewModel)によってデータ(Model)からページ(View)を分離させます。

XAML

XAML(Extensible Application Markup Language)はWPF、Silverlight、Windows PhoneそしてWindows Store appsでユーザーインターフェースを定義するために使われるXML言語です。

.NET Framework

.NET Framework は、Microsoft Windowsのオペレーティングシステムのために開発されたソフトウェア開発環境/実行環境です。多くのプログラミング言語をサポートしています。

WPF

Windows Presentation Foundation (WPF) は、魅力的な外観のユーザー エクスペリエンスを持つ Windows クライアント アプリケーションを作成するための次世代プレゼンテーション システムです

Q&A

解決済

2回答

14305閲覧

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

Peri

総合スコア12

C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

MVVM

MVVM(Model View ViewModel)は構築上のデザインパターンで、表現ロジック(ViewModel)によってデータ(Model)からページ(View)を分離させます。

XAML

XAML(Extensible Application Markup Language)はWPF、Silverlight、Windows PhoneそしてWindows Store appsでユーザーインターフェースを定義するために使われるXML言語です。

.NET Framework

.NET Framework は、Microsoft Windowsのオペレーティングシステムのために開発されたソフトウェア開発環境/実行環境です。多くのプログラミング言語をサポートしています。

WPF

Windows Presentation Foundation (WPF) は、魅力的な外観のユーザー エクスペリエンスを持つ Windows クライアント アプリケーションを作成するための次世代プレゼンテーション システムです

0グッド

4クリップ

投稿2016/08/25 12:49

編集2016/08/25 12:53

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

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

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

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

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

###発生している問題

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


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

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

xaml

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

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

そもそも、この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 )

xaml

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

これはコードで言えば

c#

1MyButton.DataContext = myClass.MyButton;

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


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

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

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

xaml

1 <StackPanel> 2 <TextBox Text="{Binding SourceText, Mode=TwoWay}"></TextBox> 3 <TextBox Text="{Binding SourceText, Mode=OneWay}"></TextBox> 4 <TextBox Text="{Binding SourceText, Mode=TwoWay}"></TextBox> 5 </StackPanel> 6</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

xaml

1<Button x:Class="tt45592.OrigButton"

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

c#

1public partial class OrigButton : Button {

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

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

xaml

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

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

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

xaml

1<StackPanel> 2 <TextBox Text="{Binding SourceText, Mode=TwoWay}"></TextBox> 3 <TextBox Text="{Binding SourceText, Mode=OneWay}"></TextBox> 4 <TextBox Text="{Binding SourceText, Mode=TwoWay}"></TextBox> 5 <local:OrigButton></local:OrigButton> 6</StackPanel>

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

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

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

Hello, Binding on the OrigButton

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

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

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

MyClass.cs

c#

1public class MyClass { 2 public string SourceText { get; set; } 3 public string ButtonText { get; set; }

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

c#

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

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

xaml

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

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

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

MyClass.cs

c#

1public class MyClass { 2 public string SourceText { get; set; } 3 public MyClass() { 4 MyButton = new MyButton(); 5 } 6 public MyButton MyButton { get; } // あえてですがこの名前かぶりに注意。あとgetterのみ。 7} 8 9public class MyButton { 10 public string ButtonText { get; set; } 11}

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

c#

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

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

xaml

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

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

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

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

xaml

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

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

OrigButton.xaml

xaml

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

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


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

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

c#

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

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

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

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

投稿2016/08/25 14:36

編集2016/08/25 16:11
flied_onion

総合スコア2604

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Peri

2016/08/25 15:41

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

2016/08/25 16:09

OrigButtonの実際の実装はわかりませんが、DataContext=~ について追記しましたので読んでみてください。 OrigButtonの方で、TextをどこかにBindしてなければ出てこないと思います。 プロジェクトだとLivetなどMVVMライブラリなどを利用する事も多いでしょうから、その辺りの作用も気にしないといけません。
Peri

2016/08/31 12:39

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

2016/08/31 13:21

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

0

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

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

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

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

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

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

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

投稿2016/08/25 13:30

pi-chan

総合スコア5936

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問