Prism Basic MVVM QukickStart
デベロッパーズガイド を順を追って読み下していきたいところだが、時間があまりないので、QuckStarts でまずソースになれていこうと思う。
そのなかでも、まず、Basck MVVM を以下、読みくだしながらメモ。
Model-View-ViewMode(MVVM)パターンは、ステートとロジックを ViewModel というクラスに分離するシンプルなアプローチ。
「第6回 「コマンド」と「MVVMパターン」を理解する」 このシリーズの記事がわかりやすかった。
あと、「MVVMパターンの常識 ― 「M」「V」「VM」の役割とは？」このへん。
http://msdn.microsoft.com/en-us/library/gg430857(v=pandp.40)
シナリオ
Basic MVVM アプリケーション メインウィンドウは、調査アプリケーションのサブセット。このウィンドウでは、異なったタイプの質問が表示され、送信ボタンがおかれている。
ビルドと実行
- Silverlight only – Open QS – UI Composition QuickStart.bat を実行するとソリューションが起動する
- UIComposition.Web プロジェクトを右クリックし、スタートアッププロジェクトに設定を選択
- F5 で実行
ウォークスルー
1.メインウィンドウからを起動する。
2.Name と Age を入力し、好きな色を選択する
3.Submit ボタンを押下すると、Visual Studio の 出力ウィンドウに結果が表示される
実装の詳細
キーとなる要素を確認。
どのプロパティが View Model で必要なのかを分析
View から View Model に、必要なデータおよび振る舞いとなる固有の要素を定義するのを分析する。
この例では、View Model に以下を扱えるようにする。
- Name : string
- Age : int
- Quest : string
- FavoriteColor : string
- Submit : Command
最初の4つのプロパティは、アンケートに関係しており、アンケート(questionnaire)クラス は、それらを保持するために生成される。アンケート(questionnaire)クラス は、アプリケーションの Model であり、View Model は、(questionnaire)クラス のプロパティ を公開する。
View Model で、ボタンなどを表現する場合、コマンドを公開することで実現できる。
View をサポートする View Model の実装
QuestionnaireViewModel.cs ファイルを開くと、以下のプロパティがView Modelに実装されている。
public Questionnaire Questionnaire
{
get { return this.questionnaire; }
}
public ICommand SubmitCommand { get; private set; }
INotifyPropertyChanged インターフェースが アンケート(questionnaire) Model に実装されている。
FavoriteColor プロパティにのみ、プロパティ変更通知が追加されている。
public class Questionnaire : INotifyPropertyChanged
{
private string favoriteColor;
public event PropertyChangedEventHandler PropertyChanged;
public string Name { get; set; }
public int Age { get; set; }
public string Quest { get; set; }
public string FavoriteColor
{
get
{
return this.favoriteColor;
}
set
{
if (value != this.favoriteColor)
{
this.favoriteColor = value;
if (this.PropertyChanged != null)
{
this.PropertyChanged(this, new PropertyChangedEventArgs("FavoriteColor"));
}
}
}
}
}
INofityPropertyChanged インターフェースは、一般的にはView Model クラスに実装するが、View でのプロパティ変更をモデルに反映させるため、この例では、Model に実装している。
これでわかるように、INotifyPropertyChanged サポートを行うのには、インターフェースを実装し、PropertyChanged イベントを定義する必要があり、プロパティのメンバーフィールドを用意したうえ、PropertyChanged イベントをプロパティ変更時に発行する。
アンケート(questionnaire) のプロパティは、コレクションプロパティで、コマンドプロパティは、View Model クラスのコンストラクタで初期化される。
public QuestionnaireViewModel()
{
this.questionnaire = new Questionnaire();
this.AllColors = new[] { "Red", "Blue", "Green" };
this.SubmitCommand = new DelegateCommand<object>(this.OnSubmit);
}
コレクションプロパティは、空のコレクションまたは、適切なコレクションをもってコンストラクタで初期化(典型的にはサービスを呼ぶなどして)されるべき。
ICommand プロパティ を View が Command プロパティとバインドできる様に公開する場合、コマンドオブジェクトのインスタンスを生成する必要がある。この例では、Prism の DelegateCommand 型 を使用している。
(コンストラクタの最終行)
OnSubmit ハンドラーメソッド。
private void OnSubmit(object obj)
{
Debug.WriteLine(this.BuildResultString());
}
View 要素 と View Model
View 要素 から View Model のプロパティへのバインディング
| 要素名 | プロパティ | 値 |
| NameTextBox | Text | {Binding Path=Questionnaire.Name,Mode=TwoWay} |
| AgeTextBox | Text | {Binding Path=Questionnaire.Age,Mode=TwoWay} |
| Question1Response | Text | {Binding Path=Questionnaire.Quest,Mode=TwoWay} |
| ColorRun | Forground | {Binding Questionnaire.FavoriteColor,TargetNullValue=Black} |
| Colors | ItemSource | {Binding Path=AllColors} |
| Colors | SelectedItem | {Binding Questionnaire.FavoriteColor, Mode=TwoWay} |
| SubmitButton | Command | {Binding SubmitCommand} |
View と View Model の組み立て
MainPage.xaml を開いて、View Model を生成している個所を確認。
<my:QuestionnaireView Grid.Row="1" Margin="0,0,6,-48"> </my:QuestionnaireView>
このコードで、MainPage の子要素として、Viewを生成し、QuestionnaireView.xaml の次の個所で、View のコンテキストに、View Model のインスタンスをセットしている。
<UserControl.DataContext>
<my:QuestionnaireViewModel/>
</UserControl.DataContext>
まず、そんなところか。
