Pivot

Pivot \(英文\) 控制項可讓使用者在一小組內容區段之間進行觸控撥動。

這是正確的控制項嗎？

警告

不建議將 Pivot 控制項用於 Windows 11 設計模式。 我們強烈建議使用以下替代方案之一：

• WinUI 3 - 使用 SelectorBar 控制項。
• WinUI 2/UWP - 使用 NavigationView 或 TabView 控制項而非 Pivot 控制項。 如需範例， 請參閱使用 NavigationView 而非 Pivot 一節。

若要在使用 WinUI 3 和 Windows App SDK 時建立類似資料透視的 UI，請使用 SelectorBar 控制項。

若要建立索引標籤式 UI，請使用 TabView 控制項。

為了實現常見的頂部導航模式，我們建議使用 NavigationView，它會自動適應不同的螢幕尺寸並允許更大的自訂。

NavigationView 和 Pivot 之間的一些主要差異如下：

• Pivot 支援觸摸滑動來在項目之間切換。
• Pivot 輪播中的溢出項目，而 NavigationView 使用選單下拉溢出，以便使用者可以看到所有項目。
• Pivot 會處理內容區段之間的瀏覽，而 NavigationView 能讓您對瀏覽行為取得進一步的控制。

UWP 和 WinUI 2

重要

本文中的資訊和範例針對使用 Windows App SDK 和 WinUI 3 的應用程式進行了最佳化，但通常適用於使用 WinUI 2 的 UWP 應用程式。 如需平台特定資訊和範例，請參閱 UWP API 參考。

本節包含您在 UWP 或 WinUI 2 應用程式中使用控制項所需的資訊。

此控制項的 API 位在 Windows.UI.Xaml.Controls 命名空間中。

• UWP API：Pivot 類別
• 開啟 WinUI 2 資源庫應用程式，並查看 Pivot 運作情形。 WinUI 2 程式庫應用程式包含大部分 WinUI 2 控制項、特性和功能的互動式範例。 從 Microsoft Store 取得應用程式，或在 Github 上取得原始程式碼。

建議使用最新的 WinUI 2 來取得所有控制項的最新樣式和範本。

使用 NavigationView 而非 Pivot

如果您的應用程式的 UI 使用 Pivot 控件，您可以按照此範例將 Pivot 轉換為 NavigationView。

此 XAML 會建立具有 3 個內容區段的 NavigationView，如同建立 Pivot 控制項中所提供的範例 Pivot。

<NavigationView x:Name="rootNavigationView" Header="Category Title"
 ItemInvoked="NavView_ItemInvoked">
    <NavigationView.MenuItems>
        <NavigationViewItem Content="Section 1" x:Name="Section1Content" />
        <NavigationViewItem Content="Section 2" x:Name="Section2Content" />
        <NavigationViewItem Content="Section 3" x:Name="Section3Content" />
    </NavigationView.MenuItems>
    
    <Frame x:Name="ContentFrame" />
</NavigationView>

<Page x:Class="AppName.Section1Page">
    <TextBlock Text="Content of section 1."/>
</Page>

<Page x:Class="AppName.Section2Page">
    <TextBlock Text="Content of section 2."/>
</Page>

<Page x:Class="AppName.Section3Page">
    <TextBlock Text="Content of section 3."/>
</Page>

NavigationView 能針對瀏覽自訂提供更大幅度的控制，並需要相對應的程式碼後置。 若要搭配上述 XAML，請使用下列程式碼後置：

private void NavView_ItemInvoked(NavigationView sender, NavigationViewItemInvokedEventArgs args)
{
   var navOptions = new FrameNavigationOptions
   {
      TransitionInfoOverride = args.RecommendedNavigationTransitionInfo,
      IsNavigationStackEnabled = false,
   };

   switch (args.InvokedItemContainer.Name)
   {
      case nameof(Section1Content):
         ContentFrame.NavigateToType(typeof(Section1Page), null, navOptions);
         break;

      case nameof(Section2Content):
         ContentFrame.NavigateToType(typeof(Section2Page), null, navOptions);
         break;

      case nameof(Section3Content):
         ContentFrame.NavigateToType(typeof(Section3Page), null, navOptions);
         break;
   }  
}

此程式碼能模擬 Pivot 控制項的內建瀏覽體驗，但無法提供內容區段之間的觸控撥動體驗。 不過正如您所見，您也可以自訂數個點，包括動畫轉換、瀏覽參數，以及堆疊功能。

建立 Pivot 控制項

警告

不建議將 Pivot 控制項用於 Windows 11 設計模式。 我們強烈建議使用以下替代方案之一：

• WinUI 3 - 使用 SelectorBar 控制項。
• WinUI 2/UWP - 使用 NavigationView 或 TabView 控制項而非 Pivot 控制項。 如需範例， 請參閱使用 NavigationView 而非 Pivot 一節。

此程式碼會建立具有 3 個內容區段的基本 XAML 控制項。

<Pivot x:Name="rootPivot" Title="Category Title">
    <PivotItem Header="Section 1">
        <!--Pivot content goes here-->
        <TextBlock Text="Content of section 1."/>
    </PivotItem>
    <PivotItem Header="Section 2">
        <!--Pivot content goes here-->
        <TextBlock Text="Content of section 2."/>
    </PivotItem>
    <PivotItem Header="Section 3">
        <!--Pivot content goes here-->
        <TextBlock Text="Content of section 3."/>
    </PivotItem>
</Pivot>

Pivot 項目

Pivot 是 ItemsControl，因此它可以包含任何類型的項目集合。 您加入至 Pivot 的任何專案，不是明確 表示 PivotItem 的項目都會隱含地包裝在 PivotItem 中。 因為 Pivot 通常用來在內容頁面之間巡覽，所以通常會使用 XAML UI 元素直接填入 Items 集合。 或者，您可以將 ItemsSource 屬性設定為資料來源。 ItemsSource 中綁定的項目可以是任何類型，但如果它們不是明確的 PivotItems，則必須定義 ItemTemplate 和 HeaderTemplate 來指定項目的顯示方式。

您可以使用 SelectedItem 屬性來取得或設定 Pivot 的使用中專案。 使用 SelectedIndex 屬性來取得或設定使用中專案的索引。

Pivot 標頭

您可以使用 LeftHeader 和 RightHeader 屬性，將其他控制項新增至 Pivot 標頭。

例如，您可以在 Pivot 的 RightHeader 中加入 CommandBar。

<Pivot>
    <Pivot.RightHeader>
        <CommandBar>
                <AppBarButton Icon="Add"/>
                <AppBarSeparator/>
                <AppBarButton Icon="Edit"/>
                <AppBarButton Icon="Delete"/>
                <AppBarSeparator/>
                <AppBarButton Icon="Save"/>
        </CommandBar>
    </Pivot.RightHeader>
</Pivot>

Pivot 互動

此控制項具有以下觸控手勢互動功能：

• 點擊 Pivot 項目標題可導覽至該標題的部分內容。
• 在 Pivot 項目標題上向左或向右滑動可導航至相鄰部分。
• 在部分內容上向左或向右滑動可導覽至相鄰部分。

此控制有兩種模式：

靜止

• 當所有 Pivot 標頭都安裝在允許的空間內時，Pivot 是靜止的。
• 點選 Pivot 標籤可導覽至對應的頁面，但 Pivot 本身不會移動。 活動 Pivot 突出顯示。

浮動切換

• 當所有 Pivot 標題不適合允許的空間時，Pivot 轉盤。
• 點擊 Pivot 標籤可導覽至對應的頁面，活動 Pivot 標籤將輪播到第一個位置。
• 將輪播循環中的項目從最後一個 Pivot 部分旋轉到第一個 Pivot 部分。

提示

• 使用輪播模式時避免使用超過 5 個標頭，因為循環超過 5 個標頭可能會變得混亂。
• Pivot 標頭不應在 10 英呎環境中進行浮動切換。 如果您的應用程式會在 Xbox 上執行，請將 IsHeaderItemsCarouselEnabled 屬性設為 false。

相關主題

• Pivot 類別 \(英文\)
• SelectorBar
• NavigationView
• TabView
• 瀏覽設計基本知識