Windows Phone 8.1 - Pivot Header

Question

i am using pivot control, and i want to change the forground color of headers!

but somehow i am not able to do it with pretty easy guess !

 <Pivot x:Name="pivot1">
                <PivotItem x:Name="pivot1item1" Header="Profile" Style="{StaticResource PuzzlePivotItemHeader}">
                    <Controls:Profile />
                </PivotItem>
                <PivotItem x:Name="pivot1item2" Header="Filters" Style="{StaticResource PuzzlePivotItemHeader}">
                    <Controls:Filters />
                </PivotItem>
        </Pivot>

and style is :

<Style x:Key="PuzzlePivotItemHeader" TargetType="PivotItem">
        <Setter Property="Foreground" Value="White"/>
    </Style>

i just want the header fontsize change and color as white !!

how could it possible?

Answer 1

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

Answer 2

Here's how you'd change the foreground color and font size of the pivot item headers for all pivot controls in your app (I'm not sure how to do it per pivot control It turns out it is a bug; see this thread):

In App.xaml override these resources:

<Application.Resources>
    <SolidColorBrush x:Key="PivotHeaderForegroundSelectedBrush" Color="Red" />
    <SolidColorBrush x:Key="PivotHeaderForegroundUnselectedBrush" Color="Cyan" />
    <x:Double x:Key="PivotHeaderItemFontSize">40</x:Double>
</Application.Resources>

---

If you don't care about having different colors for the selected and unselected pivot items, you can style the headers on a per-pivot basis like this instead:

<Pivot>
    <Pivot.HeaderTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding}" Foreground="Cyan" FontSize="40" />
        </DataTemplate>
    </Pivot.HeaderTemplate>

    <PivotItem Header="one" />
    <PivotItem Header="two" />
    <PivotItem Header="three" />
    <PivotItem Header="four" />
    <PivotItem Header="five" />
    <PivotItem Header="six" />
</Pivot>