Change background of title and header in pivot control

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.

---

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

....

---

You're right that the Title and Header templates are only the actual text areas. It might be possible to override the whole template of the Pivot control, but an easier way would be to just add a colored rectangle behind it.

<Grid x:Name="LayoutRoot" Background="Transparent">
  <Rectangle 
    VerticalAlignment="Top" HorizontalAlignment="Stretch" 
    Height="150" Fill="Red" />
  <controls:Pivot Title="MY APPLICATION">
    <controls:PivotItem Header="item1">
        <Grid/>
    </controls:PivotItem>
    <controls:PivotItem Header="item2">
        <Grid/>
    </controls:PivotItem>
  </controls:Pivot>
</Grid>

---

You could modify the header template, which is usually a better option since you won't have to worry about custom positioning and alignment:

<controls:Pivot>
  <controls:Pivot.HeaderTemplate>
    <DataTemplate>
       <Grid Background="White"><TextBloc>Your Header Here</TextBlock></Grid>
    </DataTemplate>
  </controls:Pivot.HeaderTemplate>
</controls:Pivot>

That being said, you are applying the background to an auto-resizing grid - of course, you can resize it on your own to adjust it to the right size. Same applies to each PivotItem, if that's where you want to change the title - just bind those to a similar DataTemplate.