How to Style PivotItem Header

Question

I have an existing Pivot header template I am using, but it is not giving me the effect I need. I need the currently selected PivotItem to have a blue foreground and white b

Answer 1

@Teysz, I think that with Windows 10 UWP you better start from the default style for PivotItemHeader and make a copy of that in the ..Resources section of your XAML file. The default style cannot be inserted by Visual Studio 2015 so you have to get it yourself from: %ProgramFiles(x86)%\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.10240.0\Generic\generic.xaml I found this at http://blog.hompus.nl/2015/09/04/responsive-pivot-headers-in-universal-windows-platform-apps/

Answer 2

Change the <ContentPresenter> to a <TextBlock>

Like so

<Style x:Key="PivotHeaderItemStyle1" TargetType="Primitives:PivotHeaderItem">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Padding" Value="10,0,10,0"/>
    <Setter Property="Margin" Value="0"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Primitives:PivotHeaderItem">
                <Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="SelectionStates">
                            <VisualState x:Name="Unselected">
                                <Storyboard>
                                    <ColorAnimation Duration="0" Storyboard.TargetName="border_highlight" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="Transparent"/>
                                    <ColorAnimation  Duration="0" Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" To="Green"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Selected">
                                <Storyboard>
                                    <ColorAnimation  Duration="0:0:1" Storyboard.TargetName="border_highlight" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="PaleGreen"/>
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="contentPresenter"/>
                                    <ColorAnimation  Duration="0" Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" To="Blue"/>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Border x:Name="border_highlight" Background="{TemplateBinding Background}" >
                        <!--<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Opacity="{StaticResource PhonePivotUnselectedItemOpacity}"/>-->
                        <TextBlock x:Name="contentPresenter" Foreground="{TemplateBinding Foreground}" Text="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Opacity="{StaticResource PhonePivotUnselectedItemOpacity}"></TextBlock>
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Then you can animate the Foreground. Here's a screenshot of the above code. With Selected Color = Blue and Unselected Color = Green. You will need to add back in your background animation though.

---