連載
» 2013年10月17日 17時15分 公開

連載:Windowsストア・アプリ開発入門:第4回 画面を構成するさまざまなコントロールと画面遷移 (3/6)

[山本康彦(http://www.bluewatersoft.jp/),BluewaterSoft]

画面遷移させる

 先ほどAppクラスを変更した部分では、「rootFrame」オブジェクトのNavigateメソッドを呼び出していた。rootFrameオブジェクトは、ソースコードをたどってみるとFrameコントロールである。FrameコントロールのNavigateメソッドに画面のクラスを与えると、表示される画面が変わるのだ。メイン画面からほかの画面に遷移するときも同様だ。違いは、「rootFrame」ではなく「this.Frame」を使うことである(どちらも同一のFrameオブジェクトを指している)。

 遷移した先の画面から元の画面に帰ってくるときは、Navigateメソッドは使わない。FrameコントロールのGoBackメソッドを使う。Frameコントロールは画面遷移の履歴を管理しており、それを利用するのだ。

スペックを決める

 メイン画面でRSSフィードの見出しをタップ/クリックしたら2つ目の画面に遷移し、そこで[戻る]ボタンをタップ/クリックしたらメイン画面へ遷移する(次の図)。画面遷移の際にデータを受け渡す方法は次回以降に説明することにして、今回はただ画面を切り替えるだけとする。

2つ目の画面との画面遷移 2つ目の画面との画面遷移
メインの画面でRSSフィードの見出しをタップ/クリックすると、2つ目の画面へ遷移する。そこで[戻る]ボタンをタップ/クリックすると、メイン画面に遷移する。

実装する

○行き(メイン画面→2つ目の画面)

 メイン画面の見出しリストの部分は、まだListViewItemコントロールをハードコーディングしてあるだけだ。全部のListViewItemコントロールに実装するのは面倒だし、次回以降で書き換えることになるので、ここでは1つだけに画面遷移を実装してみよう。

 まず、「HubPage.xaml」ファイルを開き、イベントハンドラを設定する(次のコード)。

<!-- 最初のセクションの最初のListViewItemコントロール -->
<ListViewItem Background="DodgerBlue"
              Tapped="ListViewItem_Tapped"
              Margin="0,0,0,10" BorderThickness="15,10">

「HubPage.xaml」ファイルでイベントハンドラを設定する(XAML)
太字の部分を追加する。

 ちなみに、このXAMLコードは全て手で入力してもよいが、例えば「Tapped=」まで入力したところで手を止めると、次の画像のようなツールチップが現れる。

XAMLビューでイベント属性を途中まで入力したところ(XAMLエディタ) XAMLビューでイベント属性を途中まで入力したところ(XAMLエディタ)
「Tapped=」まで入力すると、その後ろに「""」が自動補完され、イベントハンドラの候補リストが提示される。

 ここでは[<新しいイベント ハンドラー>]と表示されていて、その名前として「ListViewItem_Tapped」が提案されている。それでよければ[Tab]キーを押す。するとその名前で確定する。ほかの名前にしたいときは、普通に名前の入力を続ける。そして、入力カーソルをイベントハンドラの名前のところに戻して[F12]キーを押すと、コードビハインドのイベントハンドラにジャンプする。

 同じことは、プロパティウィンドウでもできる。XAMLビューで、入力カーソルを<ListVewItem>要素の開始タグ(または終了タグ)の中に置き、プロパティウィンドウのイベント一覧(次の画像)で[Tapped]の入力欄(この時点では空欄になっている)をダブルクリックすると、「ListViewItem_Tapped」イベントハンドラが生成されコードビハインドのイベントハンドラにジャンプする。

コントロールのタグ内にカーソルが置いてあるときのプロパティウィンドウ(XAMLエディタ) コントロールのタグ内にカーソルが置いてあるときのプロパティウィンドウ(XAMLエディタ)
赤枠を付けた部分をクリックすると、このようにイベントの一覧に切り替わる(プロパティの一覧に戻すには、その左のボタンをクリックする)。
空欄をダブルクリックすると、イベントの名前が自動生成され、コードビハインドのイベントハンドラにジャンプする。

 このような入力サポート機能が、VS 2013には豊富に組み込まれている。うまく活用してほしい。

 さて、イベントハンドラのメソッドは、そのスケルトン(=メソッドのシグネチャと空のメソッド定義)が自動生成されているので、その中に画面遷移させるコードを記述する。前述したように、「this.Frame」のNavigateメソッドを呼び出せばよい。

private void ListViewItem_Tapped(object sender, TappedRoutedEventArgs e)
{
  this.Frame.Navigate(typeof(ViewPage));
}

「HubPage.xaml.cs」ファイルでイベントハンドラの内容を記述する(C#)
太字の部分のみ入力する。

○帰り(2つ目の画面→メイン画面)

 帰りの画面遷移には、Navigateメソッドを使わない。「this.Frame」(=Frameコントロール)は画面遷移の履歴を記憶しており、GoBackメソッドを呼び出すだけで元の画面に戻れるのだ。また、戻れるかどうか(=それ以前に行われたページ遷移に関するデータが履歴にあるか)は、同じくFrameコントロールのCanGoBackプロパティで判断できる。すると、[戻る]ボタンのイベントハンドラに次のようなコードを書けばよいことになる。

if (this.Frame.CanGoBack)
{
  this.Frame.GoBack();
}

元の画面に遷移するコード(C#)

 ところが、今回使った[基本ページ]テンプレートには、上記に相当する実装がすでに組み込まれている。さらに、CanGoBackプロパティによって[戻る]ボタンの表示/非表示を切り替える実装も組み込まれているのだ。よって、帰りの画面遷移のためにあらためて実装することは何もない*3

*3 [基本ページ]テンプレートにどのような実装がされているかは、入門のレベルを超えるのでここでは説明しないが、興味があるならばソースコードを読んでほしい。プロジェクトのCommonフォルダに自動生成された「NavigationHelper.cs」ファイルに「GoBackCommand」というプロパティが実装されている。GoBackCommandプロパティの中身を追っていくと、FrameコントロールのCanGoBackプロパティやGoBackメソッドを使っていることが分かるだろう。そして、「ViewPage.xaml」ファイルの[戻る]ボタン(=「backButton」という名前のAppBarButtonコントロール)のCommand属性に、そのGoBackCommandプロパティがバインドされている。また、Command属性に与えたオブジェクトのCanExecuteメソッドの戻り値によって[戻る]ボタンのIsEnabledプロパティが変化し(これはAppBarButtonコントロールの機能)、IsEnabledプロパティの値はVisibilityプロパティにバインドされているので、表示/非表示が自動的に切り替わるようになっている。なお、イベントハンドラを使わずに、このようにしてCommand属性にバインドする方法でイベントを処理するのは面倒だが、ロジックとUIをきれいに分離できる。


Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。