Pivot Pivot Pivot Pivot Class
Definition
Represents a control that provides quick navigation of views within an app.
public : class Pivot : ItemsControl, IPivot, IPivot2, IPivot3public class Pivot : ItemsControl, IPivot, IPivot2, IPivot3Public Class Pivot Inherits ItemsControl Implements IPivot, IPivot2, IPivot3// This API is not available in Javascript.
<Pivot .../>
-or-
<Pivot ...>
oneOrMorePivotItems
</Pivot>
- Inheritance
- Attributes
| Device family |
Windows 10 (introduced v10.0.10240.0)
|
| API contract |
Windows.Foundation.UniversalApiContract (introduced v1)
|
Inherited Members
Inherited properties
Inherited events
Inherited methods
Examples
For more examples, see the Pivot sample.
This example shows a Pivot with 3 items. It also has a RightHeader with forward and back buttons that use SelectedIndex to let a user navigate through the items.
<Pivot x:Name="rootPivot" Title="PIVOT TITLE">
<Pivot.RightHeader>
<CommandBar ClosedDisplayMode="Compact">
<AppBarButton Icon="Back" Label="Previous" Click="BackButton_Click"/>
<AppBarButton Icon="Forward" Label="Next" Click="NextButton_Click"/>
</CommandBar>
</Pivot.RightHeader>
<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>
private void BackButton_Click(object sender, RoutedEventArgs e)
{
if (rootPivot.SelectedIndex > 0)
{
// If not at the first item, go back to the previous one.
rootPivot.SelectedIndex -= 1;
}
else
{
// The first PivotItem is selected, so loop around to the last item.
rootPivot.SelectedIndex = rootPivot.Items.Count-1;
}
}
private void NextButton_Click(object sender, RoutedEventArgs e)
{
if (rootPivot.SelectedIndex < rootPivot.Items.Count-1)
{
// If not at the last item, go to the next one.
rootPivot.SelectedIndex += 1;
}
else
{
// The last PivotItem is selected, so loop around to the first item.
rootPivot.SelectedIndex = 0;
}
}
Remarks
For more info, see Pivots and tabs.
Use a Pivot to present groups of content that a user can swipe through. You typically use a Pivot as the top level control on a page.
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 PivotItem s, you must define an ItemTemplate and HeaderTemplate to specify how the items are displayed.
You can use the SelectedItem property to get or set the Pivot 's active item. Use the SelectedIndex property to get or set the index of the active item.
You can use the LeftHeader and RightHeader properties to add other controls to the Pivot header.
Control style and template
You can modify the default Style and ControlTemplate to give the control a unique appearance. For information about modifying a control's style and template, see Styling controls. The default style, template, and resources that define the look of the control are included in the generic.xaml file. For design purposes, generic.xaml is available in the (Program Files)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP<SDK version>\Generic folder from a Windows Software Development Kit (SDK) installation. Styles and resources from different versions of the SDK might have different values.
Starting in Windows 10, version 1607 (Windows Software Development Kit (SDK) version 10.0.14393.0), generic.xaml includes resources that you can use to modify the colors of a control in different visual states without modifying the control template. In apps that target this software development kit (SDK) or later, modifying these resources is preferred to setting properties such as Background and Foreground. For more info, see the Light-weight styling section of the Styling controls article.
This table shows the resources used by the Pivot control.
| Resource key | Description |
|---|---|
| PivotBackground | Control background color |
| PivotHeaderBackground | Header background color |
| PivotNextButtonForeground | Button icon color at rest |
| PivotNextButtonForegroundPointerOver | Button icon color on hover |
| PivotNextButtonForegroundPressed | Button icon color when pressed |
| PivotNextButtonBackground | Button background color at rest |
| PivotNextButtonBackgroundPointerOver | Button background color on hover |
| PivotNextButtonBackgroundPressed | Button background color when pressed |
| PivotNextButtonBorderBrush | Button border color at rest |
| PivotNextButtonBorderBrushPointerOver | Button border color on hover |
| PivotNextButtonBorderBrushPressed | Button border color when pressed |
| PivotPreviousButtonForeground | Button icon color at rest |
| PivotPreviousButtonForegroundPointerOver | Button icon color on hover |
| PivotPreviousButtonForegroundPressed | Button icon color when pressed |
| PivotPreviousButtonBackground | Button background color at rest |
| PivotPreviousButtonBackgroundPointerOver | Button background color on hover |
| PivotPreviousButtonBackgroundPressed | Button background color when pressed |
| PivotPreviousButtonBorderBrush | Button border color at rest |
| PivotPreviousButtonBorderBrushPointerOver | Button border color on hover |
| PivotPreviousButtonBorderBrushPressed | Button border color when pressed |
Constructors
Properties
HeaderFocusVisualPlacement HeaderFocusVisualPlacement HeaderFocusVisualPlacement HeaderFocusVisualPlacement
Gets or sets a value that specifies the style of focus visual used for pivot header items.
public : PivotHeaderFocusVisualPlacement HeaderFocusVisualPlacement { get; set; }public PivotHeaderFocusVisualPlacement HeaderFocusVisualPlacement { get; set; }Public ReadWrite Property HeaderFocusVisualPlacement As PivotHeaderFocusVisualPlacement// This API is not available in Javascript.
<Pivot HeaderFocusVisualPlacement="pivotHeaderFocusVisualPlacementMemberName" />
- Value
- PivotHeaderFocusVisualPlacement PivotHeaderFocusVisualPlacement PivotHeaderFocusVisualPlacement PivotHeaderFocusVisualPlacement
A value of the enumeration that specifies the style of focus visual used for pivot header items. The default is SelectedItemHeader.
| Device family |
Windows 10 Anniversary Edition (introduced v10.0.14393.0)
|
| API contract |
Windows.Foundation.UniversalApiContract (introduced v3)
|
Remarks
Use this property to specify how the focus visual is drawn around the Pivot header.
Version compatibility
The HeaderFocusVisualPlacement property is not available prior to Windows 10, version 1607. If your app’s 'minimum platform version' setting in Microsoft Visual Studio is less than the 'introduced version' shown in the Requirements block later in this page, you must design and test your app to account for this. For more info, see Version adaptive code.
To avoid exceptions when your app runs on previous versions of Windows 10, do not set this property in XAML or use it without performing a runtime check. This example shows how to use the ApiInformation class to check for the presence of this property before you set it.
<Pivot x:Name="pivot1" Loaded="Pivot_Loaded">
...
</Pivot>
private void Pivot_Loaded(object sender, RoutedEventArgs e)
{
if (ApiInformation.IsPropertyPresent("Windows.UI.Xaml.Controls.Pivot", "HeaderFocusVisualPlacement"))
{
pivot1.HeaderFocusVisualPlacement = PivotHeaderFocusVisualPlacement.SelectedItemHeader;
}
}
HeaderFocusVisualPlacementProperty HeaderFocusVisualPlacementProperty HeaderFocusVisualPlacementProperty HeaderFocusVisualPlacementProperty
Identifies the HeaderFocusVisualPlacement dependency property.
public : static DependencyProperty HeaderFocusVisualPlacementProperty { get; }public static DependencyProperty HeaderFocusVisualPlacementProperty { get; }Public Static ReadOnly Property HeaderFocusVisualPlacementProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the HeaderFocusVisualPlacement dependency property.
| Device family |
Windows 10 Anniversary Edition (introduced v10.0.14393.0)
|
| API contract |
Windows.Foundation.UniversalApiContract (introduced v3)
|
HeaderTemplate HeaderTemplate HeaderTemplate HeaderTemplate
Gets or sets the template for the Header property of PivotItem children.
public : DataTemplate HeaderTemplate { get; set; }public DataTemplate HeaderTemplate { get; set; }Public ReadWrite Property HeaderTemplate As DataTemplate// This API is not available in Javascript.
<Pivot HeaderTemplate="resourceReferenceToDataTemplate"/>
- See Also
HeaderTemplateProperty HeaderTemplateProperty HeaderTemplateProperty HeaderTemplateProperty
Identifies the HeaderTemplate dependency property.
public : static DependencyProperty HeaderTemplateProperty { get; }public static DependencyProperty HeaderTemplateProperty { get; }Public Static ReadOnly Property HeaderTemplateProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the HeaderTemplate dependency property.
IsHeaderItemsCarouselEnabled IsHeaderItemsCarouselEnabled IsHeaderItemsCarouselEnabled IsHeaderItemsCarouselEnabled
Gets or sets a value that indicates whether the selected header moves to the first position.
public : PlatForm::Boolean IsHeaderItemsCarouselEnabled { get; set; }public bool IsHeaderItemsCarouselEnabled { get; set; }Public ReadWrite Property IsHeaderItemsCarouselEnabled As bool// This API is not available in Javascript.
<Pivot IsHeaderItemsCarouselEnabled="bool" />
- Value
- PlatForm::Boolean bool bool bool
true if the selected header moves to the first position; false if headers always keep the same position. The default is true.
| Device family |
Windows 10 Anniversary Edition (introduced v10.0.14393.0)
|
| API contract |
Windows.Foundation.UniversalApiContract (introduced v3)
|
Remarks
This property has an effect only when the Pivot doesn't have enough space to show all the headers. If space is available, all headers are shown regardless of this property setting.
By default, the selected Pivot header always moves to the first position (far left), and the headers carousel. The user can pan infinitely and the content just wraps around from front to back.
When this property is false, the Pivot headers always keep the same position. Scrolling is enabled to show headers that don't fit in the viewport.
Version compatibility
The IsHeaderItemsCarouselEnabled property is not available prior to Windows 10, version 1607. If your app’s 'minimum platform version' setting in Microsoft Visual Studio is less than the 'introduced version' shown in the Requirements block later in this page, you must design and test your app to account for this. For more info, see Version adaptive code.
To avoid exceptions when your app runs on previous versions of Windows 10, do not set this property in XAML or use it without performing a runtime check. This example shows how to use the ApiInformation class to check for the presence of this property before you set it.
<Pivot x:Name="pivot1" Loaded="Pivot_Loaded">
...
</Pivot>
private void Pivot_Loaded(object sender, RoutedEventArgs e)
{
if (ApiInformation.IsPropertyPresent("Windows.UI.Xaml.Controls.Pivot", "IsHeaderItemsCarouselEnabled"))
{
pivot1.IsHeaderItemsCarouselEnabled = false;
}
}
IsHeaderItemsCarouselEnabledProperty IsHeaderItemsCarouselEnabledProperty IsHeaderItemsCarouselEnabledProperty IsHeaderItemsCarouselEnabledProperty
Identifies the IsHeaderItemsCarouselEnabled dependency property.
public : static DependencyProperty IsHeaderItemsCarouselEnabledProperty { get; }public static DependencyProperty IsHeaderItemsCarouselEnabledProperty { get; }Public Static ReadOnly Property IsHeaderItemsCarouselEnabledProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the IsHeaderItemsCarouselEnabled dependency property.
| Device family |
Windows 10 Anniversary Edition (introduced v10.0.14393.0)
|
| API contract |
Windows.Foundation.UniversalApiContract (introduced v3)
|
IsLocked IsLocked IsLocked IsLocked
Gets or sets whether the Pivot is locked to show only the current PivotItem. While the Pivot is locked, all other PivotItems are removed, and the user cannot navigate to them. An example of locking is when the email list is put into a multi-select mode.
public : PlatForm::Boolean IsLocked { get; set; }public bool IsLocked { get; set; }Public ReadWrite Property IsLocked As bool// This API is not available in Javascript.
<Pivot IsLocked="bool" />
- Value
- PlatForm::Boolean bool bool bool
true if the Pivot is locked; false if it is unlocked. The default is false.
IsLockedProperty IsLockedProperty IsLockedProperty IsLockedProperty
Identifies the IsLocked dependency property.
public : static DependencyProperty IsLockedProperty { get; }public static DependencyProperty IsLockedProperty { get; }Public Static ReadOnly Property IsLockedProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the IsLocked dependency property.
LeftHeader LeftHeader LeftHeader LeftHeader
Gets or sets the content for the header on the control's left side.
public : PlatForm::Object LeftHeader { get; set; }public object LeftHeader { get; set; }Public ReadWrite Property LeftHeader As object// This API is not available in Javascript.
<Pivot LeftHeader="headerString"/>
- Value
- PlatForm::Object object object object
The content of the header on the control's left side. The default is null.
Remarks
You can set a data template for the LeftHeader value by using the LeftHeaderTemplate property.
- See Also
LeftHeaderProperty LeftHeaderProperty LeftHeaderProperty LeftHeaderProperty
Identifies the LeftHeader dependency property.
public : static DependencyProperty LeftHeaderProperty { get; }public static DependencyProperty LeftHeaderProperty { get; }Public Static ReadOnly Property LeftHeaderProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the LeftHeader dependency property.
- See Also
LeftHeaderTemplate LeftHeaderTemplate LeftHeaderTemplate LeftHeaderTemplate
Gets or sets the template for the header on the control's left side.
public : DataTemplate LeftHeaderTemplate { get; set; }public DataTemplate LeftHeaderTemplate { get; set; }Public ReadWrite Property LeftHeaderTemplate As DataTemplate// This API is not available in Javascript.
<Pivot LeftHeaderTemplate="resourceReferenceToDataTemplate"/>
The template for the header on the control's left side.
LeftHeaderTemplateProperty LeftHeaderTemplateProperty LeftHeaderTemplateProperty LeftHeaderTemplateProperty
Identifies the LeftHeaderTemplate dependency property.
public : static DependencyProperty LeftHeaderTemplateProperty { get; }public static DependencyProperty LeftHeaderTemplateProperty { get; }Public Static ReadOnly Property LeftHeaderTemplateProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the LeftHeaderTemplate dependency property.
- See Also
RightHeader RightHeader RightHeader RightHeader
Gets or sets the content for the header on the control's right side.
public : PlatForm::Object RightHeader { get; set; }public object RightHeader { get; set; }Public ReadWrite Property RightHeader As object// This API is not available in Javascript.
<Pivot RightHeader="headerString"/>
- Value
- PlatForm::Object object object object
The content of the header on the control's right side. The default is null.
Remarks
You can set a data template for the RightHeader value by using the RightHeaderTemplate property.
- See Also
RightHeaderProperty RightHeaderProperty RightHeaderProperty RightHeaderProperty
Identifies the RightHeader dependency property.
public : static DependencyProperty RightHeaderProperty { get; }public static DependencyProperty RightHeaderProperty { get; }Public Static ReadOnly Property RightHeaderProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the RightHeader dependency property.
- See Also
RightHeaderTemplate RightHeaderTemplate RightHeaderTemplate RightHeaderTemplate
Gets or sets the template for the header on the control's right side.
public : DataTemplate RightHeaderTemplate { get; set; }public DataTemplate RightHeaderTemplate { get; set; }Public ReadWrite Property RightHeaderTemplate As DataTemplate// This API is not available in Javascript.
<Pivot RightHeaderTemplate="resourceReferenceToDataTemplate"/>
The template for the header on the control's right side.
RightHeaderTemplateProperty RightHeaderTemplateProperty RightHeaderTemplateProperty RightHeaderTemplateProperty
Identifies the RightHeaderTemplate dependency property.
public : static DependencyProperty RightHeaderTemplateProperty { get; }public static DependencyProperty RightHeaderTemplateProperty { get; }Public Static ReadOnly Property RightHeaderTemplateProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the RightHeaderTemplate dependency property.
- See Also
SelectedIndex SelectedIndex SelectedIndex SelectedIndex
Gets or sets the zero-based index of the currently selected item in the Pivot.
public : int SelectedIndex { get; set; }public int SelectedIndex { get; set; }Public ReadWrite Property SelectedIndex As int// This API is not available in Javascript.
- Value
- int int int int
The zero-based index of the currently selected item.
SelectedIndexProperty SelectedIndexProperty SelectedIndexProperty SelectedIndexProperty
Identifies the SelectedIndex dependency property.
public : static DependencyProperty SelectedIndexProperty { get; }public static DependencyProperty SelectedIndexProperty { get; }Public Static ReadOnly Property SelectedIndexProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the SelectedIndex dependency property.
SelectedItem SelectedItem SelectedItem SelectedItem
Gets or sets the currently selected item in the Pivot.
public : PlatForm::Object SelectedItem { get; set; }public object SelectedItem { get; set; }Public ReadWrite Property SelectedItem As object// This API is not available in Javascript.
SelectedItemProperty SelectedItemProperty SelectedItemProperty SelectedItemProperty
Identifies the SelectedItem dependency property.
public : static DependencyProperty SelectedItemProperty { get; }public static DependencyProperty SelectedItemProperty { get; }Public Static ReadOnly Property SelectedItemProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the SelectedItem dependency property.
SlideInAnimationGroupProperty SlideInAnimationGroupProperty SlideInAnimationGroupProperty SlideInAnimationGroupProperty
Identifies the SlideInAnimationGroup XAML attached property.
public : static DependencyProperty SlideInAnimationGroupProperty { get; }public static DependencyProperty SlideInAnimationGroupProperty { get; }Public Static ReadOnly Property SlideInAnimationGroupProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the SlideInAnimationGroup XAML attached property.
Title Title Title Title
Gets or sets the title to be optionally set above the headers.
public : PlatForm::Object Title { get; set; }public object Title { get; set; }Public ReadWrite Property Title As object// This API is not available in Javascript.
<Pivot Title="string" />
- Value
- PlatForm::Object object object object
Returns String.
TitleProperty TitleProperty TitleProperty TitleProperty
Identifies the Title dependency property.
public : static DependencyProperty TitleProperty { get; }public static DependencyProperty TitleProperty { get; }Public Static ReadOnly Property TitleProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the Title dependency property.
TitleTemplate TitleTemplate TitleTemplate TitleTemplate
Gets or sets the title template used for displaying the title above the headers area.
public : DataTemplate TitleTemplate { get; set; }public DataTemplate TitleTemplate { get; set; }Public ReadWrite Property TitleTemplate As DataTemplate// This API is not available in Javascript.
<Pivot TitleTemplate="resourceReferenceToDataTemplate"/>
The template that specifies the visualization of the title object.
- See Also
TitleTemplateProperty TitleTemplateProperty TitleTemplateProperty TitleTemplateProperty
Identifies the TitleTemplate dependency property.
public : static DependencyProperty TitleTemplateProperty { get; }public static DependencyProperty TitleTemplateProperty { get; }Public Static ReadOnly Property TitleTemplateProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the TitleTemplate dependency property.
Methods
GetSlideInAnimationGroup(FrameworkElement) GetSlideInAnimationGroup(FrameworkElement) GetSlideInAnimationGroup(FrameworkElement) GetSlideInAnimationGroup(FrameworkElement)
Retrieves the animation group that a FrameworkElement belongs to.
public : static PivotSlideInAnimationGroup GetSlideInAnimationGroup(FrameworkElement element)public static PivotSlideInAnimationGroup GetSlideInAnimationGroup(FrameworkElement element)Public Static Function GetSlideInAnimationGroup(element As FrameworkElement) As PivotSlideInAnimationGroup// This API is not available in Javascript.
The FrameworkElement within the Pivot (such as a TextBlock ) that is to be animated.
The slide-in animation group that this FrameworkElement belongs to.
SetSlideInAnimationGroup(FrameworkElement, PivotSlideInAnimationGroup) SetSlideInAnimationGroup(FrameworkElement, PivotSlideInAnimationGroup) SetSlideInAnimationGroup(FrameworkElement, PivotSlideInAnimationGroup) SetSlideInAnimationGroup(FrameworkElement, PivotSlideInAnimationGroup)
Assigns a FrameworkElement to a slide-in animation group so that element is animated at the same time as the other members of that group.
public : static void SetSlideInAnimationGroup(FrameworkElement element, PivotSlideInAnimationGroup value)public static void SetSlideInAnimationGroup(FrameworkElement element, PivotSlideInAnimationGroup value)Public Static Function SetSlideInAnimationGroup(element As FrameworkElement, value As PivotSlideInAnimationGroup) As void// This API is not available in Javascript.
The FrameworkElement within the Pivot (such as a TextBlock ) that is to be animated.
- value
- PivotSlideInAnimationGroup PivotSlideInAnimationGroup PivotSlideInAnimationGroup PivotSlideInAnimationGroup
The slide-in animation group that this FrameworkElement belongs to. This element will be animated with all other elements that share the same group number.
Events
PivotItemLoaded PivotItemLoaded PivotItemLoaded PivotItemLoaded
Event for indicating that an item has fully loaded.
public : event TypedEventHandler PivotItemLoaded<Pivot, PivotItemEventArgs>public event TypedEventHandler PivotItemLoaded<Pivot, PivotItemEventArgs>Public Event PivotItemLoaded<Pivot, PivotItemEventArgs>// This API is not available in Javascript.
<Pivot PivotItemLoaded="eventhandler" />
PivotItemLoading PivotItemLoading PivotItemLoading PivotItemLoading
Event for offering an opportunity to dynamically load or change the content of a pivot item before it is displayed.
public : event TypedEventHandler PivotItemLoading<Pivot, PivotItemEventArgs>public event TypedEventHandler PivotItemLoading<Pivot, PivotItemEventArgs>Public Event PivotItemLoading<Pivot, PivotItemEventArgs>// This API is not available in Javascript.
<Pivot PivotItemLoading="eventhandler" />
PivotItemUnloaded PivotItemUnloaded PivotItemUnloaded PivotItemUnloaded
Event for notifying that the pivot item has been completely unloaded from the visual pivot.
public : event TypedEventHandler PivotItemUnloaded<Pivot, PivotItemEventArgs>public event TypedEventHandler PivotItemUnloaded<Pivot, PivotItemEventArgs>Public Event PivotItemUnloaded<Pivot, PivotItemEventArgs>// This API is not available in Javascript.
<Pivot PivotItemUnloaded="eventhandler" />
PivotItemUnloading PivotItemUnloading PivotItemUnloading PivotItemUnloading
Event for offering an opportunity to dynamically load, change, or remove the content of a pivot item as it is removed.
public : event TypedEventHandler PivotItemUnloading<Pivot, PivotItemEventArgs>public event TypedEventHandler PivotItemUnloading<Pivot, PivotItemEventArgs>Public Event PivotItemUnloading<Pivot, PivotItemEventArgs>// This API is not available in Javascript.
<Pivot PivotItemUnloading="eventhandler" />
SelectionChanged SelectionChanged SelectionChanged SelectionChanged
Occurs when the currently selected item changes.
public : event SelectionChangedEventHandler SelectionChangedpublic event SelectionChangedEventHandler SelectionChangedPublic Event SelectionChanged// This API is not available in Javascript.
<Pivot SelectionChanged="eventhandler" />