kazuakix の日記

Windows Phone とか好きです

超高速 Windows Phone アプリ作成 (後編)

昨日の続きです。ブログは 2 日に渡っていますが 実際には連続して作業しています。

Blend での作業

ここからは Blend で作業します。Visual Studio のソリューションエクスプローラーで MainPage.xaml を右クリックして「Blend で開く」を選びます。

f:id:kazuakix:20140722225924j:plain
 

サンプルデータの作成

Blend を起動して真っ先にする事。それはサンプルデータの作成です。
画面右上のデータタブにある小さいアイコンのうち左側から「クラスからのサンプル データの作成」を選びます。

f:id:kazuakix:20140722230910j:plain
 
選択欄から先に作った MainPageViewModel を探します。

f:id:kazuakix:20140722225934j:plain,w311
 
自動的にサンプル データが作成されますが、続けてサンプルデータ名の横のアイコンを押して「サンプルデータの編集」をします。

f:id:kazuakix:20140722230931j:plain

XML (というか XAML) でサンプル―データの内容が定義されているので、文字列や数値を実際にありそうな値に書き換えます。

これを
f:id:kazuakix:20140722225950j:plain

こんな感に
f:id:kazuakix:20140722225956j:plain
XAML を保存するとサンプルデータに反映されます。
 

リスト項目の作成

作成したサンプルデータの中からリスト項目である IPInformation を画面の真ん中にドラッグ&ドロップします。

f:id:kazuakix:20140722230005j:plain,w360
 
こうすることで、自動的に IPInformation の内容を表示する ListBox が作られます。

f:id:kazuakix:20140722230012j:plain,w360
 
続いて表示内容を修正していきます。作られた ListBox で右クリックして「追加テンプレートの編集」→「生成されたアイテムの編集 (ItemTemplate)」→「現在の編集」と進みます。はじめて触ったときは「深いよ!」と叫ばずにはいられない階層の深さですね。嫌になるくらい出てくるのでそのうち慣れてしまいますが...。

f:id:kazuakix:20140722230028j:plain
 
小さい方法テキストボックスをコピー・ペーストして表示行数を増やします。続いて各テキストボックスにサンプルデータ欄の IPInformation の中から表示させた項目を選んでテキストボックスにドラッグ&ドロップしていきます。

f:id:kazuakix:20140722230034j:plain,w360
上から順に、IPAddress, InterfaceType, InterfaceName, NetworkConnectivityLevelString と割り当てていきました。
 
できあがった画面はこんな感じ。アプリ名と画面名のテキストも書き換えてそれっぽくなってきました。
f:id:kazuakix:20140722230042j:plain,w360
 

アプリバーの作成

このアプリで IP アドレスを調べるというただひとつの機能を呼び出すためのメニューを作成します。

画面左側「オブジェクトとタイムライン」タブにある「BottomAppBar」で右クリックして「Command Bar の追加」を選びます。

f:id:kazuakix:20140722234512j:plain
自動的にボタンが 2 つ作られるので 1 つを削除します。
 
残ったボタンのプロパティで「Synbol」を「Sync」に (好きなアイコンで構いませんが)、「Leble」を「Refresh」に設定します。

f:id:kazuakix:20140722234519j:plain
 
続けて表示をイベントに切り替えて「Click」欄に「OnRefreshButtonClicked」と今から作りたいメソッドの名前を入力します。

f:id:kazuakix:20140722235101j:plain
わざわざ入力しなくても空欄をダブルクリックすれば適当な名前で作ってくれるのですが、適当な名前だと後々訳がわからなくなるので最初から指定するのがお勧めです。
 
ここだけは Visual Studio に戻って、ボタンがクリックされたときに ViewModel に作ったデータ読み込みメソッドを呼ぶようにします。

f:id:kazuakix:20140722234530j:plain
 

ワンポイントをつくる

ここまででとりあえず動作するようにはなったのですが、あまりにも殺風景なのでちょっとしたワンポイントを作っていきます。

標準で作られた ListBox の中身に使っていない Image タグがあるので Border に変更して色をつけます。

f:id:kazuakix:20140723001600j:plain,w360
 
作った色はリソースとして名前をつけて保存しておきましょう。

f:id:kazuakix:20140723001608j:plain
  
ここでは「InternetConnectivityBrush」という名前にしました。

f:id:kazuakix:20140723001614j:plain
 
同様に「LimitedConnectivityBrush」「NoneConnectivityBrush」を作りました。(後から気が付いたのですが、現在有効な接続の IP アドレスだけを取得するので NoneConnectivityBrush が使われることはありませんね...)

f:id:kazuakix:20140723001621j:plain,w500
 
ここでもう一度 Visual Studio に戻って、Shared プロジェクトに NetworkConnectivityToBackgroundBrushConverterというクラスを作りました。長ったらしい名前ですが NetworkConnectivityLevel から上で設定した色のリソースを返すクラスになります。
f:id:kazuakix:20140723002623j:plain
ややこしげな書き方に見えますが、だいたいこのパターンでいけるのでほぼコピペです。
  
Blend に戻って先ほど色からリソースを作った所で「データバインディングの作成」を選びます。

f:id:kazuakix:20140723001636j:plain
 
パス欄で「NetworkConectivityLevel」、コンバーター欄で上で作った「NetworkConnectivityToBackgroundBrushConverter」を選びます。

f:id:kazuakix:20140723001644j:plain
 
こんな感じになりました。
f:id:kazuakix:20140723001650j:plain
 

その他微調整

Visual Studio に戻って動作の微調整をします。

起動時の動作

起動後に空の画面が表示されたままという理由でリジェクトをくらった事があります。
今回、データの読み込みにはほとんど時間かからないので画面を開いたときに問答無用でデータを表示するようにしました。

MainPage.xaml.cs の中にある NavigationHelper_LoadState で ViewModel のデータ読み込みメソッドを呼んでいます。

f:id:kazuakix:20140723004717j:plain
(データの読み込みに時間がかかるような場合はお勧めしません)

スプラッシュスクリーン削除

今回は単純なツールなのでスプラッシュスクリーンを削除して少しでもはやくに起動するようにしました。(手抜きじゃないですよ?)

ソリューションエクスプローラーから Package.appxmanifest を開いて「ビジュアル資産」の「スプラッシュスクリーン」のファイル名を削除します。
f:id:kazuakix:20140723004937j:plain
 

完成

他にもフォントサイズの微調整なんかもしましたが、以上でアプリはほぼ完成です。
後はエミュレーターや実機*1でテストしてみて、ストアに申請する事になります。

*1:今回は電波を出せない実機ではテストできないパターンですね...