Windows Phone 8.1 Pivot custom header style

Question

I'm aiming to mimic similar effect as seen here: http://www.visuallylocated.com/post/2012/05/23/Changing-the-background-color-of-your-pivot-headers.aspx . There are resources online describing how to do it, but all of them apply to Windows Phone 8. 8.1 update brought severe API changes, making the code useless.

So, how can I style pivot header? I found namespace Windows.UI.Xaml.Controls.Primitives, which includes class PivotHeaderPanel, which might be helpful in this situation, but I can't find a way to access this class from XAML. Or maybe there is another way?

I don't really think the 8 to 8.1 changes would effect style templates that much. Either way you should be able to dig around in the style templates as much as you want, right click->Edit additional templates-> find the title or header template, otherwise could just look at the defaults and pick out which part you want to manipulate. In other words I think the only real difference is now you you'd set a template for like 's content — Chris W., Aug 15 '14 at 14:59
I tried it. But for some reason, Blend only lets me add a blank template. And it's literally blank: inside DataTemplate there's only . This happens both in my project and in newly created Pivot app template. — eggplant, Aug 15 '14 at 15:34
Ah right, I haven't personally tinkered with it yet, but maybe now it's [ItemContainerStyle](http://msdn.microsoft.com/en-us/library/windows/apps/microsoft.phone.controls.primitives.pivotheaderscontrol.itemcontainerstyle(v=vs.105).aspx) for the pivot header control — Chris W., Aug 15 '14 at 15:45
Well, the thing is, I can define header like this: http://pastebin.com/32kmKc0H . But this way I can't reach the effect I showed in the link above. — eggplant, Aug 15 '14 at 15:56
[Windows.UI.Xaml.Controls.Primitives](http://msdn.microsoft.com/en-us/library/windows.ui.xaml.controls.primitives.aspx) -_- , progect Sirverlite or Runrime? http://c2n.me/iK7IeA — IceFog, Aug 15 '14 at 20:04
@IceFog, I have seen the page. I linked to it after all. My project uses Windows Runtime, not Silverlight. — eggplant, Aug 15 '14 at 20:13
http://stackoverflow.com/questions/25207197/pivot-item-header-wont-change-to-custom-font/25208407#25208407 my post — IceFog, Aug 15 '14 at 21:48
@IceFog, it doesn't work. Compiler complains that "primitives:" is not defined and that "PivotHeaderItem is not supported in Windows Phone project". — eggplant, Aug 16 '14 at 09:28
How exactly do you want to style the header? In the link you provided, the post simply talks about changing the background color of the headers. — Justin XL, Aug 16 '14 at 11:34
@eggplant there writes before code (without primitives:) http://c2n.me/iKgCkr — IceFog, Aug 16 '14 at 13:35

Justin XL · Accepted Answer · 2014-08-16T12:33:12.030

If you just want to change the background color of all the headers, this is how you can do it in Window Phone 8.1.

First, use Expression Blend to generate the default style of the Pivot control.

<Thickness x:Key="PivotPortraitThemePadding">19,38,0,0</Thickness>
<Thickness x:Key="PivotLandscapeThemePadding">19,25,0,0</Thickness>
<Style x:Key="CustomPivotStyle" TargetType="Pivot">
    <Setter Property="Margin" Value="0"/>
    <Setter Property="Padding" Value="0"/>
    <Setter Property="Foreground" Value="{ThemeResource PhoneForegroundBrush}"/>
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="ItemsPanel">
        <Setter.Value>
            <ItemsPanelTemplate>
                <Grid/>
            </ItemsPanelTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Pivot">
                <Grid x:Name="RootElement" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="Orientation">
                            <VisualState x:Name="Portrait">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="TitleContentControl">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotPortraitThemePadding}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Landscape">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="TitleContentControl">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotLandscapeThemePadding}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <ContentControl x:Name="TitleContentControl" ContentTemplate="{TemplateBinding TitleTemplate}" Content="{TemplateBinding Title}" Style="{StaticResource PivotTitleContentControlStyle}"/>
                    <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">
                            <PivotHeaderPanel x:Name="Header" Background="{TemplateBinding BorderBrush}">
                                <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>

Find this line below, the only change I have made to the default style is adding Background="{TemplateBinding BorderBrush}" to the PivotHeaderPanel which is the panel that hosts all the headers.

<PivotHeaderPanel x:Name="Header" Background="{TemplateBinding BorderBrush}">

The reason that I use TemplateBinding here is because doing this gives me the flexibility to change the headers background by specifying the BorderBush of the Pivot. As the BorderBrush is not used anywhere in the control, there won't be any side effect if we change it.

So, all you need to do in your Pivot is this.

<Pivot x:Uid="Pivot" Title="MY APPLICATION" x:Name="pivot" CommonNavigationTransitionInfo.IsStaggerElement="True" Style="{StaticResource CustomPivotStyle}" BorderBrush="{StaticResource PhoneAccentBrush}">

This is how they look now.

enter image description here

Hope this helps!

dBlisse · Answer 2 · 2014-08-16T10:35:36.000

2

So 8.1 killed how I used to do HeaderTemplates.

My solution now is to put a customized TextBlock or Control in the Header element of the PivotItem.

<Pivot>

    <PivotItem>
        <PivotItem.Header>
            <Grid Background="Red">
                <TextBlock Text="WHY DID YOU DO THIS MICROSOFT"/>
            </Grid>
        </PivotItem.Header>
    </PivotItem>
    ...
</Pivot>

edited Aug 16 '14 at 10:35

answered Aug 16 '14 at 00:11

dBlisse

801
5
13

yeah, I figured it out on my own before, but it looks just terrible. Out of curiosity, how are you trying to get answers internally? – eggplant Aug 16 '14 at 09:26
i work there (y) lots of pain at this time about a lot of the 8.1 api – dBlisse Aug 16 '14 at 10:36
1

I see. Has the API gotten any better since 8.1 Update 1? – eggplant Aug 16 '14 at 10:38
Haven't been able to upgrade :) errors edit: oh the api, no clue, not on that team – dBlisse Aug 16 '14 at 10:47

Windows Phone 8.1 Pivot custom header style

2 Answers2

Linked