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

個人的にXamarin.Forms入門中ということもあり、MVVMの基礎について通称 Petzold's book の18章「MVVM」で学んでみました。
（他の章はまだ読んでない...）

ASP.NETのサーバーサイド寄りな私なので、MVVMの概念は多少知ってますがディープに踏み込んだことはなく...基礎から学んでみようという感じです。

Overview

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

• 1. MVVM interrelationships
  • MVVMの概要説明
• 2. ViewModels and data binding
  • 時計の表示をMVVMで行うサンプル
• Interactive properties in a ViewModel（chapter.18 その2）
  • スライダーの値を掛け算するサンプル
• A Color ViewModel（chapter.18 その2）
  • 色の変化を楽しむ？サンプル
• Streamlining the ViewModel（chapter.18 その3）
  • ViewModelの簡素化についてまとめました（...本文を要約）
• The Command interface 1（chapter.18 その4）
  • ICommandインターフェースの概要
  • 3の累乗計算アプリのサンプル
• The Command interface 2（chapter.18 その5）
  • 簡易足し算アプリのサンプル
• ViewModels and the application lifecycle（chapter.18 FINAL）

Environment

検証した環境は以下で本日（2016-09-29）時点で最新の状態にしています。

• Visual Studio 2015 (Enterprise update3)
• Xamarin.Forms

1. MVVM interrelationships

Petzold's book 491ページです。MVVMの相互関係...基本的な概念が書かれていますが、ここが一番大切だと思ってます。しかし、ここでは本の要約はしません...コードを書いて筋トレという基本方針で進めます♪。

2. ViewModels and data bindings

Petzold's book 493ページです。本題のデータバインディングです。
気づきがあったところとして、

• PropertyChanged handlerは、コンストラクターの処理が終わってからアタッチされる
• INotifyPropertyChangedはINPCって略すんだー（#どうでもいい)。

A ViewModel clock

Petzold's book 494ページ、サンプルコードが出てきましたのでプロジェクト作ってコード書いて進めます。具体的には、時計のアプリを作って時間の表示をMVVMで実装し、動的に表示するというものです。
ちなみに、コードの中でプロパティ名とかを個人的好みで変えてます。

Visual Studioで新しいプロジェクト > 左ペインでCross-Platform > Blank App(Xamarin.Forms Portable)のプロジェクトを作成します。

プロジェクト名は、PetzoldBook.Chap18、ソリューション名はPetzoldBookにしました。（ネーミングセンスが微妙でしょうか...）
PetzoldBook.Chap18(移植可能)のプロジェクトに、個人的な好みで2つのフォルダーを作ります。

• Views
• ViewModels

先に言っておくと、最終的な構成はこのようにしました。

ViewModelsフォルダーの直下にDateTimeViewModelクラスを作ります。ViewModelにはお決まりのINotifyPropertyChangedインターフェースを実装して、以下のようにコーディングです。

DateTimeViewModelについて、パブリックなプロパティは、DateTime型のCurrentTimeだけです（27行目）。セッターでPropertyChangedEventHandlerをFireさせます（発火させます...と訳すべき？）。
また、11行目のコンストラクターに記載しているコードは、15ミリ秒ごとに、OnTimerTick()メソッドをCallし、CurrentTimeプロパティの値をガンガン更新しています。

36行目については、理由があるんだなー..ふむふむ（Petzold's book496ページの真ん中らへん）

In a multithreaded environment, a PropertyChanged handler might be detached between the if statement that checks for a null value and the actual firing of the event. Saving the handler in a separate variable prevents that from causing a problem, so it’s a good habit to adopt even if you’re not yet working in a multithreaded environment.

次は、Viewを作ります。Viewsフォルダー直下にForms Xaml Pageを追加します。名前は、MvvmClockPage.xmalにしました。

コードは、

XAMLについて詳しくは言及しませんが、ContentPage.Resourcesセクションで、バインドするDateTimeViewModelと、Labelのスタイルを定義しています。さらにStackLayoutの中で、時、分、秒、ミリ秒をバインドしています。

次は、App.csの中で、コンストラクターを以下のように書き換えて、アプリ起動時にMvvmClockPageが表示されるようにします。

今回はAndroidでしかデバッグしないので、PetzoldBook.Chap18.Droidプロジェクトを右クリックして、スタートアッププロジェクトに設定し、レッツ・デバッグ。Androidのエミュレーターでデバッグして動かしてみると、想像通りの動きになりました。

Petzold's bookの以降～500ページまで、Xamlで別の書き方の紹介が続きますので、ここでは省略...。

他の仕事も色々やってたせいで遅い時間になったので、次の「Interactive properties in a ViewModel」は、次回....