Pivot and tabs
The Pivot control and related tabs pattern are used for navigating frequently accessed, distinct content categories. Pivots allow for navigation between two or more content panes and rely on text headers to label the different sections of content.
Important APIs: Pivot class
Tabs are a visual variant of Pivot that use a combination of icons and text or just icons to articulate section content. Tabs are built using the Pivot control. The Pivot sample shows how to customize the Pivot control into the tabs pattern.
The pivot control
When building an app with pivot, there are a few key design variables to consider.
- Header labels. Headers can have an icon with text, icon only, or text only.
- Header alignment. Headers can be left-justified or centered.
- Top-level or sub-level navigation. Pivots can be used for either level of navigation. Optionally, navigation view can serve as the primary level with pivot acting as secondary.
- Touch gesture support. For devices that support touch gestures, you can use one of two interaction sets to navigate between content categories:
- Tap on a tab/pivot header to navigate to that category.
- Swipe left or right on the content area to navigate to the adjacent category.
|XAML Controls Gallery|
If you have the XAML Controls Gallery app installed, click here to open the app and see the Pivot in action.
Pivot control on phone.
Tabs pattern in the Alarms & Clock app.
Create a pivot control
The Pivot control comes with the basic functionality described in this section.
This XAML creates a basic pivot control with 3 sections of content.
<Pivot x:Name="rootPivot" Title="Pivot Title"> <PivotItem Header="Pivot Item 1"> <!--Pivot content goes here--> <TextBlock Text="Content of pivot item 1."/> </PivotItem> <PivotItem Header="Pivot Item 2"> <!--Pivot content goes here--> <TextBlock Text="Content of pivot item 2."/> </PivotItem> <PivotItem Header="Pivot Item 3"> <!--Pivot content goes here--> <TextBlock Text="Content of pivot item 3."/> </PivotItem> </Pivot>
Pivot is an ItemsControl, so it can contain a collection of items of any type. Any item you add to the Pivot that is not explicitly a PivotItem is implicitly wrapped in a PivotItem. 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. Or, you can set the ItemsSource property to a data source. 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.
For example, you can add a CommandBar in the Pivot's RightHeader.
<Pivot> <Pivot.RightHeader> <CommandBar OverflowButtonVisibility="Collapsed" Background="Transparent"> <AppBarButton Icon="Add"/> <AppBarSeparator/> <AppBarButton Icon="Edit"/> <AppBarButton Icon="Delete"/> <AppBarSeparator/> <AppBarButton Icon="Save"/> </CommandBar> </Pivot.RightHeader> </Pivot>
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:
- 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.
- 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.
By default, keyboard focus on a pivot header is represented with an underline.
Apps that have customized Pivot and incorporate the underline into header selection visuals can use the HeaderFocusVisualPlacement property to change the default. When
HeaderFocusVisualPlacement="ItemHeaders", focus will be drawn around the entire header panel.
- Base the alignment of tab/pivot headers on screen size. For screen widths below 720 epx, center-aligning usually works better, while left-aligning for screen widths above 720 epx is recommended in most cases.
- Avoid using more than 5 headers when using carousel (round-trip) mode, as looping more than 5 can become confusing.
- Use the tabs pattern only if your pivot items have distinct icons.
- Include text in pivot item headers to help users understand the meaning of each pivot section. Icons are not necessarily self-explanatory to all users.
Get the sample code
- Pivot sample - Demonstrates how to customize the Pivot control into the tabs pattern.
- XAML Controls Gallery sample - See all the XAML controls in an interactive format.