Pivot 控制項可讓使用者在一組內容區段之間進行觸控撥動。
這是正確的控制嗎？
警告
Windows 11 設計模式不建議使用 Pivot 控件。 我們強烈建議使用以下替代方案之一：
- WinUI - 使用 選擇欄 控制。
- UWP/UWP 的 WinUI - 使用 NavigationView 或 TabView 控制項，取代 Pivot 控制項。 如需範例，請參閱 使用 NavigationView 而非 Pivot 一節。
要在使用 WinUI 和 Windows App SDK 時建立類似 Pivot 的 UI 時，請使用 SelectorBar 控制項。
若要建立索引標籤式 UI，請使用 TabView 控件。
若要達到常見的頂端流覽模式，我們建議使用 NavigationView，其會自動適應不同的螢幕大小，並允許更大的自定義。
NavigationView 和 Pivot 之間的一些主要差異如下：
- Pivot 支援觸摸滑動來在項目之間切換。
- 在 Pivot 輪播中處理溢出項目時，NavigationView 則使用選單下拉溢出，讓使用者可以看到所有項目。
- Pivot 會處理內容區段之間的瀏覽，而 NavigationView 能讓您對瀏覽行為取得進一步的控制。
使用 NavigationView 而非 Pivot
如果您的 app UI 使用 Pivot 控制項，您可以遵循此範例，將 Pivot 轉換成 NavigationView 。
此 XAML 會建立具有 3 個內容區段的 NavigationView，例如 建立樞紐控件中的範例 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 控制項
警告
Windows 11 設計模式不建議使用 Pivot 控件。 我們強烈建議使用以下替代方案之一：
- WinUI - 使用 選擇欄 控制。
- UWP/UWP 的 WinUI - 使用 NavigationView 或 TabView 控制項，取代 Pivot 控制項。 如需範例，請參閱 使用 NavigationView 而非 Pivot 一節。
此 XAML 會建立具有 3 個內容區段的基本 Pivot 控制項。
<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 是 ItemsControl，因此它可以包含任何類型的項目集合。 您加入至 Pivot 的任何項目，如果不是明確定義為 PivotItem，則會隱含地包裝在 PivotItem 中。 因為樞紐通常用來在內容頁面之間巡覽，所以通常會使用 XAML UI 元素直接填入 Items 集合。 或者，您可以將 ItemsSource 屬性設定為數據源。 ItemsSource 中系結的專案可以是任何類型，但如果這些專案不是明確 PivotItems，您必須定義 ItemTemplate 和 HeaderTemplate ，以指定項目的顯示方式。
您可以使用 SelectedItem 屬性來取得或設定 Pivot 的使用中專案。 使用 SelectedIndex 屬性來取得或設定使用中專案的索引。
Pivot 標頭
您可以使用 LeftHeader 和 RightHeader 屬性，將其他控件新增至 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 標題無法容納於允許的空間時，Carousel 會旋轉。
- 點擊 Pivot 標籤會導覽至對應的頁面，且目前的 Pivot 標籤會移動到第一個位置。
- 在旋轉木馬循環中，將項目從最後一個轉換節點移動到第一個轉換節點。
小提示
- 使用輪播模式時避免使用超過 5 個標頭，因為循環超過 5 個標頭可能會變得混亂。
- 樞紐標頭不應該在 10 英尺的環境中浮動切換。 如果您的應用程式將在 Xbox 上執行，請將 IsHeaderItemsCarouselEnabled 屬性設定為
false。
UWP 與 WinUI 用於 UWP
這很重要
本文中的資訊和範例針對使用 Windows App SDK 和 WinUI 3 的應用程式進行了最佳化，但通常適用於使用 WinUI 2 的 UWP 應用程式。 如需平台特定資訊和範例，請參閱 UWP API 參考。
本節包含您在 UWP 或 WinUI 2 應用程式中使用控制項所需的資訊。
此控制項的 API 位在 Windows.UI.Xaml.Controls 命名空間中。
- UWP API：Pivot 類別
- 打開 WinUI for UWP Gallery 應用程式，看看 Pivot 的運作。 WinUI 2 圖庫應用程式包含了大部分 WinUI 2 控制項、特性和功能的互動式範例。 從 Microsoft Store 取得應用程式，或在 GitHub 上取得原始程式碼。
我們建議使用最新的 WinUI for UWP ，以獲得所有控制項的最新樣式與範本。
