Apply PivotItemHeader style to PivotItem in UWP

2019-07-14 20:54发布

问题:

I have created a PivotItemHeader style with a key in resources but don't know where to apply this although if I remove Key it will be applied to all the PivotItemHeader but I don't want to do that, I want to apply this only for selected Pivot.

<Style TargetType="PivotHeaderItem" x:Key"PivotHeaderItemInnserStyle">
                        <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="{StaticResource PivotHeaderItemSelectedBackgroundBrush}" />
                        <Setter Property="Foreground" Value="#FFEAE8E8" />
                        <Setter Property="Padding" Value="0" />
                        <Setter Property="Margin" Value="0" />
                        <Setter Property="Height" Value="48" />
                        <Setter Property="VerticalContentAlignment" Value="Stretch" />
                        <Setter Property="IsTabStop" Value="False" />
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="PivotHeaderItem">
                                    <Grid
                    x:Name="Grid"
                    Background="{TemplateBinding Background}">
                                        <Grid.Resources>
                                            <Style x:Key="BaseContentPresenterStyle" TargetType="ContentPresenter">
                                                <Setter Property="FontFamily" Value="XamlAutoFontFamily"/>
                                                <Setter Property="FontWeight" Value="SemiBold"/>
                                                <Setter Property="FontSize" Value="15"/>
                                                <Setter Property="TextWrapping" Value="Wrap"/>
                                                <Setter Property="LineStackingStrategy" Value="MaxHeight"/>
                                                <Setter Property="TextLineBounds" Value="Full"/>
                                                <Setter Property="OpticalMarginAlignment" Value="TrimSideBearings"/>
                                            </Style>
                                            <Style x:Key="BodyContentPresenterStyle" TargetType="ContentPresenter" BasedOn="{StaticResource BaseContentPresenterStyle}">
                                                <Setter Property="FontFamily" Value="{ThemeResource PivotHeaderItemFontFamily}" />
                                                <Setter Property="FontWeight" Value="{ThemeResource PivotHeaderItemThemeFontWeight}"/>
                                                <Setter Property="FontSize" Value="{ThemeResource PivotHeaderItemFontSize}"/>
                                            </Style>
                                        </Grid.Resources>
                                        <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="{StaticResource PivotHeaderItemHoverForegroundBrush}" />
                                                        </ObjectAnimationUsingKeyFrames>
                                                    </Storyboard>
                                                </VisualState>
                                                <VisualState x:Name="UnselectedPointerOver">
                                                    <Storyboard>
                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                   Storyboard.TargetProperty="Foreground" >
                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PivotHeaderItemHoverForegroundBrush}" />
                                                        </ObjectAnimationUsingKeyFrames>
                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid"
                                                                   Storyboard.TargetProperty="Background" >
                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
                                                        </ObjectAnimationUsingKeyFrames>
                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="headerItemBorder"
                                                                   Storyboard.TargetProperty="Background" >
                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PivotHeaderItemHoverBackgroundBrush}" />
                                                        </ObjectAnimationUsingKeyFrames>
                                                    </Storyboard>
                                                </VisualState>
                                                <VisualState x:Name="SelectedPointerOver">
                                                    <Storyboard>
                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                    Storyboard.TargetProperty="Foreground" >
                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PivotHeaderItemHoverForegroundBrush}" />
                                                        </ObjectAnimationUsingKeyFrames>
                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid"
                                                                   Storyboard.TargetProperty="Background" >
                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
                                                        </ObjectAnimationUsingKeyFrames>
                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="headerItemBorder"
                                                                   Storyboard.TargetProperty="Background" >
                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PivotHeaderItemHoverBackgroundBrush}" />
                                                        </ObjectAnimationUsingKeyFrames>
                                                    </Storyboard>
                                                </VisualState>
                                                <VisualState x:Name="UnselectedPressed">
                                                    <Storyboard>
                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                   Storyboard.TargetProperty="Foreground" >
                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PivotHeaderItemUnSelectedPressedForegroundBrush}" />
                                                        </ObjectAnimationUsingKeyFrames>
                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid"
                                                                   Storyboard.TargetProperty="Background" >
                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PivotHeaderItemUnSelectedPressedBackgroundBrush}" />
                                                        </ObjectAnimationUsingKeyFrames>
                                                    </Storyboard>
                                                </VisualState>
                                                <VisualState x:Name="SelectedPressed">
                                                    <Storyboard>
                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                   Storyboard.TargetProperty="Foreground" >
                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PivotHeaderItemSelectedPressedForegroundBrush}" />
                                                        </ObjectAnimationUsingKeyFrames>
                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid"
                                                                   Storyboard.TargetProperty="Background" >
                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PivotHeaderItemSelectedPressedBackgroundBrush}" />
                                                        </ObjectAnimationUsingKeyFrames>
                                                    </Storyboard>
                                                </VisualState>
                                            </VisualStateGroup>
                                        </VisualStateManager.VisualStateGroups>
                                        <!--Content="{TemplateBinding Content}"-->
                                        <ContentPresenter
                        x:Name="ContentPresenter"
                        Foreground="Gray"
                        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>
                                            <Border Name="headerItemBorder" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Padding="16,2">
                                                <TextBlock Text="{TemplateBinding Content}" FontFamily="{StaticResource PivotHeaderItemFontFamily}" FontSize="{StaticResource PivotHeaderItemFontSize}"
                                           />
                                            </Border>
                                        </ContentPresenter>
                                    </Grid>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>

回答1:

Well I got one possible solution to achieve this,

The inner Pivot will have resources and there we'll define the style again for PivotHeaderItem which is based on the style of our defined style for inner pivot.

<Pivot>
      <PivotItem Header="SCAN" />
      <PivotItem Header="DEMOGRAPHICS" />
      <PivotItem Header="FINGERPRINTS">
            <Pivot>
                <Pivot.Resources>
                    <Style TargetType="PivotHeaderItem" BasedOn="{StaticResource PivotHeaderItemInnerPivotStyle}" />
                </Pivot.Resources>
                <PivotItem Header="Sub Pi 1" />
                <PivotItem Header="Sub Pi 2" />
                <PivotItem Header="Sub Pi 3" />
            </Pivot>
        </PivotItem>
        <PivotItem Header="PALMPRINTS"/>

PivotHeaderItemInnerPivotStyle is the style we have created for inner pivot header item.