建立 .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物件都是物件或 TabBar 物件的子FlyoutItem系。
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。 如需詳細資訊，請參閱 飛出視窗顯示選項。

重要

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