Pivot in Windows 10 universal apps

If you are a Windows Phone developer I guess you are familiar with the Pivot control. In Windows 10 the pivot control has taken the step into desktop apps.

Pivot is a easy way to navigate between pages in your app. To navigate to an other page in the control just click the header or swipe left or right.
 

Pivot

Pivot in a desktop app

Pivot

Pivot on phone app




The pivot control is easy to implement, for every page you want to add to the Pivot control you just add a PivotItem as in the code below.

<Pivot Title="Pivot sample">
            <Pivot.Items>
                <PivotItem Header="Pivot 1">
                    <Grid>
                        <TextBlock Text="Content of pivot 1" />
                    </Grid>
                </PivotItem>
                <PivotItem Header="Pivot 2">
                    <views:MyView />
                <PivotItem Header="Pivot 3">
                    <Grid>
                        <TextBlock Text="Content of pivot 3" />
                    </Grid>
                </PivotItem>
            </Pivot.Items>
        </Pivot>

Customize the Pivot
Customizations of Pivot is done with DataTemplates. The Pivot control has a property called TitleTemplete for the template for the title of the pivot and a property called HeaderTemplate for the headers of the pivot items. Templates can be defined in resources for the page or for the application (in App.xaml). The template can only have one child element, but it could be for example a StackPanel or a Grid if you want to add more than text in your headers. For example if you will have ha more tab like experience with icons and text as you may have seen in some apps.

<Page.Resources>
        <DataTemplate x:Key="PivotHeader">
                <TextBlock FontSize="18" Foreground="Blue" Text="{Binding}" />
        </DataTemplate>
</Page.Resources>

Next step is to set the new template to the Pivot.

 <Pivot HeaderTemplate="{StaticResource PivotHeader}" Title="Pivot sample">

You can also define a style in App.xaml if you want it to be on all Pivots in the app.

 <Application.Resources>
        <Style TargetType="Pivot">
            <Setter Property="HeaderTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <Grid>
                            <TextBlock FontSize="18" Foreground="Blue" Text="{Binding}" />
                        </Grid>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
 
The code examples above is for PivotItem headers, if you want it to be for the Pivot title, just change HeaderTemplate to TitleTimplate.
</Application.Resources>

The complete code can be found on GitHub, https://github.com/dhindrik/windows10samples

If you want to read more about Windows 10 development I have created a list with all my Windows 10 blog posts, http://danielhindrikes.se/windows-10/, more will be added.

2 thoughts on “Pivot in Windows 10 universal apps

  1. I have done this in Windows 8.1 with no problem but when I do this in Windows 10 the headers are not displayed. I am using the first chunk of code from this article. Any idea what could be wring?

Leave a Reply

Your email address will not be published. Required fields are marked *