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 アプリケーション メインウィンドウは、調査アプリケーションのサブセット。このウィンドウでは、異なったタイプの質問が表示され、送信ボタンがおかれている。

prism_qs_basic_mvvm01

ビルドと実行

  1. Silverlight only – Open QS – UI Composition QuickStart.bat を実行するとソリューションが起動する
  2. UIComposition.Web プロジェクトを右クリックし、スタートアッププロジェクトに設定を選択
  3. F5 で実行

ウォークスルー

1.メインウィンドウからを起動する。

2.Name と Age を入力し、好きな色を選択する

prism_qs_basic_mvvm02

3.Submit ボタンを押下すると、Visual Studio の 出力ウィンドウに結果が表示される

prism_qs_basic_mvvm03

実装の詳細

キーとなる要素を確認。

どのプロパティが 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>

まず、そんなところか。

Follow me!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です