NavigationServiceを使って画面遷移する（WP7）

Tweet

WP7での印象的な画面レイアウトとしてプリインストールアプリのPeapleアプリなどで利用されている「パノラマ（Panorama）」や、
Settingアプリなどで利用されている「ピボット（Pivot）」やがありますが、今回は基本となる通常の画面遷移を行う方法を紹介します。

画面遷移を行うにあたって、作成するサンプルは２つの画面を持っています。
記事内では「MainPage」と「SecondPage」という具合に呼び分けることとします。
各画面の内容は以下のとおりです。
MainPage

Buttonを押下すると、SecondPageに遷移する。
遷移の際にTextBoxに入力されているテキストデータをSecondPageに引き渡す。

SecondPage

遷移先のページとなる。
MainPageのTextBoxに入力されていたテキストデータをTextBlockに表示する。

それではつづきをどうぞ。

遷移先のページを用意する

始めに遷移先のページを用意しましょう。
VisualStudioの画面右側、ソリューションエクスプローラーから、以下を選択します。
プロジェクト名を右クリック　→　追加　→　新しい項目

表示されるポップアップウィンドウから、以下を選択します。
Windows Phone　縦向きのページ

以上の操作で、新しいページを追加することができます。
下図のように、SecondPage.xamlが表示されていることと思います。

WP7のプロジェクトでは、画面ごとにhoge.xamlが用意され、
画面の操作用の為のソースコードとしてXAMLごとにhoge.xaml.csが用意されます。
XAMLのデザインビューより、ボタンなどをダブルクリックすることで表示されるソースコードはこのhoge.xaml.csになります。

NavigationServiceクラスのNavigateメソッド

画面遷移の方法は非常に簡単です。
画面遷移には、以下表のNavigationServiceクラスのNavigateメソッドを使用します。

NavigationService.Navigate(Uri toUri)

サンプルでの指定方法は以下のとおり。
MainPage.xaml.cs

        private void button1_Click(object sender, RoutedEventArgs e)
        {
            NavigationService.Navigate(new Uri("/SecondPage.xaml?msg1=" + textBox1.Text, UriKind.Relative));
        }

ソースコード3行目のように、テキストデータをSecondPageに引き渡す為、Uriの中に含めています。

Uriに含まれたテキストデータを取り出す

ページを移動する場合に呼び出されるメソッドとして、以下メソッドがあります。

SecondPanel.xaml.csに「ページが呼び出される際にコールされる」メソッドである、OnNavigatedToメソッド内で
テキストデータを取り出します。
テキストデータは、NavigationContext クラスの QueryStringに格納されているため、以下メソッドで取り出すことができます。

サンプルでは、以下の様に記述しています。

SecondPage.xaml.cs

        protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
        {
            base.OnNavigatedTo(e);

            // 格納先の変数準備
            string inputVal = "";

            if (NavigationContext.QueryString.TryGetValue("msg1", out inputVal))
            {
                // textBlock1にて取得したデータを表示
                textBlock1.Text = inputVal;
            }

        }

4行目：格納先の変数を作成し、initializeを行っています。
6行目：TryGetValueメソッドを用いてQueryStringからデータを取得しています。取得できない場合はfalseとなります。
9行目：取得したデータをTextBlockに表示しています。