建立 .NET MAUI Shell 應用程式

瀏覽範例

您可以使用 .NET MAUI 應用程式 專案範本來建立 .NET 多平臺應用程式 UI （.NET MAUI） Shell 應用程式，然後在 類別中 AppShell 描述應用程式的視覺階層。

如需如何建立Shell應用程式的逐步解說，請參閱 建立 .NET MAUI 應用程式。

描述應用程式的視覺階層

.NET MAUI Shell 應用程式的視覺階層描述於子類別 Shell 中，專案範本會命名 AppShell為 。 子類別 Shell 包含三個主要階層式物件：

1. FlyoutItem 或 TabBar。 FlyoutItem 代表飛出視窗中的一或多個項目，而且應該在應用程式的瀏覽模式需要飛出視窗時使用。 TabBar 代表底部的索引標籤列，而且應該在應用程式的瀏覽模式從底部索引標籤開始，並且不需要飛出視窗時使用。 每個 FlyoutItem 物件或 TabBar 物件都是物件的子 Shell 系。
2. Tab 代表分組內容，可透過底部索引標籤導覽。 每個Tab物件都是FlyoutItem物件或TabBar物件的子物件。
3. ShellContent，ContentPage 物件表示每個索引標籤。每個 ShellContent 物件都是 Tab 物件的子項。 當Tab中存在多個ShellContent物件時，這些物件可以透過頂端的索引標籤進行導覽。

這些物件並不代表任何使用者介面，而是應用程式視覺階層的組織。 Shell 會採用這些物件，併產生內容的導覽使用者介面。

下列 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 類別中宣告的內容的第一項：

按下漢堡圖示或從左側撥動，會顯示飛出視窗：

飛出視窗上會顯示多個項目，因屬性設為 AsMultipleItems 的緣故。 如需詳細資訊，請參閱 飛出視窗顯示選項。

這很重要

在 Shell 應用程式中，頁面會視需要建立，以響應流覽。 這可藉由使用DataTemplate標記延伸將每個ShellContent物件的 屬性設定ContentTemplate為 ContentPage 物件來完成。