Xamarin.Forms 殼層索引標籤

  • 發行項

Shell 提供的 Xamarin.Forms 瀏覽體驗是以飛出視窗和索引標籤為基礎。 Shell 應用程式中的最上層導覽是飛出視窗或底部索引標籤列，具體取決於應用程式的導覽要求。 當應用程式的導覽體驗從底部索引卷標開始時，子類別化 Shell 物件的子系應該是 TabBar 代表底部索引卷標列的物件。

TabBar物件可以包含一或多個 Tab 物件，每個Tab物件都代表底部索引標籤上的索引標籤。 每個 Tab 物件都可以包含一或多個 ShellContent 物件，每個 ShellContent 物件都會顯示單 ContentPage一 。 當多個 ShellContent 物件出現在 Tab 物件中時，ContentPage 物件將可透過頂端索引標籤導覽。 在索引標籤，可以瀏覽至稱為詳細數據頁面的其他 ContentPage 物件。

重要

TabBar 型別會停用飛出視窗。

單一頁面

單一頁面殼層應用程式可以藉由將 Tab 物件新增至 TabBar 物件來建立。 在 Tab 物件中，ShellContent 物件應該設定為 ContentPage 物件：

<Shell xmlns="http://xamarin.com/schemas/2014/forms"
       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>

此程式碼範例會產生下列單一頁面應用程式：

iOS 和 Android 上 Shell 單頁應用程式的螢幕快照

Shell 具有隱含的轉換運算子，可簡化 Shell 視覺階層，而不需要將其他檢視引進視覺化樹狀結構。 有此可能性，因為子類別 Shell 物件只能包含 FlyoutItem 物件或 TabBar 物件，而其只能包含 Tab 物件，而其只能包含 ShellContent 物件。 這些隱含轉換運算子可用來從上一個範例中移除 Tab 物件：

<Shell xmlns="http://xamarin.com/schemas/2014/forms"
       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://xamarin.com/schemas/2014/forms"
       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屬性會定義索引標籤圖示：

iOS 和 Android 上具有底部索引標籤的 Shell 兩頁應用程式的螢幕快照

當 上的索引標籤超過五個TabBar時，會出現 [更多] 索引卷標，可用來存取其他索引標籤：

iOS 和 Android 上具有 [更多] 索引標籤的 Shell 應用程式的螢幕快照

此外，Shell 的隱含轉換運算子可用來從上一個範例中移除 ShellContent 和 Tab 物件：

<Shell xmlns="http://xamarin.com/schemas/2014/forms"
       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://xamarin.com/schemas/2014/forms"
       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>

這會導致下列螢幕擷取畫面中顯示的版面配置：

iOS 和 Android 上具有頂端和底部索引標籤的 Shell 兩頁應用程式的螢幕快照

此外，Shell 的隱含轉換運算子可用來從上一個範例中移除第二個 Tab 物件：

<Shell xmlns="http://xamarin.com/schemas/2014/forms"
       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 類別會定義可控制索引標籤外觀的下列附加屬性：

  • 型別為 Color 的 TabBarBackgroundColor，用於定義索引標籤列的背景色彩。 如果未設定屬性，則會使用 BackgroundColor 屬性值。
  • 型別為 Color 的 TabBarDisabledColor，用於定義索引標籤列的停用色彩。 如果未設定屬性，則會使用 DisabledColor 屬性值。
  • 型別為 Color 的 TabBarForegroundColor，用於定義索引標籤列的前景色彩。 如果未設定屬性，則會使用 ForegroundColor 屬性值。
  • 型別為 Color 的 TabBarTitleColor，用於定義索引標籤列的標題色彩。 如果未設定屬性，將會使用 TitleColor 屬性值。
  • 型別為 Color 的 TabBarUnselectedColor，用於定義索引標籤列未選取的色彩。 如果未設定屬性，則會使用 UnselectedColor 屬性值。

所有這些屬性都以 BindableProperty 物件為後盾，也就是說，這些屬性可以是資料繫結的目標，並且可以設定樣式。

下列範例顯示設定不同索引標籤色彩屬性的 XAML 樣式：

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

此外，您也可以使用階層式樣式表 (CSS) 設定索引標籤的樣式。 如需詳細資訊，請參閱 Xamarin.Forms 殼層特定屬性。

索引標籤選取

第一次執行使用 Tab 列的 Shell 應用程式時，Shell.CurrentItem屬性會設定為子類別Shell化物件中的第一個Tab物件。 不過，您可以將屬性設定為另一個 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 可見性

Tab 列和索引標籤預設會顯示在Shell應用程式中。 不過，將附加屬性設定 Shell.TabBarIsVisible 為 false，即可隱藏索引標籤。

雖然這個屬性可以在子類別 Shell 化對象上設定，但通常會在想要使索引卷標列看不見的任何 ShellContent 或 ContentPage 對象上設定：

<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>

在此範例中，選取上方 的 [狗] 索引 標籤時，會隱藏索引卷標列。

此外， 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>

在此範例中，第二個索引標籤會隱藏。