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

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.

Comments (0)