在 UWP 应用程序中覆盖 Pivot 标题前景画笔（Win 10 RTM SDK）答案

【问题标题】：Overriding Pivot header foreground brushes in UWP app (Win 10 RTM SDK)在 UWP 应用程序中覆盖 Pivot 标题前景画笔（Win 10 RTM SDK）
【发布时间】：2015-10-26 04:26:10
【问题描述】：

我正在尝试覆盖 Pivot 标题前景主题画笔，但无论我做什么，UWP 应用都会忽略它。

需要明确的是，这个问题是关于 UWP Pivot 控件，而不是 Win (Phone) 8.1 的。我在 8.1 应用程序中使用了主题画笔覆盖方法，并且效果很好。但我似乎无法为 UWP Pivot 做同样的事情。

我在 generic.xaml 中查找了相应的画笔（以及在画笔 -> 系统画笔资源下的属性窗格中），它们是 UWP 应用程序中的 PivotHeaderForegroundSelectedBrush 和 PivotHeaderForegroundUnselectedBrush，并将它们添加到我在 app.xaml 中的资源字典中，但与其他系统画笔不同的是，由于某种原因，枢轴画笔不会被覆盖。

<SolidColorBrush x:Key="SystemControlForegroundAccentBrush" Color="Gray"/>
<SolidColorBrush x:Key="SystemControlBackgroundAccentBrush" Color="Gray"/>
<SolidColorBrush x:Key="SystemColorControlAccentBrush" Color="Gray"/>
<SolidColorBrush x:Key="PivotHeaderForegroundSelectedBrush" Color="Green" />
<SolidColorBrush x:Key="PivotHeaderForegroundUnselectedBrush" Color="Red"/>

我知道更改标题前景色的其他方法，但这可能涉及转换器或额外的代码，如果我能以干净的方式做到这一点，我宁愿不使用它。我尝试编辑默认的 Pivot 样式，但我没有看到可以为默认 Pivot 样式中的标题项添加/编辑 Foreground 属性的任何地方。

提前致谢！ :)

【问题讨论】：

标签： xaml windows-runtime win-universal-app windows-10 uwp

【解决方案1】：

有趣的是，PivotItemStyle 的Foreground 属性控制PivotItem 中内容的前景色，而不是它的标题。并且没有办法修改样式中header的颜色。

你或许可以找到对应的颜色资源，修改一下来达到你想要的效果，但是这里有一种更灵活更纯粹的xaml方式——

Pivot 控件实际上有一个HeaderTemplate，它允许您完全自定义您的PivotItem标题。请参阅以下代码示例，所有标题都应具有 Teal 颜色。

<Grid>
    <Pivot Title="Pivot">
        <Pivot.HeaderTemplate>
            <DataTemplate>
                <Grid>
                    <TextBlock Text="{Binding}" Foreground="Teal" />
                </Grid>
            </DataTemplate>
        </Pivot.HeaderTemplate>

        <PivotItem Header="My first header">
            <Grid/>
        </PivotItem>
    </Pivot>
</Grid>

更新

所以这里有一个更好的方法。

我在 Visual Studio 中使用了新的 Live Visual Tree 工具来帮助定位实际的标题元素。这是一个名为PivotHeaderItem 的控件。事实证明，所有样式都在此控件中定义。

然后我不得不去msdn 并获取此控件的完整样式（Blend 不起作用）。

正如您在样式中看到的那样，该控件有一个默认的 Foreground {ThemeResource SystemControlForegroundBaseMediumBrush} 并且在 视觉状态中，当 >状态转到Selected。我已将它们更改为 Red 和 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="Red" /> <!-- original 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}">
                    <Grid.Resources>
                        <Style x:Key="BaseContentPresenterStyle" TargetType="ContentPresenter">
                            <Setter Property="FontFamily" Value="Segoe UI" />
                            <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="Green" /> <!-- original 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>
                    </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>

有了这个，您现在应该能够完全自定义您的数据透视表头了！ :)

【讨论】：

谢谢贾斯汀的回答:)，但我已经知道那个方法了。我的问题在于所有标题都具有相同的颜色。我想为选定和未选定的标题使用不同的颜色（或者说是不透明度），就像常规的 Pivot 一样。 8.1 应用程序中最简单的方法是使用我在上面发布的方法，但如果我使用您建议的方法，我必须使用转换器或代码隐藏来更改标题项的 opacity.color。
@Abdousamad 哦，你是对的！让我考虑一下，然后回复你。
我不熟悉 Live Visual Tree 方法。谢谢！ :D
必须应用此样式的 PivotItemHeader 在哪里？
@ac-lab 这是一种无键样式，这意味着它需要放置在 App.xaml、资源字典或使用 Pivot 的页面中。

【解决方案2】：

您还可以将每个枢轴项目的标题设置为自己独特的颜色

<Pivot>
    <PivotItem>
        <PivotItem.Header>
            <PivotItemHeader Content="Header 1" Foreground="Magenta"/>
        </PivotItem.Header>
        <Grid>
            <!-- pivot item content here -->
        </Grid>
    </PivotItem>
    <PivotItem>
        <PivotItem.Header>
            <PivotItemHeader Content="Header 2" Foreground="Cyan"/>
        </PivotItem.Header>
        <Grid>
            <!-- pivot item content here -->
        </Grid>
    </PivotItem>
</Pivot>

【讨论】：