Page content flowing over PivotItem header when using template

Question

I used Blend to modify the template for my pivot item header. The result looks great, but I don't understand the resulting mark-up.

The problem arises when I'm binding my data to my pivot item as it appears floating over the header. I can get around this by setting a margin, but instead of doing this for every pivot item, I'd like to understand the style markup and hopefully fix it there.

<Style x:Key="PivotStyle1" TargetType="controls:Pivot">
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Background" Value="White"/>
<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 CacheMode="BitmapCache" Grid.RowSpan="2" >
                    <Grid.Background>
                        <LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
                            <GradientStop Color="#FFD7E9F1"/>
                            <GradientStop Color="#FF1BA1E2" Offset="1"/>
                        </LinearGradientBrush>
                    </Grid.Background>
                </Grid>
                <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" Foreground="White" />
                <ItemsPresenter x:Name="PivotItemPresenter" Margin="0,2,0,8" Grid.RowSpan="3"/>
            </Grid>
        </ControlTemplate>
    </Setter.Value>
</Setter>

setting the Pivot.HeaderTemplate as Shawn suggests below is much simpler, but results in a gap in the background color between header items.

<controls:Pivot>
        <controls:Pivot.HeaderTemplate>
            <DataTemplate>
                <StackPanel>
                    <StackPanel.Background>
                        <LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
                            <GradientStop Color="#FFD7E9F1"/>
                            <GradientStop Color="#FF1BA1E2" Offset="1"/>
                        </LinearGradientBrush>
                    </StackPanel.Background>

                    <TextBlock Text="{Binding}" FontSize="{StaticResource PhoneFontSizeExtraExtraLarge}" Foreground="White" />

                </StackPanel>
            </DataTemplate>
        </controls:Pivot.HeaderTemplate>

Answer 1

If you are just trying to modify the header, just modify the header

<controls:Pivot>
    <controls:Pivot.HeaderTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding}" FontSize="{StaticResource PhoneFontSizeExtraExtraLarge}"
                       Margin="24,17,0,-7" Foreground="White" />
        </DataTemplate>
    </controls:Pivot.HeaderTemplate>
    <controls:PivotItem Title="item one"/>
</controls:Pivot>

Based on your latest update, I see what you're trying to do. Add the following to the resources of your page

            <Style TargetType="controlsPrimitives:PivotHeadersControl">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="controlsPrimitives:PivotHeadersControl">
                            <Grid>
                                <Grid.Background>
                                    <LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
                                        <GradientStop Color="#FFD7E9F1"/>
                                        <GradientStop Color="#FF1BA1E2" Offset="1"/>
                                    </LinearGradientBrush>
                                </Grid.Background>
                                <Canvas x:Name="Canvas">
                                    <ItemsPresenter/>
                                </Canvas>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

You'll need the following namespace defined

xmlns:controlsPrimitives="clr-namespace:Microsoft.Phone.Controls.Primitives;assembly=Microsoft.Phone.Controls"

So more info on my blog www.VisuallyLocated.com