5

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.

Community
  • 1
  • 1
StephenR
  • 95
  • 6
  • What are you defining in PivotHeaderItemStyle1? Why am i asking is you have to define adaptive styles for pivot header inside its controltemplate. You can get default template in https://msdn.microsoft.com/en-us/library/windows/apps/mt299142.aspx – Archana Mar 28 '17 at 06:08
  • Yes, I know. Both of the styles are based off the default template. I just removed my new template code from this question because it is not relevant. Both my new styles work perfectly if they are implicit. I just need to know how to apply the new styles to the PivotHeaderItems in the Pivot. – StephenR Mar 28 '17 at 06:49
  • I ll update the answer to use the style inside pivot – Archana Mar 28 '17 at 08:28

1 Answers1

7

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>
Archana
  • 3,213
  • 1
  • 15
  • 21