Question

In my Phone 7 application, I’m using a pivot control. Now I’d like to change the background of its title and header area. How can I achieve this?

Is there an overall template for the pivot control that can be customized?

I’ve already tried to set the background of the grid containing the pivot control to the header color and then to set the background of each pivot item to the original background color. It looks good on first sight. But when you wipe the pivot item to the left to display the second item, an area colored in the header color appears between the two pivot items. So that approach is not working.

Furthermore I’ve tried to customize the template of the title and the header item. But these templates only cover the area of the text itself, not the whole header and template area.

Answer 1

Here’s the variant with changing the control’s template. Change the Background=”Red” to whatever brush you want.

<Style x:Key="PivotStyle1" TargetType="controls:Pivot">
  <Setter Property="Margin" Value="0"/>
  <Setter Property="Padding" Value="0"/>
  <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
  <Setter Property="Background" Value="Transparent"/>
  <Setter Property="ItemsPanel">
    <Setter.Value>
      <ItemsPanelTemplate>
        <Grid/>
      </ItemsPanelTemplate>
    </Setter.Value>
  </Setter>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="controls:Pivot">
        <Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
              VerticalAlignment="{TemplateBinding VerticalAlignment}">
          <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
          </Grid.RowDefinitions>
          <Grid Background="Red" CacheMode="BitmapCache" Grid.RowSpan="2" />
          <Grid Background="{TemplateBinding Background}" CacheMode="BitmapCache"
                Grid.Row="2" />
          <ContentPresenter ContentTemplate="{TemplateBinding TitleTemplate}"
                            Content="{TemplateBinding Title}" Margin="24,17,0,-7"/>
          <controlsPrimitives:PivotHeadersControl x:Name="HeadersListElement"
                                                  Grid.Row="1"/>
          <ItemsPresenter x:Name="PivotItemPresenter"
                          Margin="{TemplateBinding Padding}" Grid.Row="2"/>
        </Grid>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

....

<controls:Pivot Title="MY APPLICATION" Style="{StaticResource PivotStyle1}">

....