Pivot Title Templates

By default the Pivot Control on Windows Phone 7 simply displays a TextBlock as the title of the control. But what if you want to modify the title’s control template?

Creating a default Windows Phone Pivot Application we see that the MainPage.xaml contains this bit of xaml

 1 <controls:Pivot Title="MY APPLICATION">
2   <!--Pivot item one-->
3     <controls:PivotItem Header="first">

Which renders this

Lets update the title to be bound to a property of the view model (which is currently set at the Page level).

 1 <controls:Pivot Title="{Binding SampleProperty}">
2   <!--Pivot item one-->
3     <controls:PivotItem Header="first">

Now lets say we want to modify that title rendering to be something different. In this case I’m going to put a border around the title which is the color of the Phone’s accent color.

  1 <controls:Pivot Title="{Binding SampleProperty}">
 2   <controls:Pivot.TitleTemplate>
 3     <DataTemplate>
 4       <Border BorderThickness="5" 
 5         BorderBrush="{StaticResource PhoneAccentBrush}">
 6           <TextBlock Text="{Binding}"/>
 7       </Border>
 8     </DataTemplate>
 9   </controls:Pivot.TitleTemplate>
10   <!--Pivot item one-->
11   <controls:PivotItem Header="first">

Which gives us

Notice that the binding for the Text property of the TextBlock in the template is not “{TemplateBinding Title}”. It is a simple “{Binding}”. The control loads the template and sets the DataContext to the Title property which may not be what you expect when initially attempting to bind the title into the template.