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.

            
                
                    
                        
                    
                
                
                    
                
                    
                        
                    
                
            
        

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.


        
                
        

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

 

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

 
        

The code examples above is for PivotItem headers, if you want it to be for the Pivot title, just change HeaderTemplate to TitleTimplate.

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.

  7/31/2015 - 10:44 AM