Post
Ask Question

How To Use Pivot Control In Windows 10 UWP App

Pivot control is used to navigate between the pages in your app easily. To navigate to other pages in the control, just click Pivot header or swipe left or right.

Pivot Header: Pivot Item header is the title of the item and we can use an icon, text or both.

Pivot items: Pivot Item is a collection of the items of any type. We can add any item in the pivot items.

Pivot control is easy to implement to the Pivot control. You just need to add the following code for the simple text header.

  1. <Pivot Title="Pivot Control Sample">  
  2.     <Pivot.Items>  
  3.         <PivotItem Header="Pivot Item 1">  
  4.             <Grid>  
  5.                 <TextBlock Text="Item 1 Content" /> </Grid>  
  6.         </PivotItem>  
  7.         <PivotItem Header="Pivot Item 2">  
  8.             <StackPanel>  
  9.                 <TextBlock Text="Item 2 Content" />  
  10.                 <TextBlock Text="http://windowsapptutorials.wordpress.com/" FontStyle="Italic" Foreground="#FF2975D1"></TextBlock>  
  11.             </StackPanel>  
  12.         </PivotItem>  
  13.     </Pivot.Items>  
  14. </Pivot>  
Now, run the app and see the output looks like the following image:

app

Now see how to set image or customized Pivot Item Header

Customizations of Pivot is required and we need to use DataTemplates. The Pivot control provides a property called TitleTemplete and HeaderTemplate. Using this template title and header of the pivot items, we can define our customized data. For it, we need to define our resource, using the code, given below:
  1. <Page.Resources>  
  2.     <DataTemplate x:Key="HeaderTemplate">  
  3.         <StackPanel>  
  4.             <Image Width="70" Height="50" Source="{Binding}"></Image>  
  5.         </StackPanel>  
  6.     </DataTemplate>  
  7. </Page.Resources>  
Now, add the code, given below, to set the Pivot header as an image.
  1. <Pivot HeaderTemplate="{StaticResource HeaderTemplate}">  
  2.     <PivotItem Header="Assets/W101.png" Margin="12,10,12,0">  
  3.         <TextBlock Text="Item 1"></TextBlock>  
  4.     </PivotItem>  
  5.     <PivotItem Header="Assets/W102.png" Margin="12,10,12,0">  
  6.         <TextBlock Text="Item 2"></TextBlock>  
  7.     </PivotItem>  
  8. </Pivot>  
Now, run the app and see the output, given below:

output

For more information on Windows 10 UWP, refer to my e-book:

 Windows 10 UWP E-book


Similar Articles