あいてぃーとふぼふ

今回からはWP７アプリに関する画面の実装に着手します！手始めにまずは「ABOUT」画面を作成しましょう！

ビューモデルの作成

まずはビューモデルを作成します。ビューモデルというのは、「ビュー（画面）」と「モデル（データ）」の橋渡しをするためのクラスです。本来ならば、前回作成したようなデータモデルを「モデル」とするのが良いお手本なのですが、今回作成する「ABOUT」画面はモジュールのバージョンや著作権情報などを表示する画面です。このため今回の「ABOUT」画面において「モデル」とする情報は、アセンブリの情報を記述するための「AssemblyInfo.cs」ファイルに記載された内容とします。このファイルから情報を取得できれば「ABOUT」画面にはもってこいですよね！ということで、「AssemblyInfo.cs」の情報を取得するための方法を含め、ビューモデル「AboutPageViewModel」はこんな感じで実装できそうです。

なお、今回作成したビューモデルは、いわば読み取り専用のビューモデルです。このため、ビューとビューモデル間において相互にデータをやり取りしたり、ビューからビューモデルの処理（コンストラクタ以外）を呼び出したりすることはありません。もしこれらを行いたい場合は、「INotifyPropertyChanged」や「ICommand」などを利用したりする必要がありますのでご注意ください。でも最初はカンタンなビューモデルから理解するほうがカンタンです。

ビューの作成

ビューは適当にコントロールを配置しましょう！ポトぺタでもいいですが、パネルやリソースを積極的に活用すると統一性があって保守しやすい画面になります。この辺りはVSを使用できる人であれば説明不要ですよね（汗。ということで今回は、せっかくビューモデルを先行して作成しましたので、このビューモデルを利用してビューの調整やバインディングを作成していきましょう。

ブレンドのススメ

上記で作成したビューを「Expression Blend」で表示すると、画面右端とかそのへんに「Data」タブが表示されていると思います。もし見当たらない場合は、メインメニューなどを調べてどうにか表示しましょう！

このタブから変なアイコン（Create Sample Data）をクリックして「Create Sample Data from Class」メニューを選択すると、ダイアログが開いてビューモデルを選択することができます。

この一覧から先程作成したビューモデルを迷わず選択することにより、「Data」タブの中に「AboutPageViewModelSampleData」みたいな項目が作成されます。じつはこれ、ExpressionBlendがビューモデルをもとに自動生成してくれたサンプルデータです。「Data」タブ内の「AboutPageViewModel」をビューにドラッグアンドドロップすると、このサンプルデータ（ビューモデル）とビューが関連付けられるため、これによりサンプルデータに基づいたビューの実装や調整が可能になります。

ちなみにこの状態であれば、データバインドの作成もリストからビューモデルのプロパティを選択するだけで簡単に作成することが可能です。スゴク便利です。

なお上記の手順では、あくまでビューとビューモデルのサンプルデータが関連付いているにすぎません。このため、ビューと実際のビューモデルを関連付けるためには、例えばビューのXMALの先頭で上記のように記述することで実現することが可能です。

ということで、駆け足でしたがこんな感じで画面を実装していきましょう！…というか、なんかもう内容がグダグダですね…（汗