Post
Ask Question

Changing Pivot Header To Image Instead Of Text - Tip

Pivot controls are really awesome in Windows 10 and has provided multiple views for tailored content. Pivot control is personally one of my favorite control, It starts with a pivot control and has pivot items inside it. Very basic XAML for pivot would be something like the following:

  1. <Pivot HeaderTemplate="{StaticResource HeaderTemp}">  
  2.    <PivotItem Header="tvh.png" Margin="12,10,12,0"></PivotItem>  
  3. </Pivot>  
After writing this XAML you would end up with something similar to this,

writing this XAML

But if you have a glance at some top apps, you would find that they are using images instead of text, as that makes it more interesting and beautiful. Now question is that how can you change text to image? Would you have to write your own pivot like control? The answer is NO! You just need to perform few magical tricks in Blend for VS 2015 and you would be good to go.

Pivot has an header which is called pivot header. All text you see in the image above is pivot header.

Now what we got to do is we have to change the template for pivot header. How you are going to do that? Just open your solution in Blend for VS and follow these steps.

 

  • Click on the main pivot control in Objects & Timeline.

  • Right Click on the Pivot control, then Edit Additional Template > Edit Header Template > Create Empty.

  • Now you just need to open XAML and header tag would be available for you to edit with a simple grid having nothing in it.

  • Introduce an Image control in that grid.

  • Size that image according to your need.

  • After sizing the image, you need to set the source of that image, just type {Binding} and that would be enough.

  • Now the question is that where to add the image source?

  • You just need to add image source to the property "Header" of Pivot Item and you would be good to go.

Header

You would get something like this,

Here is the code of Pivot Control with Images,

  1. <Page.Resources>  
  2.     <DataTemplate x:Key="HeaderTemp">  
  3.         <Grid>  
  4.             <Image Source="{Binding}"></Image>  
  5.         </Grid>  
  6.     </DataTemplate>  
  7. </Page.Resources>  
  8. <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">  
  9.     <Pivot HeaderTemplate="{StaticResource HeaderTemp}">  
  10.         <PivotItem Header="tvh.png" Margin="12,10,12,0"> </PivotItem>  
  11.         <PivotItem Header="dp.jpg" Margin="12,10,12,0"> </PivotItem>  
  12.     </Pivot>  
  13. </Grid>  
Hope you have enjoyed the tip, if you are having some question do comment under.

 


Similar Articles