気が付けば ずいぶんと長い事アプリを作っていなかったので昨日まで調べていた IP アドレスを表示するアプリを作ってみました。いろいろ忘れかけた内容を思い出しながら進めているので 変な事をしていたらこっそり教えてください。
Visual Studio での作業
まずはプロジェクトを作ります。 Phone では何種類かのアプリを作ることができますが、今回はユニバーサルアプリを選択しました。
ソース管理の種類も聞いてくるのでとりあえず Git を選んでいます。
プロジェクトが開いたら Phone をスタートアッププロジェクトにしておきます。
データの入れ物 (Model) をつくる
Shared プロジェクトに Models フォルダを作ってその中にデータを格納するクラスを作ります。今回は IPInfoItem.cs としました。
ちなみに ～Item とするのは個人のクセです。例えば今回みたいな場合に Information とかすると後でコレクションを作るときに複数形が無くて名前で悩むので… まぁ名前適当に決めてもあとでリファクタリングすればいいので、名前に悩むくらいなら適当につけて先へ進みましょう。*1
まず、最初にクラスを Public にしておきます。
それっぽく中身を作ったのがこちら。
保存したいデータをプロパティとして作って、昨日の HostName と ConnectionProfile からセットするようにしています。
同様に IPInfoItems.cs も作ります。
実体は List
画面 (View) を作る
Phone プロジェクトに移って標準の MainPage.xaml を消して、Views フォルダを作って その中に MainPage.xaml を作ります。(単に個人の好みです)
但し、新しく作る画面は「空白のページ」ではなく「基本ページ」を選びます。
基本ページを追加すると いくつかのヘルパクラスを追加してくれるのでありがたく使わせてもらいましょう。
スタートページを消してしまったので App.xaml.cs で MainPage を呼び出している部分を Views.ManPage に書き換えておきます。
ViewModel を作る
ViewModel は上で作った Model と View を繋ぐための...という説明は他所で探してください。Phone プロジェクトに ViewModels フォルダを作って View に対応した ViewModel を作ります。今回は MainPageViewModel.cs としました。
とりあえず画面に出したい項目はこんなものでしょうか？
リスト項目は ObservableCollection
あとはコンストラクタと Model の読み込みメソッドを書いておきます。
ViewModel ができたので View のコードも少し直します。
まずプライベート変数は先頭に _ をつけたい (個人の好みです) ので、変数名を変えていきます。navigationHelper の上で F2 キーを押して _navigationHelper としましょう。
同様に defaultViewModel を _defaultViewModel に変更します。
そしてもっと重要な事ですが標準で ViewModel に使われている ObservableDictionary を上で作った MainPageViewModel に変更します。
最後にコンストラクタで _defaultViewModel をページ全体の DataContext に設定しておきます。
Visual Studio での作業はこのくらいですね。続いて Blend で画面を作っていくのですが、長くなってきたので続きは次回に...。
*1:と言いながら、結構悩みます
