共用方式為

.NET MAUI Shell 標籤

瀏覽範例。 瀏覽範例

.NET 多平台應用程式介面（.NET MAUI）Shell 提供的導覽體驗基於側邊選單和分頁。 Shell 應用程式的最高導覽層級取決於應用程式的導航需求，可能是快顯選單或底部分頁列。 當應用程式的導航體驗以底部分頁開始時，子 Shell 類別物件的子節點應該是 TabBar 物件，代表底部的分頁列。

一個 TabBar 物件可以包含一個或多個 Tab 物件，每個 Tab 物件代表底部分頁列上的一個分頁。 每個 Tab 物件可以包含一個或多個 ShellContent 物件，每個 ShellContent 物件顯示一個 ContentPage。 當物件ShellContent中存在多個Tab物件時，ContentPage這些物件可由頂方分頁瀏覽。 在分頁中，你可以瀏覽其他 ContentPage 稱為詳細頁面的物件。

這很重要

該 TabBar 類型會停用突顯視窗。

小提示

可以透過在 FlyoutItem 或 Tab 物件中加入多個 ShellContent 物件，來顯示具有彈出視窗的分頁。 欲了解更多資訊，請參閱 .NET MAUI Shell 側邊欄。

單頁

單頁 Shell 應用程式可以透過將 Tab 物件加入到 TabBar 物件來建立。 在Tab物件中，應將ShellContent物件設定為ContentPage物件。

<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">
    <TabBar>
       <Tab>
           <ShellContent ContentTemplate="{DataTemplate views:CatsPage}" />
       </Tab>
    </TabBar>
</Shell>

此範例會產生以下單頁應用程式：

Shell 單頁應用程式的截圖。

Shell 具備隱式轉換運算子，使得 Shell 的視覺階層結構得以簡化，而無需在視覺樹中引入更多視圖。 這種簡化之所以可能，是因為子Shell物件只能包含FlyoutItem物件，而FlyoutItem物件只能包含TabBar物件，而TabBar物件只能包含Tab物件，而Tab物件只能包含ShellContent物件。 這些隱式轉換運算子可用來移除 Tab 前述範例中的物件：

<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">
    <Tab>
        <ShellContent ContentTemplate="{DataTemplate views:CatsPage}" />
    </Tab>
</Shell>

這種隱含轉換會自動將 ShellContent 物件包裹在物件 Tab 中，而物件又被包裹在物件 TabBar 中。

這很重要

在 Shell 應用程式中，頁面會根據導航需求即時建立。 這是透過使用 DataTemplate 標記延伸來將每個 ShellContent 物件的 ContentTemplate 屬性設定為 ContentPage 物件來達成的。

底部標籤

如果同一Tab物件中有多個TabBar物件，Tab物件會以底部標籤形式呈現：

<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">
    <TabBar>
       <Tab Title="Cats"
            Icon="cat.png">
           <ShellContent ContentTemplate="{DataTemplate views:CatsPage}" />
       </Tab>
       <Tab Title="Dogs"
            Icon="dog.png">
           <ShellContent ContentTemplate="{DataTemplate views:DogsPage}" />
       </Tab>
    </TabBar>
</Shell>

Title屬性，其型別為string，用於定義分頁標題。 Icon 屬性為 ImageSource 類型，定義了頁籤圖示：

Shell 兩頁應用程式的截圖，其中底部設有分頁。

當 上 TabBar有超過五個分頁時，會出現一個 「更多」 分頁，可用來存取其他分頁：

一個帶有「更多」分頁的 Shell 應用程式截圖。

此外，Shell 的隱式轉換運算子可用來移除 ShellContent 前述範例中的 和 Tab 物件：

<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">
    <TabBar>
       <ShellContent Title="Cats"
                     Icon="cat.png"
                     ContentTemplate="{DataTemplate views:CatsPage}" />
       <ShellContent Title="Dogs"
                     Icon="dog.png"
                     ContentTemplate="{DataTemplate views:DogsPage}" />
    </TabBar>
</Shell>

這種隱含轉換會自動將每個 ShellContent 物件包裹在一個 Tab 物件中。

這很重要

在 Shell 應用程式中，頁面會根據導航需求即時建立。 這是即是使用 DataTemplate 標記擴展設定每個 ShellContent 物件的 ContentTemplate 屬性為 ContentPage 物件來實現的。

底部標籤和頂部標籤

當多個ShellContent物件存在於一個Tab物件中時，會在底部標籤上新增一個頂部分頁列，透過此ContentPage物件可以進行導航：

<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">
    <TabBar>
       <Tab Title="Domestic"
            Icon="paw.png">
           <ShellContent Title="Cats"
                         ContentTemplate="{DataTemplate views:CatsPage}" />
           <ShellContent Title="Dogs"
                         ContentTemplate="{DataTemplate views:DogsPage}" />
       </Tab>
       <Tab Title="Monkeys"
            Icon="monkey.png">
           <ShellContent ContentTemplate="{DataTemplate views:MonkeysPage}" />
       </Tab>
    </TabBar>
</Shell>

此程式碼產生以下截圖所示的版面配置：

Shell 兩頁應用程式的截圖，有上下分頁。

此外，Shell 的隱式轉換運算子可用來移除前述範例中的第二個 Tab 物件：

<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">
    <TabBar>
       <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>
       <ShellContent Title="Monkeys"
                     Icon="monkey.png"
                     ContentTemplate="{DataTemplate views:MonkeysPage}" />
    </TabBar>
</Shell>

這種隱含轉換會自動將第三 ShellContent 個物件包裹在物件 Tab 中。

標籤外觀

該 Shell 類別定義了以下附加屬性，用以控制標籤的外觀：

  • TabBarBackgroundColor，屬於Color類型，定義分頁列的背景色。 若屬性未設定，則 BackgroundColor 使用屬性價值。
  • TabBarDisabledColor，Color 類型的元素，用來定義分頁列的停用顏色。 若屬性未設定，則 DisabledColor 使用屬性價值。
  • TabBarForegroundColor，其型別為 Color，定義分頁列的前景顏色。 若屬性未設定，則 ForegroundColor 使用屬性價值。
  • TabBarTitleColor，其型別為 Color，定義了分頁列的標題顏色。 若屬性未設定，則 TitleColor 使用屬性價值。
  • ，型別為 ，定義了用於分頁列的未選取顏色。 若屬性未設定，則 UnselectedColor 使用屬性價值。

所有這些屬性都由 BindableProperty 物件支撐，這表示這些屬性可以作為資料綁定的目標，並且可以做樣式。

對標籤顏色影響最大的三個屬性是 TabBarForegroundColor、 、 TabBarTitleColor和 TabBarUnselectedColor：

  • 如果只設定了屬性 TabBarTitleColor，則其值將用於為所選標籤頁的標題和圖示上色。如果 TabBarTitleColor 沒有設定，則標題的顏色將匹配 TabBarForegroundColor 屬性的值。
  • 如果 TabBarForegroundColor 屬性已設定且 TabBarUnselectedColor 未設定，屬性的值 TabBarForegroundColor 將用來為所選分頁的標題和圖示著色。
  • 如果只設定了屬性 TabBarUnselectedColor ，則其值會用來為未選取分頁的標題和圖示上色。

例如：

  • 當 TabBarTitleColor 屬性設定為 時 Green ，所選分頁的標題和圖示為綠色，未選中的分頁則與系統顏色相符。
  • 當 TabBarForegroundColor 屬性設定為 Blue 時，所選分頁的標題和圖示會變成藍色，未選擇的分頁則與系統顏色相符。
  • 當TabBarTitleColor屬性設定為Green且TabBarForegroundColor屬性設定為Blue時，選擇的分頁標題為綠色，圖示為藍色，未選分頁則與系統顏色相符。
  • 當屬性TabBarTitleColor設定為Green且Shell.ForegroundColor屬性設定為Blue時，已選分頁的標題為綠色，圖示為藍色，未選分頁則符合系統顏色。 這是因為 Shell.ForegroundColor 房產價值會傳遞到該 TabBarForegroundColor 房產上。
  • 當屬性 TabBarTitleColor 設為 Green 時，TabBarForegroundColor 屬性設為 Blue，屬性 TabBarUnselectedColor 設為 Red，選取的分頁標題為綠色，圖示為藍色，未選取的分頁標題與圖示為紅色。

以下範例展示了一種 XAML 風格，該樣式設定不同的分頁列顏色屬性：

<Style TargetType="TabBar">
    <Setter Property="Shell.TabBarBackgroundColor"
            Value="CornflowerBlue" />
    <Setter Property="Shell.TabBarTitleColor"
            Value="Black" />
    <Setter Property="Shell.TabBarUnselectedColor"
            Value="AntiqueWhite" />
</Style>

此外，分頁表也可以使用層疊樣式表（CSS）來樣式化。 如需詳細資訊，請參閱 .NET MAUI Shell 特定屬性。

索引標籤選取

當使用 Tab bar 的 Shell 應用程式首次執行時，屬性Shell.CurrentItem會設定為子類別Tab物件中的第一個Shell物件。 然而，該屬性可以設定為另一個 Tab，如下範例所示：

<Shell ...
       CurrentItem="{x:Reference dogsItem}">
    <TabBar>
        <ShellContent Title="Cats"
                      Icon="cat.png"
                      ContentTemplate="{DataTemplate views:CatsPage}" />
        <ShellContent x:Name="dogsItem"
                      Title="Dogs"
                      Icon="dog.png"
                      ContentTemplate="{DataTemplate views:DogsPage}" />
    </TabBar>
</Shell>

此範例將屬性 CurrentItem 設定為 ShellContent 名為 dogsItem的物件，結果該物件會被選取並顯示。 在此範例中，隱式轉換用於將每個 ShellContent 物件包裹在 Tab 物件中。

給定名為 dogsItem 的 ShellContent 物件，其等價的 C# 程式碼為：

CurrentItem = dogsItem;

在此範例中，屬性 CurrentItem 設定在子 Shell 類類別中。 或者，CurrentItem 可以透過 Shell.Current 靜態屬性設定於任意類別。

Shell.Current.CurrentItem = dogsItem;

TabBar 與 Tab 可視性

Shell 應用程式預設顯示分頁列和分頁。 不過，可以透過將附加屬性Shell.TabBarIsVisible設為false來隱藏分頁列。

雖然這個屬性可以設定在子Shell類別物件上，但通常會設定在ShellContentContentPage任何想要讓分頁列隱形的物件上：

<TabBar>
   <Tab Title="Domestic"
        Icon="paw.png">
       <ShellContent Title="Cats"
                     ContentTemplate="{DataTemplate views:CatsPage}" />
       <ShellContent Shell.TabBarIsVisible="false"
                     Title="Dogs"
                     ContentTemplate="{DataTemplate views:DogsPage}" />
   </Tab>
   <Tab Title="Monkeys"
        Icon="monkey.png">
       <ShellContent ContentTemplate="{DataTemplate views:MonkeysPage}" />
   </Tab>
</TabBar>

在這個例子中，當選擇上方 的 Dogs 標籤時，分頁列會被隱藏。

此外，Tab物件可透過設置IsVisible可綁定屬性為false隱藏：

<TabBar>
    <ShellContent Title="Cats"
                  Icon="cat.png"
                  ContentTemplate="{DataTemplate views:CatsPage}" />
    <ShellContent Title="Dogs"
                  Icon="dog.png"
                  ContentTemplate="{DataTemplate views:DogsPage}"
                  IsVisible="False" />
    <ShellContent Title="Monkeys"
                  Icon="monkey.png"
                  ContentTemplate="{DataTemplate views:MonkeysPage}" />
</TabBar>

在這個例子中，第二個分頁是隱藏的。

  • Last updated on