UWP - How to use Pivot

UWP Pivot

The Pivot class represents a control that provides quick navigation of views within an app. The UWP app developers put a Pivot control in their app screen to present groups of content that a user can swipe through. The developers should use a Pivot as the top-level control on the app screen.

The following UWP app development tutorial code will demonstrate how we can use Pivot control. Here we put a Pivot control in the layout. The Pivot control shows three items. We put the items inside a Pivot using XAML UI elements.

The Pivot control is an ItemsControl, so the Pivot can contain a collection of any type of items. Developers can populate the Pivot control with items using XAML UI elements. Or they can populate items from the Pivot ItemsSource property.

The ItemsControl class’s ItemsSource property gets or sets an object source used to generate the content of the ItemsControl. This property value is an object that is used to generate the content of the ItemsControl such as a Pivot control. The default value is null.

The PivotItem class represents the container for an item in a Pivot control. The Pivot class’s SelectedItem property gets or sets the currently selected item in the Pivot. And the SelectedIndex property gets or sets the zero-based index of the currently selected item in the Pivot control.

The Pivot class’s LeftHeader property gets or sets the content for the header on the Pivot control's left side. And the RightHeader property gets or sets the content for the header on the Pivot control's right side.

MainPage.xaml

<Page
    x:Class="UniversalAppTutorials.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:UniversalAppTutorials"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <StackPanel 
        x:Name="StackPanel1" 
        Margin="50" 
        Orientation="Vertical"
        Background="AliceBlue"
        Padding="50"
        >
        <Pivot x:Name="Pivot1" Title="Simple Pivot" Background="PaleVioletRed" Padding="0,0,0,15">
            <PivotItem Header="Rectangle" Background="Pink">
                <StackPanel Orientation="Vertical" Padding="50">
                    <TextBlock 
                        Text="Pivot Item 1 : Rectangle"
                        Margin="0,0,0,15"
                    />
                    <Rectangle
                        Width="400"
                        Height="200"
                        Fill="Crimson"
                    />
                </StackPanel>
            </PivotItem>
            <PivotItem Header="Ellipse" Background="Orange">
                <StackPanel Orientation="Vertical" Padding="50">
                    <TextBlock 
                        Text="Pivot Item 2 : Ellipse"
                        Margin="0,0,0,15"
                    />
                    <Ellipse
                        Width="400"
                        Height="200"
                        Fill="Blue"
                    />
                </StackPanel>
            </PivotItem>
            <PivotItem Header="Border" Background="CornflowerBlue">
                <StackPanel Orientation="Vertical" Padding="50">
                    <TextBlock 
                        Text="Pivot Item 3 : Border"
                        Margin="0,0,0,15"
                    />
                    <Border
                        Width="400"
                        Height="200"
                        BorderBrush="Snow"
                        BorderThickness="5"                        
                    />
                </StackPanel>
            </PivotItem>
        </Pivot>
    </StackPanel>
</Page>