Xamarin.Forms での MVVM の基礎について、通称 Petzold's book の18章「MVVM」をざっくり試しています。
前回の続きです。
Overview
Petzold's bookの内容に沿ってにざっくり進めます。
- 1. MVVM interrelationships（chapter.18 その1）
- MVVMの概要説明
- 時計の表示をMVVMで行うサンプル
- スライダーの値を掛け算するサンプル
- 色の変化を楽しむ？サンプル
- ViewModelの簡素化についてまとめました（...本文を要約）
- ICommandインターフェースの概要
- 3の累乗計算アプリのサンプル
- 簡易足し算アプリのサンプル
Environment
検証した環境は以下で前回同様2016-09-29時点で最新の状態にしています。
- Visual Studio 2015 (Enterprise update3)
- Xamarin.Forms
2. ViewModels and data binding(の続き）
Petzold's bookの500ページから再開。
Interactive properties in a ViewModel
今回のサンプルは、二つのスライダーで、数字の値を変更できるようにし、その2つの数字を掛け算した結果を出力するものです。イメージがわきやすいように、完成イメージを先に載せます。
2つのスライダーは、0～1の値を持っていて、その2つの値を動的に表示しつつ、掛け算した結果も動的に表示しています。
前回の利用したプロジェクトを利用して、ViewModelから作っていきます。PetzoldBook.Chap18プロジェクトのViewModelsフォルダー直下に、SimpleMultiplierViewModelクラスを追加します。
3つのプロパティ（Multiplicand、Multiplier、Product）と、それぞれのバッキングフィールドを用意しています。それぞれの値が変わるとイPropertyChangedEventHandlerをFireさせます。具体的には、MultiplicandプロパティまたはMultiplierプロパティの値が変わったら、UpdateProductメソッドでProductプロパティを更新するという動きです。
OnPropertyChangedメソッドについては、INotifyPropertyChanged関連のコードの重複を避けるための基本的な書き方のようですね。
次は、Viewsフォルダーの下に、Forms Xaml Pageを追加します。名前は、SimpleMultiplierPage.xamlにしました。
前回のサンプル（MvvMClock）の時同様、ContentPage.Resourcesセクションで、バインドする定義をしています。StackLayoutでSliderやそれぞれのプロパティを表示するLabelを書いています。
最後にページを表示するのに、App.csのコンストラクターを更新します。
これで動かしたのが、前述で載せた完成イメージになります。
次は...
A Color ViewModel
先ほどの掛け算のサンプルと大した差はありません。色の情報を動的に変更し、色自体を動的に表示するというものです。
色は、一般的に知名度の高いRGBAカラーモデルではなく、 HSLA値です。
それでは、PetzoldBook.Chap18プロジェクトのViewModelsフォルダー直下に、今回利用するColorViewModelクラスを追加します。
コード量がちょっと多く見えますが、プロパティが多いだけです。本では、今回使わないRBGA値のプロパティも書いてあったので実装しています（Rgbaのregion）。
今回のサンプルで利用するプロパティは、Hsla region内の3プロパティとColorプロパティです。後は、PropertyChangedEventHandler関連の実装として、前回も登場したOnPropertyChangedメソッドと、数値を丸めるRoundメソッドなどなど。
動作は、Hsla region内のプロパティの値が変わると、Colorプロパティに値をセットします。そして、Colorプロパティのセッターが状況に応じてOnPropertyChangedをFire...発火させるという流れです。
次は、Viewです。
Viewsフォルダーの下に、Forms Xaml Pageを追加します。名前は、SimpleMultiplierPage.xamlにしました。
色々と定義していますが、34行目のBoxViewのColorプロパティとViewModelのColorプロパティがバインドしています。
その下のStackLayoutで、Hueプロパティ、Saturationプロパティ、Luminosityプロパティをバインドしています。
後は、前回同様、App.csのコンストラクターで、MainPageに今回作ったSimpleMultiplierPageのインスタンスを指定してあげると、完成のイメージを作ることができました。
簡単な内容しかやってないですが、MVVMの基礎に慣れてきました。
18章...思った以上に長くて震えてますので、次回に続きます。
