.NET MAUI Shell の概要

Browse sample. サンプルを参照する

.NET Multi-platform App UI (.NET MAUI) Shell によって、ほとんどのアプリに必要な次のような基本機能が提供されて、アプリ開発の複雑さが軽減されます。

  • アプリのビジュアル階層を記述する 1 つの場所。
  • 一般的なナビゲーション ユーザー インターフェイス。
  • アプリ内の任意のページに移動できる URI ベースのナビゲーション方式。
  • 統合された検索ハンドラー

アプリのビジュアル階層

.NET MAUI Shell アプリのビジュアル階層は、Shell クラスをサブクラス化するクラスで記述されます。 このクラスは、次の 3 つの主要な階層オブジェクトで構成できます。

  1. FlyoutItem または TabBarFlyoutItem は、ポップアップ内の 1 つ以上のアイテムを表し、アプリのナビゲーション パターンでポップアップが必要な場合に使用するべきです。 TabBar は、下部のタブ バーを表し、アプリのナビゲーション パターンが下部のタブで始まり、ポップアップを必要としない場合に使用するべきです。 ポップアップ項目の詳細については、「.NET MAUI Shell ポップアップ」をご覧ください。 タブ バーの詳細については、「.NET MAUI Shell タブ」をご覧ください。
  2. Tab。これは、下部のタブによって移動できるグループ化されたコンテンツを表します。 詳細については、「.NET MAUI Shell タブ」をご覧ください。
  3. ShellContent は、各タブの ContentPage オブジェクトを表します。詳細については、「.NET MAUI Shell ページ」をご覧ください。

これらのオブジェクトは、ユーザー インターフェイスを表すのではなく、アプリのビジュアル階層の編成を表します。 シェルでは、これらのオブジェクトを取得して、コンテンツのナビゲーション ユーザー インターフェイスを生成します。

Note

Shell アプリでは、ナビゲーションに応じてページがオンデマンドで作成されます。

詳細については、「.NET MAUI Shell アプリを作成する」をご覧ください。

.NET MAUI Shell によって提供されるナビゲーション エクスペリエンスは、ポップアップとタブに基づいています。 Shell アプリのナビゲーションの最上位レベルは、アプリのナビゲーション要件に応じて、ポップアップまたは下部のタブ バーのいずれかになります。 次の例は、ナビゲーションの最上位レベルがポップアップであるアプリを示しています。

Screenshot of a Shell flyout.

この例では、いくつかのポップアップ項目がタブ バー項目として複製されます。 ただし、ポップアップからしかアクセスできない項目もあります。 ポップアップ項目を選択すると、項目が選択され表示された状態で、下部のタブが表示されます。

Screenshot of Shell bottom tabs.

Note

ポップアップが開いていないときは、下部のタブ バーはアプリ内の上位レベルのナビゲーションと見なすことができます。

タブ バーの各タブには、ContentPage が表示されます。 ただし、下部のタブに複数のページが含まれる場合は、上部のタブ バーからページをナビゲートできます。

Screenshot of Shell top tabs.

各タブ内では、詳細ページとして知られる追加の ContentPage オブジェクトに移動できます。

Screenshot of Shell page navigation.

Shell では、設定されたナビゲーション階層に従わなくても、アプリ内の任意のページに移動するルートを使用する URI ベースのナビゲーション環境が使用されます。 さらに、これにより、ナビゲーション スタックのすべてのページにアクセスすることなく、後方に移動する機能も提供されます。 詳細については、「.NET MAUI Shell ナビゲーション」を参照してください。

.NET MAUI Shell には、SearchHandler クラスによって提供される統合された検索機能が組み込まれています。 検索機能をページに追加するには、サブクラス化された SearchHandler オブジェクトをそのページに追加します。 これにより、検索ボックスがページの上部に追加されます。 検索ボックスにデータを入力すると、検索候補領域にデータが入力されます。

Screenshot of Shell search.

次に、検索候補領域から結果を選択すると、詳細ページへの移動などのカスタム ロジックを実行できます。

詳細については、「.NET MAUI Shell の検索」を参照してください。