How do you change the Style of the PivotHeaderItem(s) within a Pivot

Question

I have looked at Apply PivotItemHeader style to PivotItem in UWP but I haven't been able to apply the suggestions to my code.

I'm trying to change the Style of the PivotHeaderItem(s) within a Pivot based on whether or not the device is Desktop or Mobile. I have 2 explicit styles in my Resource Dictionary.

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Test">

    <Style x:Key="PivotHeaderItemStyle1" TargetType="PivotHeaderItem">
    <Style x:Key="PivotHeaderItemStyle2" TargetType="PivotHeaderItem">

</ResourceDictionary>

My MainPage.xaml is:

    <Page
        x:Class="Test.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:Test"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">

        <Page.Resources>
            <ResourceDictionary Source="Dictionary1.xaml"/>
        </Page.Resources>

        <Grid>
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="DeviceStates">
                    <VisualState x:Name="Desktop">
                        <VisualState.StateTriggers>
                            <local:DeviceStateTrigger DeviceFamily="Windows.Desktop"/>
                        </VisualState.StateTriggers>
                        <VisualState.Setters>
 I don't know what to put here --->     <Setter Target="PivotHeaderItem1.Style" Value="{StaticResource PivotHeaderItemStyle1}"/>
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="Mobile">
                        <VisualState.StateTriggers>
                            <local:DeviceStateTrigger DeviceFamily="Windows.Mobile"/>
                        </VisualState.StateTriggers>
                        <VisualState.Setters>
 I don't know what to put here --->     <Setter Target="PivotHeaderItem1.Style" Value="{StaticResource PivotHeaderItemStyle2}"/>
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>

            <Pivot x:Name="rootPivot">
                <PivotItem x:Name="Pivot1" Header="Pivot 1"/>
                <PivotItem x:Name="Pivot2" Header="Pivot 2"/>
                <PivotItem x:Name="Pivot3" Header="Pivot 3"/>
            </Pivot>
        </Grid>
    </Page>

I've tried to put the code:

<PivotHeaderItem x:Name="PivotHeaderItem1"/>

within different parts of the Pivot code, but I only receive errors.

If I remove one of the styles from my Resource Dictionary and change the other style to implicit (remove the x:Key) the style is applied correctly and I receive no errors.

In short, I think my problem is that I don't know how to x:name a PivotHeaderItem.

Answer 1

UPDATE

To use the style inside pivot

<Style x:Key="headerItemStyle" TargetType="PivotHeaderItem">
....
</Style >
<Pivot x:Name="pivot">
            <Pivot.Resources>
                <Style TargetType="PivotHeaderItem" BasedOn="{StaticResource headerItemStyle}" />
            </Pivot.Resources>
...
</Pivot>

Here is How you do it inside PivotHeader's control template

In the below example In desktop view Pivot Header's background will be yellow where as in mobile it will be in green

 <Style TargetType="PivotHeaderItem">
            <Setter Property="FontSize" Value="{ThemeResource PivotHeaderItemFontSize}" />
            <Setter Property="FontFamily" Value="{ThemeResource PivotHeaderItemFontFamily}" />
            <Setter Property="FontWeight" Value="{ThemeResource PivotHeaderItemThemeFontWeight}" />
            <Setter Property="CharacterSpacing" Value="{ThemeResource PivotHeaderItemCharacterSpacing}" />
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseMediumBrush}" />
            <Setter Property="Padding" Value="{ThemeResource PivotHeaderItemMargin}" />
            <Setter Property="Height" Value="48" />
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Setter Property="IsTabStop" Value="False" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="PivotHeaderItem">
                        <Grid
                              x:Name="Grid"
                              Background="{TemplateBinding Background}">

                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="SelectionStates">
                                    <VisualStateGroup.Transitions>
                                        <VisualTransition From="Unselected" To="UnselectedLocked" GeneratedDuration="0:0:0.33" />
                                        <VisualTransition From="UnselectedLocked" To="Unselected" GeneratedDuration="0:0:0.33" />
                                    </VisualStateGroup.Transitions>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                               Storyboard.TargetProperty="Foreground" >
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Unselected" />
                                    <VisualState x:Name="UnselectedLocked">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="ContentPresenterTranslateTransform"
                                 Storyboard.TargetProperty="X"
                                 Duration="0" To="{ThemeResource PivotHeaderItemLockedTranslation}" />
                                            <DoubleAnimation Storyboard.TargetName="ContentPresenter"
                                 Storyboard.TargetProperty="(UIElement.Opacity)"
                                 Duration="0" To="0" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Selected">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                               Storyboard.TargetProperty="Foreground" >
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid"
                                               Storyboard.TargetProperty="Background" >
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="UnselectedPointerOver">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                               Storyboard.TargetProperty="Foreground" >
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseMediumHighBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid"
                                               Storyboard.TargetProperty="Background" >
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="SelectedPointerOver">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                Storyboard.TargetProperty="Foreground" >
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseMediumHighBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid"
                                               Storyboard.TargetProperty="Background" >
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="UnselectedPressed">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                               Storyboard.TargetProperty="Foreground" >
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseMediumHighBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid"
                                               Storyboard.TargetProperty="Background" >
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="SelectedPressed">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                               Storyboard.TargetProperty="Foreground" >
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseMediumHighBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid"
                                               Storyboard.TargetProperty="Background" >
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="WindowStates">
                                    <VisualState x:Name="WideState">
                                        <VisualState.StateTriggers>
                                            <AdaptiveTrigger MinWindowWidth="800" />
                                        </VisualState.StateTriggers>
                                        <VisualState.Setters>
                                            <Setter Target="ContentPresenter.Background" Value="LightYellow" />
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="NarrowState">
                                        <VisualState.StateTriggers>
                                            <AdaptiveTrigger MinWindowWidth="0" />
                                        </VisualState.StateTriggers>
                                        <VisualState.Setters>
                                            <Setter   Target="ContentPresenter.Background" Value="LightGreen" />
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <ContentPresenter
            x:Name="ContentPresenter"
            Content="{TemplateBinding Content}"
            ContentTemplate="{TemplateBinding ContentTemplate}"
            Margin="{TemplateBinding Padding}"
            FontSize="{TemplateBinding FontSize}"
            FontFamily="{TemplateBinding FontFamily}"
            FontWeight="{TemplateBinding FontWeight}"
            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
            VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                                <ContentPresenter.RenderTransform>
                                    <TranslateTransform x:Name="ContentPresenterTranslateTransform" />
                                </ContentPresenter.RenderTransform>
                            </ContentPresenter>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>