将 PivotItemHeader 样式应用于 UWP 中的 PivotItem答案

【问题标题】：Apply PivotItemHeader style to PivotItem in UWP将 PivotItemHeader 样式应用于 UWP 中的 PivotItem
【发布时间】：2016-02-25 08:43:01
【问题描述】：

我已经创建了一个 PivotItemHeader 样式，其中包含资源中的一个键，但不知道在哪里应用它，尽管如果我删除 Key 它将应用于所有 PivotItemHeader 但我不想这样做，我想应用这仅适用于选定的 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>

【问题讨论】：

样式可以应用在<PivotItem> <PivotItem.Header> <PivotHeaderItem Style="{StaticResource PivotHeaderItemInnserStyle}"> <TextBlock Text="Title 1"></TextBlock> </PivotHeaderItem> </PivotItem.Header> <TextBlock TextWrapping="Wrap" Text="Hello!" Width="300"></TextBlock> </PivotItem>。但是你想要什么效果？如果您希望选中的项目看起来与未选中的项目不同。它有一个方便的方法。
@JaydenGu 我有一个类似的问题。我希望选定的枢轴项目看起来不同。 XAML 怎么做。
@Ramya 与 Rahul 邮政编码一样，您可以设置 <VisualState x:Name="Selected"> 和 <VisualState x:Name="Unselected" > 不同的样式，可以使选定的枢轴项看起来与未选中的枢轴项不同。

标签： xaml win-universal-app

【解决方案1】：

我有一个可能的解决方案来实现这一点，

内部 Pivot 将具有资源，我们将在此处再次为 PivotHeaderItem 定义样式，该样式基于我们为内部枢轴定义的样式。

<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 是我们为内部枢轴标题项创建的样式。

【讨论】：