演習: ナビゲーションページでタブ付きページを使用する

10 分

天文学アプリに、ユーザーがさまざまな天体を選択し、それらの詳細を表示できるページを追加するように求められました。天体はいくつでも存在する可能性があるため、天体ごとにタブを作成することは実現可能な方法ではありません。そのため、表示する天体をユーザーが選択できるように、一覧が含まれている別のページを追加することを決定しました。ユーザーはこのリストから本文を選択でき、アプリによってその本文の詳細が新しいページに表示されます。リストページは、スタックナビゲーションの"ルートページ" として機能します。このリストページを既存のユーザーインターフェイスでタブとして追加します。

天体のページ間を移動するためのスタックナビゲーションモデルの図。

スターターソリューションを開く

このモジュールの開始時に複製したリポジトリ内の exercise3 フォルダーに移動してから、start フォルダーに移動します。
Visual Studio を使用して、Astronomy.sln ソリューションまたは Visual Studio Code 内のフォルダーを開きます。

Note

このソリューションには、以前の演習で使用したバージョンのアプリにはないページが含まれています。
[ソリューションエクスプローラー] ウィンドウで、Pages フォルダーを開きます。このフォルダーには、MoonPhasePage、SunrisePage、AboutPage の各ファイルに加えて、さらに次の 2 つのページが含まれています。
- AstronomicalBodiesPage。このページには、ユーザーが太陽、月、地球、またはハレー彗星の詳細を選択できる 4 つのボタンが含まれています。現在のバージョンのアプリは概念実証にすぎません。今後、このページで、ユーザーがより大きなリストから選択できるようになります。
- AstronomicalBodyPage。このページは、天体の情報を表示するために使用されます。

AstronomicalBodiesPage は、[Astronomy] (天文学) ポップアップがクリックされたときに表示されるページにタブとして既に追加されています。

詳細ページのルートを追加する

AstronomicalBodyPage に移動するには、AppShell クラスのコンストラクターに登録してルートを設定する必要があります。
```
public AppShell()
{
    InitializeComponent();

    Routing.RegisterRoute("astronomicalbodydetails", typeof(AstronomicalBodyPage));
}
```

詳細ページに移動する

次に、ナビゲーションを実行する必要があります。 AstronomicalBodiesPage.xaml.cs 内に、ページ上の各 Button のクリックイベントハンドラーを作成してください。

public AstronomicalBodiesPage()
{
    InitializeComponent();

    btnComet.Clicked += async (s, e) => await Shell.Current.GoToAsync("astronomicalbodydetails");
    btnEarth.Clicked += async (s, e) => await Shell.Current.GoToAsync("astronomicalbodydetails");
    btnMoon.Clicked += async (s, e) => await Shell.Current.GoToAsync("astronomicalbodydetails");
    btnSun.Clicked += async (s, e) => await Shell.Current.GoToAsync("astronomicalbodydetails");
}

Button がクリックされるたびに、アプリは AstronomicalBodyPage ページに移動します。ただし、引き続き、どの種類の天体を表示するかを送信する必要があります。

AstronomicalBodyPage にデータを送信するには、ルーティング情報にクエリパラメーター文字列を追加します。文字列は、?astroName=astroBodyToDisplay の形式です。

btnComet.Clicked += async (s, e) => await Shell.Current.GoToAsync("astronomicalbodydetails?astroName=comet");
btnEarth.Clicked += async (s, e) => await Shell.Current.GoToAsync("astronomicalbodydetails?astroName=earth");
btnMoon.Clicked += async (s, e) => await Shell.Current.GoToAsync("astronomicalbodydetails?astroName=moon");
btnSun.Clicked += async (s, e) => await Shell.Current.GoToAsync("astronomicalbodydetails?astroName=sun");

AstronomicalBodyPage でデータを受信するには、まず、受信データを保持するためのクラスレベルのプロパティを作成します。これに AstroName という名前を付けます。
```
string astroName;
public string AstroName
{
    get => astroName;
    set
    {
        astroName = value;

        // this is a custom function to update the UI immediately
        UpdateAstroBodyUI(astroName);
    } 
}
```
ここで、UpdateAstroBodyUI(astroName) は、AstroName プロパティが設定されたらすぐにユーザーインターフェイスを更新するために使用されるヘルパー関数です。
次に、受信したクエリパラメーターを、作成したプロパティにマップする注釈でクラスを修飾する必要があります。
```
[QueryProperty(nameof(AstroName), "astroName")]
public partial class AstronomicalBodyPage
{ 
    ...
}
```
アプリを起動し、[天体] というタイトルのタブを選択します。
[太陽] ボタンを選択します。太陽の詳細が表示されます。ナビゲーションバーには、ユーザーが天体の一覧に戻ることができる [戻る] 矢印が含まれています。残りのタブは引き続き表示されており、アクティブです。
アプリを閉じて、Visual Studio または Visual Studio Code に戻ります。

演習: ナビゲーション ページでタブ付きページを使用する

スターター ソリューションを開く

詳細ページのルートを追加する

詳細ページに移動する

フィードバック

演習: ナビゲーションページでタブ付きページを使用する

スターターソリューションを開く