アプリケーションバーを設定しよう
Windows Phone 7アプリは必要に応じて各種操作用のアイコンを画面下に表示して操作できるようにします。
この領域をアプリケーションバーといいSilverlight for Windows Phone 7ではXAML定義でアプリケーションバーをデザインできます。
アプリケーションバーには２種類の表現方法があります。
１つは「ApplicationBarIconButton」、もう一つは「ApplicationBarMenuItem」です。
ApplicationBarIconButtonは、アプリケーションバーにアイコンとして常に表示されますが、表示個数は４つまでと決まっています。そのため、本当に常に必要とする機能を割り当てます。
今回のサンプルでは、「最新」、「編集」、「写真」、「検索」の４つの機能を割り当てることにします。
ApplicationBarMenuItemは、アプリケーションバーには常に表示されないメニュー項目です。アプリケーションバーの一番右に表示されている「…」をタップすると表示されます。
アプリケーションバーに表示するアイコンをプロジェクトに追加する
Windows Phone Developer Toolsをインストールするとアプリケーションバーに使用するためのアイコン集も
C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.0\Icons\dark
にインストールされます。
今回はこのフォルダにある
- appbar.edit.rest.png
- appbar.feature.camera.rest.png
- appbar.feature.search.rest.png
- appbar.refresh.rest.png
のアイコンをプロジェクトフォルダにIconsフォルダを作成してコピーします。
このとき画像ファイルのプロパティを次のように設定します。この設定を忘れるとアプリケーションバーにアイコンが表示されません。
アプリケーションバーのXAML定義
Windows Phone 7アプリのプロジェクトを新規作成したときにMainPage.xamlにはコメントアウトした形でアプリケーションバーの定義例が記述されています。
そのコメントを外して４つのApplicationBarIconButtonと２つのApplicationBarMenuItemを追記してみましょう。
たったこれだけの定義でアプリケーションバーの画面デザインが完成です。
さっそく実行してみましょう。
一番右側の「…」をタップしてみます。
するとアプリケーションバー領域が拡大されApplicationBarMenuItemに設定したメニュー項目が表示されます。また、ApplicationBarIconButtonにもキャプションが表示されます。
なお、ApplicationBarIconButtonに設定したアイコンはIDE上では表示されないので「XAMLを正しく記述したのに表示されない」とあわてたりしないようにしましょう。もし、実行時も表示されない場合はpngファイルのプロパティをプロパティウィンドウで再確認してみてください。
アプリケーションバーをクリックした時の動作を記述しよう
アプリケーションバーのアイコンやメニュー項目をクリックした時の処理を記述するにはApplicationBarIconButtonやApplicationBarMenuItemに対するClickイベントのイベントプロシージャを記述します。
イベントプロシージャーを記述する方法はいくつかありますが、該当するApplicationBarIconButtonのXAML定義にClick="Refresh_Button_Click"属性を追加してみましょう。
そして、そこにマウスを持っていき右クリックして［イベントハンドラーに移動］メニューをクリックすればMainPage.xaml.vbに次のようなコードが生成されます。
Private Sub Refresh_Button_Click(sender As System.Object,
e As System.EventArgs)
End Subこのサブプロシージャの中に「最新」ボタンをクリックした時の動作を記述します。