昨日の続きです。ブログは 2 日に渡っていますが 実際には連続して作業しています。
Blend での作業
ここからは Blend で作業します。Visual Studio のソリューションエクスプローラーで MainPage.xaml を右クリックして「Blend で開く」を選びます。
サンプルデータの作成
Blend を起動して真っ先にする事。それはサンプルデータの作成です。
画面右上のデータタブにある小さいアイコンのうち左側から「クラスからのサンプル データの作成」を選びます。
選択欄から先に作った MainPageViewModel を探します。
自動的にサンプル データが作成されますが、続けてサンプルデータ名の横のアイコンを押して「サンプルデータの編集」をします。
XML (というか XAML) でサンプル―データの内容が定義されているので、文字列や数値を実際にありそうな値に書き換えます。
これを
こんな感に
XAML を保存するとサンプルデータに反映されます。
リスト項目の作成
作成したサンプルデータの中からリスト項目である IPInformation を画面の真ん中にドラッグ&ドロップします。
こうすることで、自動的に IPInformation の内容を表示する ListBox が作られます。
続いて表示内容を修正していきます。作られた ListBox で右クリックして「追加テンプレートの編集」→「生成されたアイテムの編集 (ItemTemplate)」→「現在の編集」と進みます。はじめて触ったときは「深いよ!」と叫ばずにはいられない階層の深さですね。嫌になるくらい出てくるのでそのうち慣れてしまいますが...。
小さい方法テキストボックスをコピー・ペーストして表示行数を増やします。続いて各テキストボックスにサンプルデータ欄の IPInformation の中から表示させた項目を選んでテキストボックスにドラッグ&ドロップしていきます。
上から順に、IPAddress, InterfaceType, InterfaceName, NetworkConnectivityLevelString と割り当てていきました。
できあがった画面はこんな感じ。アプリ名と画面名のテキストも書き換えてそれっぽくなってきました。
アプリバーの作成
このアプリで IP アドレスを調べるというただひとつの機能を呼び出すためのメニューを作成します。
画面左側「オブジェクトとタイムライン」タブにある「BottomAppBar」で右クリックして「Command Bar の追加」を選びます。
自動的にボタンが 2 つ作られるので 1 つを削除します。
残ったボタンのプロパティで「Synbol」を「Sync」に (好きなアイコンで構いませんが)、「Leble」を「Refresh」に設定します。
続けて表示をイベントに切り替えて「Click」欄に「OnRefreshButtonClicked」と今から作りたいメソッドの名前を入力します。
わざわざ入力しなくても空欄をダブルクリックすれば適当な名前で作ってくれるのですが、適当な名前だと後々訳がわからなくなるので最初から指定するのがお勧めです。
ここだけは Visual Studio に戻って、ボタンがクリックされたときに ViewModel に作ったデータ読み込みメソッドを呼ぶようにします。
ワンポイントをつくる
ここまででとりあえず動作するようにはなったのですが、あまりにも殺風景なのでちょっとしたワンポイントを作っていきます。
標準で作られた ListBox の中身に使っていない Image タグがあるので Border に変更して色をつけます。
作った色はリソースとして名前をつけて保存しておきましょう。
ここでは「InternetConnectivityBrush」という名前にしました。
同様に「LimitedConnectivityBrush」「NoneConnectivityBrush」を作りました。(後から気が付いたのですが、現在有効な接続の IP アドレスだけを取得するので NoneConnectivityBrush が使われることはありませんね...)
ここでもう一度 Visual Studio に戻って、Shared プロジェクトに NetworkConnectivityToBackgroundBrushConverterというクラスを作りました。長ったらしい名前ですが NetworkConnectivityLevel から上で設定した色のリソースを返すクラスになります。
ややこしげな書き方に見えますが、だいたいこのパターンでいけるのでほぼコピペです。
Blend に戻って先ほど色からリソースを作った所で「データバインディングの作成」を選びます。
パス欄で「NetworkConectivityLevel」、コンバーター欄で上で作った「NetworkConnectivityToBackgroundBrushConverter」を選びます。
こんな感じになりました。
その他微調整
Visual Studio に戻って動作の微調整をします。
*1:今回は電波を出せない実機ではテストできないパターンですね...