WP8 add subtitle text to pivot control header

Question

I want to create custom pivot header with two textblocks: one for header title and one for subtitle or maybe add static subtitle same for every pivot page. The easy way is to define header template like in example below, but how I can bind subtitle text to actual control to be able to change in in code? If the only option is to overwrite pivot control, please provide some examples if exist.

<phone:Pivot.HeaderTemplate>
    <DataTemplate>
         <Grid>
              <TextBlock Text="{Binding}" /> //header
              <TextBlock Text="{Binding}" /> //subtite
         </Grid>
    </DataTemplate>
</phone:Pivot.HeaderTemplate>

Thanks.

Answer 1

I succeed to do what you want but I'm not proud of the solution...

First, I created an object that take 2 string :

public class Header
{
    public string Title { get; set; }
    public string Subtitle { get; set; }
}

Then a create the object in XAML in resources (or you can bind them through you viewmodel)

<phone:PhoneApplicationPage.Resources>
    <poc:Header x:Key="FirstHeader" Title="first" Subtitle="first subtitle"/>
    <poc:Header x:Key="SecondHeader" Title="second" Subtitle="second subtitle"/>
</phone:PhoneApplicationPage.Resources>

Bind the objects on each of your pivotitem:

<phone:PivotItem Header="{StaticResource FirstHeader}">

Then style your Pivot.HeaderTemplate like this:

<phone:Pivot.HeaderTemplate>
    <DataTemplate>
        <StackPanel Orientation="Vertical">
            <TextBlock Text="{Binding Title}" Foreground="White"/>
            <TextBlock Text="{Binding Subtitle}" FontSize="18" Foreground="White"/>
        </StackPanel>
    </DataTemplate>
</phone:Pivot.HeaderTemplate>

A better solution can be achieved by modifying the behavior of the Pivot and PivotItem but I didn't succeed to change the binding between the Pivot.HeaderTemplate and the PivotItem.

Answer 2

You could try and define the header for every item separately instead for the whole pivot. In case you want to make it work for the whole pivot you should change the style, and extend it with subtitle properties.

Anyway here's the code if u wanna change the header for the pivot item only

<controls:Pivot Name="MainPivot">
    <controls:PivotItem x:Name="HomeMenuPivotItem">
        <controls:PivotItem.Header>
            <StackPanel>
                <TextBlock Text="Title"/>
                <TextBlock Text="Subtitle"/>
            </StackPanel>
        </controls:PivotItem.Header>
    </controls:PivotItem>
</controls:Pivot>