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
<Pivot .../>
-or-
<Pivot ...>
  oneOrMorePivotItems
</Pivot>

Inheritance
Attributes
Windows 10 requirements
Device family
Windows 10 (introduced v10.0.10240.0)
API contract
Windows.Foundation.UniversalApiContract (introduced v1)

Inherited Members

Inherited properties

Inherited events

Inherited methods

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&lt;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 keyDescription
PivotBackgroundControl background color
PivotHeaderBackgroundHeader background color
PivotNextButtonForegroundButton icon color at rest
PivotNextButtonForegroundPointerOverButton icon color on hover
PivotNextButtonForegroundPressedButton icon color when pressed
PivotNextButtonBackgroundButton background color at rest
PivotNextButtonBackgroundPointerOverButton background color on hover
PivotNextButtonBackgroundPressedButton background color when pressed
PivotNextButtonBorderBrushButton border color at rest
PivotNextButtonBorderBrushPointerOverButton border color on hover
PivotNextButtonBorderBrushPressedButton border color when pressed
PivotPreviousButtonForegroundButton icon color at rest
PivotPreviousButtonForegroundPointerOverButton icon color on hover
PivotPreviousButtonForegroundPressedButton icon color when pressed
PivotPreviousButtonBackgroundButton background color at rest
PivotPreviousButtonBackgroundPointerOverButton background color on hover
PivotPreviousButtonBackgroundPressedButton background color when pressed
PivotPreviousButtonBorderBrushButton border color at rest
PivotPreviousButtonBorderBrushPointerOverButton border color on hover
PivotPreviousButtonBorderBrushPressedButton border color when pressed

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;
    }
}

Constructors

Pivot() Pivot() Pivot()

Properties

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
<Pivot HeaderFocusVisualPlacement="pivotHeaderFocusVisualPlacementMemberName" />
Value
PivotHeaderFocusVisualPlacement PivotHeaderFocusVisualPlacement PivotHeaderFocusVisualPlacement

A value of the enumeration that specifies the style of focus visual used for pivot header items. The default is SelectedItemHeader.

Attributes
Additional features and requirements
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

Identifies the HeaderFocusVisualPlacement dependency property.

public static DependencyProperty HeaderFocusVisualPlacementProperty { get; }public static DependencyProperty HeaderFocusVisualPlacementProperty { get; }Public Static ReadOnly Property HeaderFocusVisualPlacementProperty As DependencyProperty
Value
DependencyProperty DependencyProperty DependencyProperty

The identifier for the HeaderFocusVisualPlacement dependency property.

Attributes
Additional features and requirements
Device family
Windows 10 Anniversary Edition (introduced v10.0.14393.0)
API contract
Windows.Foundation.UniversalApiContract (introduced v3)

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
<Pivot HeaderTemplate="resourceReferenceToDataTemplate"/>
Value
DataTemplate DataTemplate DataTemplate

The template for the Header property of PivotItem children.

Attributes

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
Value
DependencyProperty DependencyProperty DependencyProperty

The identifier for the HeaderTemplate dependency property.

Attributes

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
<Pivot IsHeaderItemsCarouselEnabled="bool" />
Value
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.

Attributes
Additional features and requirements
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

Identifies the IsHeaderItemsCarouselEnabled dependency property.

public static DependencyProperty IsHeaderItemsCarouselEnabledProperty { get; }public static DependencyProperty IsHeaderItemsCarouselEnabledProperty { get; }Public Static ReadOnly Property IsHeaderItemsCarouselEnabledProperty As DependencyProperty
Value
DependencyProperty DependencyProperty DependencyProperty

The identifier for the IsHeaderItemsCarouselEnabled dependency property.

Attributes
Additional features and requirements
Device family
Windows 10 Anniversary Edition (introduced v10.0.14393.0)
API contract
Windows.Foundation.UniversalApiContract (introduced v3)

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
<Pivot IsLocked="bool" />
Value
bool bool bool

true if the Pivot is locked; false if it is unlocked. The default is false.

Attributes

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
Value
DependencyProperty DependencyProperty DependencyProperty

The identifier for the IsLocked dependency property.

Attributes

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
<Pivot LeftHeader="headerString"/>

Value
object object object

The content of the header on the control's left side. The default is null.

Attributes

Remarks

You can set a data template for the LeftHeader value by using the LeftHeaderTemplate property.

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
Value
DependencyProperty DependencyProperty DependencyProperty

The identifier for the LeftHeader dependency property.

Attributes
See Also

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
<Pivot LeftHeaderTemplate="resourceReferenceToDataTemplate"/>
Value
DataTemplate DataTemplate DataTemplate

The template for the header on the control's left side.

Attributes

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
Value
DependencyProperty DependencyProperty DependencyProperty

The identifier for the LeftHeaderTemplate dependency property.

Attributes
See Also

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
<Pivot RightHeader="headerString"/>

Value
object object object

The content of the header on the control's right side. The default is null.

Attributes

Remarks

You can set a data template for the RightHeader value by using the RightHeaderTemplate property.

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
Value
DependencyProperty DependencyProperty DependencyProperty

The identifier for the RightHeader dependency property.

Attributes
See Also

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
<Pivot RightHeaderTemplate="resourceReferenceToDataTemplate"/>
Value
DataTemplate DataTemplate DataTemplate

The template for the header on the control's right side.

Attributes

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
Value
DependencyProperty DependencyProperty DependencyProperty

The identifier for the RightHeaderTemplate dependency property.

Attributes
See Also

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
Value
int int int

The zero-based index of the currently selected item.

Attributes

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
Value
DependencyProperty DependencyProperty DependencyProperty

The identifier for the SelectedIndex dependency property.

Attributes

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
Value
object object object

The currently selected PivotItem or, if the Pivot is bound to data, the data item set as the Content of the currently selected PivotItem.

Attributes

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
Value
DependencyProperty DependencyProperty DependencyProperty

The identifier for the SelectedItem dependency property.

Attributes

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
Value
DependencyProperty DependencyProperty DependencyProperty

The identifier for the SlideInAnimationGroup XAML attached property.

Attributes

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
<Pivot Title="string" />
Value
object object object

Returns String.

Attributes

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
Value
DependencyProperty DependencyProperty DependencyProperty

The identifier for the Title dependency property.

Attributes

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
<Pivot TitleTemplate="resourceReferenceToDataTemplate"/>
Value
DataTemplate DataTemplate DataTemplate

The template that specifies the visualization of the title object.

Attributes

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
Value
DependencyProperty DependencyProperty DependencyProperty

The identifier for the TitleTemplate dependency property.

Attributes

Methods

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
Parameters
element
FrameworkElement FrameworkElement FrameworkElement

The FrameworkElement within the Pivot (such as a TextBlock ) that is to be animated.

Returns
Attributes

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
Parameters
element
FrameworkElement FrameworkElement FrameworkElement

The FrameworkElement within the Pivot (such as a TextBlock ) that is to be animated.

value
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.

Attributes

Events

PivotItemLoaded PivotItemLoaded PivotItemLoaded

Event for indicating that an item has fully loaded.

public event TypedEventHandler PivotItemLoadedpublic event TypedEventHandler PivotItemLoadedPublic Event PivotItemLoaded
<Pivot PivotItemLoaded="eventhandler" />
Attributes

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 PivotItemLoadingpublic event TypedEventHandler PivotItemLoadingPublic Event PivotItemLoading
<Pivot PivotItemLoading="eventhandler" />
Attributes

PivotItemUnloaded PivotItemUnloaded PivotItemUnloaded

Event for notifying that the pivot item has been completely unloaded from the visual pivot.

public event TypedEventHandler PivotItemUnloadedpublic event TypedEventHandler PivotItemUnloadedPublic Event PivotItemUnloaded
<Pivot PivotItemUnloaded="eventhandler" />
Attributes

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 PivotItemUnloadingpublic event TypedEventHandler PivotItemUnloadingPublic Event PivotItemUnloading
<Pivot PivotItemUnloading="eventhandler" />
Attributes

SelectionChanged SelectionChanged SelectionChanged

Occurs when the currently selected item changes.

public event SelectionChangedEventHandler SelectionChangedpublic event SelectionChangedEventHandler SelectionChangedPublic Event SelectionChanged
<Pivot SelectionChanged="eventhandler" />
Attributes

See Also