How to Change Pivot Header Template in Windows Phone 8

26,296

EDITED for WinRT (sorry for the delay and thanks for the reminder to update this answer): To edit a full template right click on the control when in Document Outline and select Edit Template - Current (in Visual Studio or Blend) and the template will be generated for you and you can edit as you want, see my answer here for screenshots.

Here are the two examples below (posted in 2013) redone for Windows Phone Windows Runtime: enter image description here

<Grid Background="Transparent">
    <Pivot Title="Re-templating example">
        <Pivot.HeaderTemplate>
            <DataTemplate>
                <Grid Background="Blue">
                    <TextBlock Text="{Binding}" />
                </Grid>
            </DataTemplate>
        </Pivot.HeaderTemplate>
        <Pivot.TitleTemplate>
            <DataTemplate>
                <Grid Background="Green">
                    <TextBlock Text="{Binding}" />
                </Grid>
            </DataTemplate>
        </Pivot.TitleTemplate>
        <PivotItem Header="One">
            <TextBlock FontSize="35"
                        Text="This is item one" />
        </PivotItem>
        <PivotItem Header="Two">
            <TextBlock FontSize="35"
                        Text="This is item 2" />
        </PivotItem>
    </Pivot>
</Grid>

And second example, notice that we are wrapping the ContentPresenter in a Grid (you could use a border as well or any other element):

enter image description here

<Page.Resources>
    <SolidColorBrush x:Key="PivotBackground" Color="#FFE46C08"/>

    <Style x:Key="PivotStyle" TargetType="Pivot">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Pivot">
                    <Grid x:Name="RootElement" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <!--Notice that ContentControl is wrapped in a Grid and Background set to resource furtehr up-->
                        <Grid VerticalAlignment="Center" Background="{StaticResource PivotBackground}">
                            <ContentControl x:Name="TitleContentControl" ContentTemplate="{TemplateBinding TitleTemplate}" Content="{TemplateBinding Title}" Style="{StaticResource PivotTitleContentControlStyle}"/>
                        </Grid>
                        <ScrollViewer x:Name="ScrollViewer" HorizontalSnapPointsAlignment="Center" HorizontalSnapPointsType="MandatorySingle" HorizontalScrollBarVisibility="Hidden" Margin="{TemplateBinding Padding}" Grid.Row="1" Template="{StaticResource ScrollViewerScrollBarlessTemplate}" VerticalSnapPointsType="None" VerticalScrollBarVisibility="Disabled" VerticalScrollMode="Disabled" VerticalContentAlignment="Stretch" ZoomMode="Disabled">
                            <PivotPanel x:Name="Panel" VerticalAlignment="Stretch">
                                <!--Background set to resource further up-->
                                <PivotHeaderPanel Background="{StaticResource PivotBackground}" x:Name="Header" >
                                    <PivotHeaderPanel.RenderTransform>
                                        <CompositeTransform x:Name="HeaderTranslateTransform" TranslateX="0"/>
                                    </PivotHeaderPanel.RenderTransform>
                                </PivotHeaderPanel>
                                <ItemsPresenter x:Name="PivotItemPresenter">
                                    <ItemsPresenter.RenderTransform>
                                        <TranslateTransform x:Name="ItemsPresenterTranslateTransform" X="0"/>
                                    </ItemsPresenter.RenderTransform>
                                </ItemsPresenter>
                            </PivotPanel>
                        </ScrollViewer>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Page.Resources>

Using the above style:

<Grid Background="Transparent">
    <Pivot Style="{StaticResource PivotStyle}"
            Title="Re-templating example">
        <PivotItem Header="One">
            <TextBlock FontSize="35" Text="This is item one" />
        </PivotItem>
        <PivotItem Header="Two">
            <TextBlock FontSize="35" Text="This is item 2"/>
        </PivotItem>
    </Pivot>
</Grid>

By the way, it's usually preferred to keep styles in a separate style file- I've only kept them on the same page for simplicity for this example. If you remove the x:key attribute the style will be applied to all the controls of the set target type (Pivot in this example).

Answer from 2013 for Windows Phone 7.X and Windows Phone 8 (WP Silverlight:

There are a few ways you can do it, but here is one example:

enter image description here

<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>  
    </Grid.RowDefinitions>

    <phone:Pivot Grid.Row="1">
        <phone:Pivot.HeaderTemplate>
            <DataTemplate>
                <Grid Background="Red" Height="200">
                    <TextBlock Text="{Binding}"/>
                </Grid>
            </DataTemplate>
        </phone:Pivot.HeaderTemplate>
        <phone:PivotItem Header="Test">
            <TextBlock Text="ghjgb"/>
        </phone:PivotItem>
        <phone:PivotItem Header="Test">
            <TextBlock Text="ghjgb"/>
        </phone:PivotItem>
    </phone:Pivot>

If you however want to do this:

enter image description here

You can do this, remove the x:key to apply to all pivoits, or use the key to set the style on just selected pivoit elements like so:

<controls:Pivot Title="The Marathon Runner" Style="{StaticResource PivotStyle}">
    <Style x:Key="PivotStyle" TargetType="phone: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="phone:Pivot">
                    <Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
      VerticalAlignment="{TemplateBinding VerticalAlignment}">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <Grid Background="#ff9000" 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"/>
                        <Primitives:PivotHeadersControl x:Name="HeadersListElement"
                                          Grid.Row="1"/>
                        <ItemsPresenter x:Name="PivotItemPresenter"
                  Margin="{TemplateBinding Padding}" Grid.Row="2"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>

Dont forget to use:

xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:Primitives="clr-namespace:Microsoft.Phone.Controls.Primitives;assembly=Microsoft.Phone"
Share:
26,296

Related videos on Youtube

Matthew
Author by

Matthew

Updated on July 05, 2022

Comments

  • Matthew
    Matthew over 1 year

    I would like to be able to change the background of the Pivot Headers and Application Title in Windows Phone 8. From what I gather, I must create a custom style targeting the Pivot control. I am not sure, however, to change the background of only the headers?

    I would like to adjust the style somehow

    <Style x:Key="MyPivotStyle" TargetType="phone:Pivot">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="phone:Pivot">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <Grid CacheMode="BitmapCache" Grid.RowSpan="2">
                        <Grid.Background>
                            <ImageBrush ImageSource="/Assets/bg_header.png"/>
                        </Grid.Background>
                    </Grid>
                    <Grid Background="{TemplateBinding Background}" CacheMode="BitmapCache" Grid.Row="2" />
                    <ContentPresenter ContentTemplate="{TemplateBinding TitleTemplate}" Margin="24,17,0,-7">
                        <StackPanel Orientation="Horizontal">
                            <Image Source="/Assets/company_name.png" Width="213.75" HorizontalAlignment="Left" VerticalAlignment="Top" />
                            <Button HorizontalAlignment="Right" VerticalAlignment="Top" Margin="140,-20,0,35" BorderThickness="0" x:Name="btnHome">
                                <Image Source="/Assets/btnHome.png" Width="48" Height="48" ></Image>
                            </Button>
                        </StackPanel>
                    </ContentPresenter>
                    <controlsPrimitives:PivotHeadersControl x:Name="HeadersListElement" Foreground="White"  Grid.Row="1"/>
                    <ItemsPresenter x:Name="PivotItemPresenter" Margin="{TemplateBinding Padding}" Grid.Row="2"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    

  • Matthew
    Matthew over 10 years
    My goal is to have the entire background of the pivot headers and application title the same color while the text foreground remains the same. I think the best way to describe it is everything above and including the pivot headers, a single color, while the background of each pivot item is another. I've tested your method but it only changes the background of each pivot header title. I added an example of the style from the Pivot, but I am not sure of how to change this to adjust the header backgrounds?
  • Iris Classon
    Iris Classon over 10 years
    Have a look at the image and code I added to the post, is it something like that you want to achieve?
  • Matthew
    Matthew over 10 years
    Yes, that is what I am trying to accomplish. I set the style although you are using Controls:Pivot which I believe is for WP7 and I am using phone:Pivot for WP8. This leads to my next question, I get an error on statement controlsPrimitives:PivotHeadersControl.
  • Iris Classon
    Iris Classon over 10 years
    It's the same xaml, but to clarify I added the namespaces you need. phone: and Controls: are just aliases, you can set them to whatever you want. It's just a way to have a short way to reference a namespace. For a long read: msdn.microsoft.com/en-us/library/aa468565.aspx
  • Matthew
    Matthew over 10 years
    Excellent. With a bit of tweaking I'm sure I can get what I Need. Love the pink hair.
  • Matthew
    Matthew over 10 years
    One more question, if I need my app title to be on the left, like how it is in the default Pivot Application, where would I make that change? Right now it is centered.
  • jazzy
    jazzy over 9 years
    Note that changes to HeaderTemplate don't always appear updated in the preview window until after you run the app.
  • Royston Yinkore
    Royston Yinkore about 9 years
    I used this solution for a WP8 app but it doesn't work for 8.1. Any pointers?
  • Enzo Contini
    Enzo Contini about 9 years
    I am trying to use the solution (the one with the orange backgroud)= in a Universal App 8.1 project: however, even if I am working on the Windows Phone project and I use a specific style file in it, I got these errors even if I put xmlns:primitives="Microsoft.Phone.Controls.Primitives" Obviously I have a reference in my project to the Windows Phone 8.1 dll Error 12 The name "PivotHeaderItem" does not exist in the namespace "Microsoft.Phone.Controls.Primitives". Error 4 PivotHeaderItem is not supported in a Windows Phone project.
  • Iris Classon
    Iris Classon about 9 years
    I'll take a look at this later tonight and update the answer with a 8.1 version :)
  • Iris Classon
    Iris Classon almost 9 years
    Sorry I forgot about this Enzo & Royston- you probably figured it out by, now but I've updated the answer now. Happy coding!
  • Sinaesthetic
    Sinaesthetic over 8 years
    Hey @IrisClasson - Thanks for the write up, but how do I move the headers to the bottom of the window instead of it being at the top?

Related