在 UWP 中更改 PivotHeaderItem 样式？

Question

我想更改 Pivot 的 PivotHeaderItem 样式。所以，我用谷歌搜索并从一些博客中找到了一些代码。但是我不明白，修改后的 PivotHeaderItem 样式是如何分配给 Pivot 的。 他们只是将 PivotHeaderItem 样式放在 Page.Resources 中。

<Page.Resources>
    <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" Margin="10,0" 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" BasedOn="{StaticResource BaseContentPresenterStyle}" TargetType="ContentPresenter">
                                <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" GeneratedDuration="0:0:0.33" To="UnselectedLocked" />
                                    <VisualTransition From="UnselectedLocked" GeneratedDuration="0:0:0.33" To="Unselected" />
                                </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 Duration="0"
                                                         Storyboard.TargetName="ContentPresenterTranslateTransform"
                                                         Storyboard.TargetProperty="X"
                                                         To="{ThemeResource PivotHeaderItemLockedTranslation}" />
                                        <DoubleAnimation Duration="0"
                                                         Storyboard.TargetName="ContentPresenter"
                                                         Storyboard.TargetProperty="(UIElement.Opacity)"
                                                         To="0" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Selected">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="White" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Red" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Red" />
                                        </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>
                        </VisualStateManager.VisualStateGroups>
                        <Border x:Name="Border"
                                BorderBrush="Gray"
                                BorderThickness="2"
                                CornerRadius="20">
                            <ContentPresenter x:Name="ContentPresenter"
                                              Margin="{TemplateBinding Padding}"
                                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                              Content="{TemplateBinding Content}"
                                              ContentTemplate="{TemplateBinding ContentTemplate}"
                                              FontFamily="{TemplateBinding FontFamily}"
                                              FontSize="{TemplateBinding FontSize}"
                                              FontWeight="{TemplateBinding FontWeight}">
                                <ContentPresenter.RenderTransform>
                                    <TranslateTransform x:Name="ContentPresenterTranslateTransform" />
                                </ContentPresenter.RenderTransform>
                            </ContentPresenter>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Page.Resources>
<Grid>
    <Pivot x:Name="rootPivot" Title="PIVOT TITLE">
        <PivotItem Header="Pivot Item 1">
            <!--  Pivot content goes here  -->
            <TextBlock Text="Content of pivot item 1." />
        </PivotItem>
        <PivotItem Header="Pivot Item 2">
            <!--  Pivot content goes here  -->
            <TextBlock Text="Content of pivot item 2." />
        </PivotItem>
        <PivotItem Header="Pivot Item 3">
            <!--  Pivot content goes here  -->
            <TextBlock Text="Content of pivot item 3." />
        </PivotItem>
    </Pivot>
</Grid>

任何人解释一下， 中的样式如何自动分配给网格内的 Pivot 元素。

Answer 1

有两种方法可以将放置在资源中的样式应用于 一个控件。

1. 隐式。您只需为 Style 指定一个 TargetType。

2. 明确。您需要为 Style 指定一个 TargetType 和一个 x:Key 属性。之后，您还需要使用{StaticResource} 标记扩展 设置目标控件的Style property。在 {StaticResource} 标记扩展中，您可以使用您定义的 x:Key 属性引用样式。

如果样式包含 x:Key 属性，则只能通过将控件的 Style 属性设置为键控样式来将其应用于控件。相反，当编译 xaml 时，没有 x:Key 属性的样式会自动应用于其目标类型的每个控件，除非该控件具有显式样式设置。

更新：

要使样式仅适用于一个枢轴控件，您可以将样式放在Pivot.Resources 中。像下面的代码：

      <Pivot x:Name="rootPivot" Title="PIVOT TITLE" >
            <Pivot.Resources>
                <Style TargetType="PivotHeaderItem">
                    ......
                    ......
            </Pivot.Resources>

            <PivotItem Header="Pivot Item 1" >

                <!--  Pivot content goes here  -->
                <TextBlock Text="Content of pivot item 1." />
            </PivotItem>
            <PivotItem Header="Pivot Item 2">
                <!--  Pivot content goes here  -->
                <TextBlock Text="Content of pivot item 2." />
            </PivotItem>
            <PivotItem Header="Pivot Item 3">
                <!--  Pivot content goes here  -->
                <TextBlock Text="Content of pivot item 3." />
            </PivotItem>
        </Pivot>