MVVMの基本的なプロジェクトを作る

Viewを作る

今回は単純な足し算をするプログラムをMVVMで作ります。
まず、ViewにあたるXAMLを作ります。

今回のViewは最初に作成されたMainPage.xamlを使います。
3

MainPage.xamlをこのようなページにしましょう。
4

1つめのたす値であるTextBoxと2つめのたす値であるTextBox、更に足した結果を表示するTextBox、
計算開始するButtonが設置されていれば大丈夫です。

XAMLはこのようにしました。

Modelを作る

次に計算に用いる値と、計算する処理を保持するModelクラスを作ります。
今回の場合、Modelにあたるのは「足し算」という概念なのでSumクラスを作ります。
SumクラスはObservableObjectを継承します。
ObservableObjectはMVVMLightToolkitのクラスです。

続いて、Sumクラス内にフィールドを作ります。
足し算Modelは、フィールドとして
・1つめのたす値(int型)
・2つめのたす値(int型)
・足した結果の値(int型)
の3つのフィールドを所持する必要があります。
(なぜなら値が2つとその結果1つがないと足し算ができないから)
MVVMを実現するにあたって、後々のことを考えて、フィールドをプロパティでカプセル化する構造にする必要があります。

次に足し算を行うメソッドをつくります。
これは簡単で、自身のフィールドであるValue1とValue2を足した結果をResultにいれるだけです。

Sumクラス全体はこのようになります。

ViewModelを作る

最後にViewとModelとの橋渡しを行うViewModelを作成します。
MVVMLightToolkitを入れると、すでにViewModelフォルダにMainViewModelが入ってるのでこれをそのまま利用します。
ViewModekはModelを所持するので、今回のModelであるSumクラスをフィールドとして所持し、プロパティでカプセル化します。

自分でViewModelを作る場合は、MVVMLightToolkitのViewModelBaseクラスを継承する必要があります。

これでMVVMに必要な基本的なファイル構造は完成しました。
もちろん、別のページ(View)にも適用させたかったらViewが複数必要ですし、引き算も実行させたかったら引き算のモデルクラスを作る必要があります。
ただし、MVVMを実現するにあたって、最低View、Model、ViewModelの3つが必要となります。

5

基本的なファイル構造は完成しましたがこのままではプログラムは足し算をしてくれません。
次回以降で徐々にViewとModelとViewModelをつなげていきます。