在 UWP 应用程序中覆盖 Pivot 标题前景画笔（Win 10 RTM SDK）
Posted
技术标签:
【中文标题】在 UWP 应用程序中覆盖 Pivot 标题前景画笔（Win 10 RTM SDK）【英文标题】：Overriding Pivot header foreground brushes in UWP app (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 属性的任何地方。
提前致谢！ :)
【问题讨论】：
【参考方案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>
【讨论】：
以上是关于在 UWP 应用程序中覆盖 Pivot 标题前景画笔（Win 10 RTM SDK）的主要内容，如果未能解决你的问题，请参考以下文章
使用 Contrl+(Shift)+Tab 在 Pivot Control 中循环浏览选项卡/标题？ (UWP)
如何在 UWP 中的 Pivot 中使所选枢轴的标题变为粗体？