.NET MAUI Shell アプリを作成する

サンプルを参照する

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

シェル アプリを作成する方法の詳細なチュートリアルについては、「 .NET MAUI アプリの作成」を参照してください。

アプリのビジュアル階層について説明する

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

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

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

次の 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 を実行すると、サブクラス化されたShell クラスで宣言されたコンテンツの最初の項目であるため、CatsPageが表示されます。

ハンバーガー アイコンを押すか、左からスワイプすると、ポップアップが表示されます。

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