12

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
  • 3,976
  • 15
  • 66
  • 130
  • I would suggest [this solution from 2012](http://www.visuallylocated.com/post/2012/05/23/Changing-the-background-color-of-your-pivot-headers.aspx), but looks like Iris has it covered – Shawn Kendrot Nov 21 '13 at 23:24

1 Answers1

33

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"
Community
  • 1
  • 1
Iris Classon
  • 5,752
  • 3
  • 33
  • 52
  • 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? – Matthew Jul 27 '13 at 21:44
  • Have a look at the image and code I added to the post, is it something like that you want to achieve? – Iris Classon Jul 27 '13 at 21:47
  • 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`. – Matthew Jul 27 '13 at 22:12
  • 1
    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: http://msdn.microsoft.com/en-us/library/aa468565.aspx – Iris Classon Jul 27 '13 at 22:29
  • Excellent. With a bit of tweaking I'm sure I can get what I Need. Love the pink hair. – Matthew Jul 27 '13 at 22:44
  • 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. – Matthew Jul 27 '13 at 22:52
  • Note that changes to HeaderTemplate don't always appear updated in the preview window until after you run the app. – Jedidja Jun 21 '14 at 23:22
  • I used this solution for a WP8 app but it doesn't work for 8.1. Any pointers? – Royston Yinkore Oct 07 '14 at 09:36
  • 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. – Enzo Contini Nov 28 '14 at 09:06
  • I'll take a look at this later tonight and update the answer with a 8.1 version :) – Iris Classon Nov 28 '14 at 15:50
  • Sorry I forgot about this Enzo & Royston- you probably figured it out by, now but I've updated the answer now. Happy coding! – Iris Classon Jan 02 '15 at 21:46
  • 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? – Sinaesthetic Aug 23 '15 at 05:37