BEACHSIDE BLOG

Azure と GitHub と C# が好きなエンジニアの個人メモ ( ・ㅂ・)و ̑̑

Xamarin.Forms の MVVM 基礎 ( Petzold's book - chapter.18 その2)

Xamarin.Forms での MVVM の基礎について、通称 Petzold's book の18章「MVVM」をざっくり試しています。
前回の続きです。

Overview

Petzold's bookの内容に沿ってにざっくり進めます。

Environment

検証した環境は以下で前回同様2016-09-29時点で最新の状態にしています。

2. ViewModels and data binding(の続き)

Petzold's bookの500ページから再開。
 

Interactive properties in a ViewModel

今回のサンプルは、二つのスライダーで、数字の値を変更できるようにし、その2つの数字を掛け算した結果を出力するものです。イメージがわきやすいように、完成イメージを先に載せます。

f:id:beachside:20160930153205g:plain

2つのスライダーは、0~1の値を持っていて、その2つの値を動的に表示しつつ、掛け算した結果も動的に表示しています。
前回の利用したプロジェクトを利用して、ViewModelから作っていきます。PetzoldBook.Chap18プロジェクトのViewModelsフォルダー直下に、SimpleMultiplierViewModelクラスを追加します。

3つのプロパティ(MultiplicandMultiplierProduct)と、それぞれのバッキングフィールドを用意しています。それぞれの値が変わるとイ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

先ほどの掛け算のサンプルと大した差はありません。色の情報を動的に変更し、色自体を動的に表示するというものです。

f:id:beachside:20160930235648g:plain

色は、一般的に知名度の高い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章...思った以上に長くて震えてますので、次回に続きます