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
。