ナビゲーション スタック上のページでタブ付きページを使用する

  • 5 分

ポップアップ ナビゲーションとタブ付きナビゲーションは、ユーザーがアプリによって提供されたデータ間を移動できるようにするための 2 つの方法にすぎません。 別の手法として、スタック ナビゲーションを使用する方法があります。 各種類のナビゲーションは、ページ間の異なる種類の関係に適しています。

スタック ナビゲーションは、ポップアップおよびタブと組み合わせて使用できます。 このユニットでは、タブおよびポップアップ ナビゲーションとスタック ナビゲーションの違いを簡単に確認した後、両方の手法を組み合わせたアプリを構築する方法について学習します。

ポップアップ ナビゲーションとタブ ナビゲーションの確認

ポップアップ ナビゲーションとタブ ナビゲーションは、ユーザーが任意の時点でどのページを表示するかを選択できるようにするための有効なメカニズムを提供します。 ユーザーは、単に適切なタブまたはポップアップ項目を選択するだけでページに移動します。 この形式のナビゲーションは、互いにピアの関係を持つデータ項目に有効です。 天文学アプリでは、[太陽]、[月]、[概要] の各ページはすべてピアです。それらの間に直接の関係はありません。

ただし、階層データの場合は、スタック ナビゲーションの方が適していることがあります。 スタック ナビゲーションを使用すると、ユーザーは一連のページをドリルダウンできます。ここでは、スタック内の次のページによって、前のページで選択された項目のより詳細なビューが提供されます。

以下のシナリオについて考えてみます。

天文学アプリに、天体を表示する新しいページを追加しました。 ユーザーがこれらの天体の 1 つをタップして、それに関する情報を表示するようにしたいとします。 天体を一覧表示するページは、月相ページと日の出ページの兄弟としてタブ ページで表示されるのが最適です。 天体に関する詳細情報は、スタック ナビゲーションを使用して一連の手順として表示される方が適しています。 このメカニズムにより、ユーザーが [戻る] ボタンをタップしてメインの天体ページに戻ることもできるようになります。

.NET MAUI (.NET マルチプラットフォーム アプリ UI) シェルには、設定されたナビゲーション階層に従わなくても、ルートを使用してアプリ内の任意のページに移動できる URI ベースのナビゲーション エクスペリエンスが含まれています。 さらに、ナビゲーション スタック上のすべてのページにアクセスしなくても逆方向に移動できるようになります。

Shell クラスによって、次のナビゲーション関連のプロパティが定義されます。

  • BackButtonBehavior: BackButtonBehavior型、戻るボタンの動作を定義する添付プロパティ。
  • CurrentItem: ShellItem 型、現在選択されている項目。
  • CurrentPage: Page 型、現在表示されているページ。
  • CurrentState: ShellNavigationState型、Shell の現在のナビゲーションの状態。
  • Current: Shell 型、Application.Current.MainPage の型キャストした別名。

ナビゲーションは、Shell クラスから、GoToAsync メソッドを呼び出すことで実行されます。

ルート

ナビゲーションは、移動先の URI を指定することによってシェル アプリで実行されます。 ナビゲーション URI には、3 つの要素を含めることができます。

  • "ルート"。シェルの視覚階層の一部として存在するコンテンツへのパスを定義します。
  • "ページ"。 シェル ビジュアル階層に存在しないページは、シェル アプリ内のどこからでもナビゲーション スタックにプッシュできます。 たとえば、詳細ページはシェル ビジュアル階層では定義されませんが、必要に応じてナビゲーション スタックにプッシュできます。
  • 1 つまたは複数の "クエリ パラメーター"。 クエリ パラメーターは、ナビゲーション中に移動先ページに渡すことができるパラメーターです。

ナビゲーション URI に 3 つすべての要素を含めると、構造は //route/page?queryParameters にようになります。

ルートを登録する

ルートは、FlyoutItem、TabBar、Tab、ShellContent オブジェクトに対して、その Route プロパティを使用して定義できます。

<Shell ...>
    <FlyoutItem ... 
        Route = "astronomy">
        <ShellContent ...
            Route="moonphase" />
        <ShellContent ...
            Route="sunrise" />
    </FlyoutItem>
    <FlyoutItem>
        <ShellContent ...
            Route="about" />
    </FlyoutItem>
</Shell>

moonphase ルートに移動するには、絶対的なルート URI は //astronomy/moonphase になります。

詳細ルートを登録する

Shell サブクラス コンストラクター、またはルートが呼び出される前に実行される他のすべての場所では、シェル ビジュアル階層には表されない任意の詳細ページに対して、Routing.RegisterRoute メソッドを使用してルートを明示的に登録できます。

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

AstronomicalBodyPage に移動するには、その後、次のように呼び出します。

await Shell.Current.GoToAsync("astronomicalbodydetails");`

後方ナビゲーション

".." を GoToAsync メソッドへの引数として指定することで、後方ナビゲーションを実行できます。

await Shell.Current.GoToAsync("..");

データを渡す

URI ベースのプログラム ナビゲーションを実行する場合は、文字列ベースのクエリ パラメーターとしてプリミティブ データを渡すことができます。 ルートの後に ? に続けて、クエリ パラメーター ID、=、値を追加することによってデータを渡します。

string celestialName = "moon";

await Shell.Current.GoToAsync($"astronomicalbodydetails?bodyName={celestialName}");

この例では、ルートは astronomicalbodydetails、パラメーターは bodyName、値は変数 celestialName の値です。

データの取得

ナビゲーション データは、受信するクラスを、文字列ベースの各クエリ パラメーターの QueryPropertyAttribute とオブジェクト ベースのナビゲーション パラメーターで修飾することによって受信できます。

[QueryProperty(nameof(AstroName), "bodyName")]
public partial class AstronomicalBodyPage : ContentPage
{
    string astroName;
    public string AstroName
    {
        get => astroName;
        set
        {
            astroName = value;
        }
    }

    ...
}

この例では、QueryPropertyAttribute の最初の引数で、データを受信するプロパティの名前を指定し、2 番目の引数でパラメーター ID を指定します。

自分の知識をチェックする

1.

.NET MAUI シェルのルート ベースのナビゲーションを使用している場合は、ページにデータをどのように送信しますか?