.NET MAUI シェル アプリを作成する

サンプルを参照する

.NET Multi-platform App UI (.NET MAUI) シェル アプリは、.NET MAUI アプリ プロジェクト テンプレートを使用して作成し、AppShell クラス内のアプリのビジュアル階層を記述すれば作成できます。

シェル アプリを作成するステップ バイ ステップのチュートリアルについては、「.NET MAUI アプリを作成する」をご覧ください。

アプリのビジュアル階層を記述する

.NET MAUI シェル アプリのビジュアル階層は、サブクラス化された Shell クラスで記述され、プロジェクトテンプレートでは、AppShell という名前が付けられます。 サブクラス化された Shell クラスは、次の 3 つの主な階層オブジェクトで構成されています。

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

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

次の XAML では、サブクラス化された Shell クラスの例を示します。

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:views="clr-namespace:Xaminals.Views"
       x:Class="Xaminals.AppShell">
    ...
    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <Tab Title="Domestic"
             Icon="paw.png">
            <ShellContent Title="Cats"
                          Icon="cat.png"
                          ContentTemplate="{DataTemplate views:CatsPage}" />
            <ShellContent Title="Dogs"
                          Icon="dog.png"
                          ContentTemplate="{DataTemplate views:DogsPage}" />
        </Tab>
        <!--
        Shell has implicit conversion operators that enable the Shell visual hierarchy to be simplified.
        This is possible because a subclassed Shell object can only ever contain a FlyoutItem object or a TabBar object,
        which can only ever contain Tab objects, which can only ever contain ShellContent objects.

        The implicit conversion automatically wraps the ShellContent objects below in Tab objects.
        -->
        <ShellContent Title="Monkeys"
                      Icon="monkey.png"
                      ContentTemplate="{DataTemplate views:MonkeysPage}" />
        <ShellContent Title="Elephants"
                      Icon="elephant.png"
                      ContentTemplate="{DataTemplate views:ElephantsPage}" />
        <ShellContent Title="Bears"
                      Icon="bear.png"
                      ContentTemplate="{DataTemplate views:BearsPage}" />
    </FlyoutItem>
    ...
</Shell>

この XAML を実行すると、CatsPage が表示されます。サブクラス化された Shell クラスで宣言されたコンテンツの最初の項目であるためです。

ハンバーガー アイコンを押すか、左からスワイプして、ポップアップを表示します。

FlyoutDisplayOptions プロパティが AsMultipleItems に設定されているため、ポップアップに複数の項目が表示されます。 詳細については、「ポップアップの表示オプション」を参照してください。

重要

シェル アプリでは、ナビゲーションに応じてページがオンデマンドで作成されます。 これを実現するには、DataTemplate マークアップ拡張を使用して、各 ShellContent オブジェクトの ContentTemplate プロパティを ContentPage オブジェクトに設定します。