PivotPivot

Pivot 控件可在一小组内容部分之间进行触控滑动。The Pivot control enables touch-swiping between a small set of content sections.

默认焦点为选择的标题添加下划线

获取 Windows UI 库Get the Windows UI Library

WinUI 徽标

Windows UI 库 2.2 或更高版本包含此控件的使用圆角的新模板。Windows UI Library 2.2 or later includes a new template for this control that uses rounded corners. 有关详细信息,请参阅圆角半径For more info, see Corner radius. WinUI 是一种 NuGet 包,其中包含用于 Windows 应用的新控件和 UI 功能。WinUI is a NuGet package that contains new controls and UI features for Windows apps. 有关详细信息(包括安装说明),请参阅 Windows UI 库For more info, including installation instructions, see Windows UI Library.

平台 APIPivot 类NavigationView 类Platform APIs: Pivot class, NavigationView class

示例Examples

XAML 控件库XAML Controls Gallery
XAML controls gallery

如果已安装 XAML 控件库应用,请单击此处打开此应用,了解 Pivot 控件的实际应用If you have the XAML Controls Gallery app installed, click here to open the app and see the Pivot control in action.

NavigationView 一样,Pivot 控件强调所选项。The Pivot control, just like NavigationView, underlines the selected item.

默认焦点为选择的标题添加下划线

这是正确的控件吗?Is this the right control?

要实现常见的顶部导航和标签模式,建议使用 NavigationView,它会自动适应不同的屏幕尺寸,并允许更高版本的自定义。To achieve common top navigation and tabs patterns, we recommend using NavigationView, which automatically adapts to different screen sizes and allows for greater customization.

但如果导航需要触控滑动,则最好使用 Pivot。However, if your navigation requires touch-swiping, we recommend using Pivot.

NavigationView 和 Pivot 控件之间的其他主要区别是默认溢出行为和导航 API:The other key differences between the NavigationView and Pivot controls are the default overflow behavior and the navigation API:

  • Pivot 轮转溢出项目,而 NavigationView 使用菜单下拉溢出,以便用户可以查看所有项目。Pivot carousels overflow items, while NavigationView uses a menu dropdown overflow so that users can see all items.
  • Pivot 处理内容部分之间的导航,而 NavigationView 支持对导航行为的更多控制。Pivot handles navigation between content sections, while NavigationView allows for more control over navigation behavior.

使用 NavigationView 而不是 PivotUse NavigationView instead of Pivot

如果应用的 UI 使用 Pivot 控件,则可使用以下代码将 Pivot 转换为 NavigationView。If your app's UI uses the Pivot control, then you can convert Pivot to NavigationView with the code below.

此 XAML 创建包含 3 个部分内容的 NavigationView,如创建 Pivot 控件中的示例 Pivot。This XAML creates a NavigationView with 3 sections of content, like the example Pivot in Create a pivot control.

<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>
</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 提供了对导航定制的更多控制,并且需要相应的代码隐藏。NavigationView provides more control over navigation customization and requires corresponding code-behind. 若要为上述 XAML 提供补充,请使用以下代码隐藏:To accompany the above XAML, use the following code-behind:

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

    navOptions.IsNavigationStackEnabled = False;

    switch (item.Name)
    {
        case "Section1Content":
            ContentFrame.NavigateToType(typeof(Section1Page), null, navOptions);
            break;

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

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

此代码模拟 Pivot 控件的内置导航体验,消除了内容部分之间的触控滑动体验。This code mimics the Pivot control's built-in navigation experience, minus the touch-swiping experience between content sections. 但是,正如你所看到的,还可自定义多个点,包括动态转换、导航参数和堆叠功能。However, as you can see, you could also customize several points, including the animated transition, navigation parameters, and stack capabilities.

创建透视表控件Create a pivot control

此代码使用 3 个部分的内容创建基本 Pivot 控件。This code creates a basic Pivot control with 3 sections of content.

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

透视表是一个 ItemsControl,因此可以包含任何类型的项目集合。Pivot is an ItemsControl, so it can contain a collection of items of any type. 你添加到透视表的任何非显式 PivotItem 的项目都隐式包装在 PivotItem 中。Any item you add to the Pivot that is not explicitly a PivotItem is implicitly wrapped in a PivotItem. 由于透视表经常用于在内容页面之间导航,因此通常使用 XAML UI 元素直接填充 Items 集合。Because a Pivot is often used to navigate between pages of content, it's common to populate the Items collection directly with XAML UI elements. 或者,你可以将 ItemsSource 属性设置为数据源。Or, you can set the ItemsSource property to a data source. ItemsSource 中绑定的项目可以属于任何类型,但如果它们不是显式 PivotItems,则必须定义 ItemTemplateHeaderTemplate 来指定这些项目的显示方式。Items bound in the ItemsSource can be of any type, but if they aren't explicitly PivotItems, you must define an ItemTemplate and HeaderTemplate to specify how the items are displayed.

你可以使用 SelectedItem 属性获取或设置透视表的活动项目。You can use the SelectedItem property to get or set the Pivot's active item. 使用 SelectedIndex 属性获取或设置活动项目的索引。Use the SelectedIndex property to get or set the index of the active item.

透视表标题Pivot headers

你可以使用 LeftHeaderRightHeader 属性将其他控件添加到透视表标题。You can use the LeftHeader and RightHeader properties to add other controls to the Pivot header.

例如,可在透视表的 RightHeader 中添加 CommandBarFor example, you can add a CommandBar in the Pivot's RightHeader.

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

透视表交互Pivot interaction

该控件的特色之处在于以下触摸手势交互:The control features these touch gesture interactions:

  • 通过点击透视表项目标题,可导航到该标题的部分内容。Tapping on a pivot item header navigates to that header's section content.
  • 通过在透视表项目标题上向左或向右轻扫,可导航到相邻部分。Swiping left or right on a pivot item header navigates to the adjacent section.
  • 通过在部分内容上向左或向右轻扫,可导航到相邻部分。Swiping left or right on section content navigates to the adjacent section.

该控件有以下两种模式:The control comes in two modes:

固定不动Stationary

  • 当所有透视表标题都适合所允许的空间时,透视表将固定不动。Pivots are stationary when all pivot headers fit within the allowed space.
  • 点击某个透视表标签即可导航到相应的页面,即使透视表无法自行移动也是如此。Tapping on a pivot label navigates to the corresponding page, though the pivot itself will not move. 活动透视表将突出显示。The active pivot is highlighted.

旋转Carousel

  • 当所有透视表标题不适合所允许的空间时,可旋转透视表。Pivots carousel when all pivot headers don't fit within the allowed space.
  • 点击某个透视表标签即可导航到相应的页面,并且活动透视表标签将旋转至第一个位置。Tapping a pivot label navigates to the corresponding page, and the active pivot label will carousel into the first position.
  • 从最后一个到第一个透视表部分的旋转循环中的透视表项目。Pivot items in a carousel loop from last to first pivot section.

注意 透视表标题不应在 10 英尺环境中旋转。Note Pivot headers should not carousel in a 10ft environment. 如果你的应用将在 Xbox 上运行,请将 IsHeaderItemsCarouselEnabled 属性设置为“false” 。Set the IsHeaderItemsCarouselEnabled property to false if your app will run on Xbox.

建议Recommendations

  • 当使用旋转(来回旋转)模式时,避免使用 5 个以上的标题,因为超过 5 个标题的循环可能会令人困惑。Avoid using more than 5 headers when using carousel (round-trip) mode, as looping more than 5 can become confusing.

获取示例代码Get the sample code