方法: Windows Phone でページ ナビゲーションを実行する

2012/02/09

このトピックでは、アプリケーション内のコンテンツのページ間を行き来する方法を説明します。

注注:

次の手順は、Visual Studio 2010 Express for Windows Phone 向けです。 Visual Studio 2010 Professional や Visual Studio 2010 Ultimate のアドインを使用している場合は、メニュー コマンドやウィンドウのレイアウトが多少異なる場合があります。  このトピックは、C# 開発を基にしていますが、Visual Basic のコードも提供しています。 

このセクションでは、アプリケーションのメイン ページからの移動先ができるように、コンテンツの追加ページを作成します。

追加ページを作成するには

  1. [ファイル] メニューの [新しいプロジェクト] をクリックして、新しいプロジェクトを作成します。

  2. [新しいプロジェクト] ウィンドウが表示されます。Visual C# のテンプレートを展開してから、Silverlight for Windows Phone のテンプレートを選択します。

  3. Windows Phone アプリケーション テンプレートを選択します。任意のプロジェクト名を入力します。

  4. MainPage.xaml のデザイナー ビューから [Text] プロパティで、または XAML で直接 [ページ タイトル] を選択し、このタイトル テキストを「メイン ページ」に変更します。

    AP_Con_mainpage
  5. ソリューション エクスプローラーでプロジェクトの名前を右クリックし、メニューから [追加] をクリックし、[新しい項目] をクリックします。

  6. [Windows Phone 縦向きのページ] を選択し、名前を「SecondPage」に変更し、ページの下端にある [追加] を選択します。

  7. SecondPage.xaml のデザイナー ビューから [Text] プロパティで、または XAML で直接 [ページ タイトル] を選択し、このタイトル テキストを「2 つ目のページ」に変更します。

このセクションでは、MainPage.xamlSecondPage.xaml の間を行き来する方法を示します。

ページ間を移動するには

  1. MainPage.xaml で、ツールボックスからデザイナー画面まで HyperlinkButton コントロールをドラッグします。このコントロールを選択し、Content プロパティを「2 つ目のページに移動」に変更するか、またはこれを XAML 内で直接行います。テキストがすべて表示されるように、コントロール幅を拡張することができます。

  2. ハイパーリンク ボタンをダブルクリックして、ハイパーリンクのクリック イベントのイベント ハンドラーを追加します。MainPage.xaml.cs ファイルが表示されます。

  3. hyperlinkButton1_Click イベント ハンドラーに、次のコードを追加します。

    private void hyperlinkButton1_Click(object sender, RoutedEventArgs e)
            {
                NavigationService.Navigate(new Uri("/SecondPage.xaml", UriKind.Relative));
            }
    
    注注:

    上の操作は、MainPage.xaml 内でハイパーリンク コントロールの NavigateUri プロパティを 2 つ目のページに設定することでも行えます。例を示します。

    NavigateUri = “/SecondPage.xaml”

  4. SecondPage.xaml で、Button コントロールをデザイナー画面までドラッグします。このコントロールを選択し、Content プロパティを「メイン ページに戻る」に変更するか、またはこれを XAML 内で直接行います。テキストがすべて表示されるように、コントロール幅を拡張することができます。

  5. ボタンをダブルクリックして、ハイパーリンクのクリック イベントのイベント ハンドラーを追加します。SecondPage.xaml.cs ファイルが表示されます。

  6. button1_Click イベント ハンドラーに、次のコードを追加します。

    
      private void button1_Click(object sender, RoutedEventArgs e)
            {
                NavigationService.GoBack();
            }
    
  7. [デバッグ]、[デバッグ開始] の順にメニュー コマンドを選択してアプリケーションを実行します。これによってエミュレーター ウィンドウが開き、アプリケーションが起動します。

アプリケーションを実行すると、アプリケーションがメイン ページと 2 つ目のページの 2 ページで構成されているのがわかります。イベント ハンドラーで移動先の URI が構成されているハイパーリンクを使用して、メイン ページから 2 つ目のページに移動できます。ナビゲーション サービスの GoBack() メソッドを使用すれば、2 つ目のページからメイン ページに戻ることができます。

注注:

この例では GoBack() メソッドを使用しましたが、ハードウェアの [戻る] ボタンでも同じように 1 つ前のページに戻ることができます。

AP_Con_mainnav

AP_Con_secnav

このセクションでは、1 つのページからテキストを取得して、そのテキストを別のページのテキスト ブロック コントロールに追加します。以降の手順では、前のプロジェクトを使用します。

文字列データをページ間で受け渡しするには

  1. MainPage.xaml で、ツールボックスからデザイナー画面まで TextBox コントロールと Button コントロールをドラッグして、この 2 つのコントロールを横並びに配置します。コントロールのプロパティで、TextBox コントロールに入っていたテキストを消します。コントロールのプロパティで、Button コントロールの名前を passParam に変更し、ボタン テキストを「移動」に変更します。または、これを XAML で直接行います。

  2. [移動] ボタンをダブルクリックして、ボタンのクリック イベントのイベント ハンドラーを追加します。MainPage.xaml.cs ファイルが表示されます。

  3. passParam_Click イベント ハンドラーに、次のコードを追加します。

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

    このコード行は、2 つ目のページに移動し、新しく作成した TextBox に入力された文字列データを渡します。

  4. SecondPage.xaml で、ツールボックスからデザイナー画面まで TextBlock コントロールをドラッグします。コントロールのプロパティで、TextBlock コントロールに入っていたテキストを消します。見やすくするために、適宜、コントロールの高さと幅を広げたり、大きいフォント サイズを選択したりします。作成した TextBlock に名前を付けます。この例では、textBlock1 にしました。

  5. SecondPage.xaml.cs で、次のメソッドを作成します。

       protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
            {
                base.OnNavigatedTo(e);
    
                string msg = "";
                
                if (NavigationContext.QueryString.TryGetValue("msg", out msg))
    
                    textBlock1.Text = msg;
    
               
            }
    
  6. [デバッグ]、[デバッグ開始] の順にメニュー コマンドを選択してアプリケーションを実行します。これによってエミュレーター ウィンドウが開き、アプリケーションが起動します。

    メイン ページで、TextBox コントロールに何かテキストを入力してから、[移動] をタップします。2 つ目のページが表示されたら、その前に入力したテキストが 2 つ目のページTextBlock コントロールに表示されるはずです。

    AP_Con_mainpasstxt

    AP_Con_secondpasstxt

表示: