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

image

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">

image

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

image

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.