覆盖 UWP 应用程序中的 Pivot 标题前景画笔(Win 10 RTM SDK) [英] Overriding Pivot header foreground brushes in UWP app (Win 10 RTM SDK)

问题描述

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

I'm trying to override the Pivot header foreground theme brushes, but no matter what I do the UWP app just ignores it.

需要说明的是，这个问题是关于 UWP Pivot 控件的，而不是 Win (Phone) 8.1 控件.我在 8.1 应用程序中使用了主题画笔覆盖方法，它运行良好.但我似乎无法为 UWP Pivot 做同样的事情.

Just to be clear, this question is about the UWP Pivot control, not the Win (Phone) 8.1 one. I've used the theme brush override method in a 8.1 app and it worked perfectly. But I can't seem to be able to do the same for a UWP Pivot.

我在 generic.xaml(以及在 Brushes -> System Brush Resources 下的 Properties 窗格中)查找了相应的画笔，它们是 UWP 应用程序中的 PivotHeaderForegroundSelectedBrush 和 PivotHeaderForegroundUnselectedBrush，并将它们添加到我在 app.xaml 中的资源字典中，但与其他系统画笔不同的是，Pivot 画笔不会出于某种原因被覆盖.

I looked for the respective brushes in generic.xaml (and in the Properties pane under Brushes -> System Brush Resources), which are PivotHeaderForegroundSelectedBrush and PivotHeaderForegroundUnselectedBrush in a UWP app, and added them to my resource dictionary in app.xaml, but unlike the other system brushes, the Pivot ones aren't overridden for some reason.

<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 属性的任何地方.

I know other ways to change the header foreground color, but that might involve converters or extra code behind, which I'd rather not use to be honest if i can do it in a clean way. I tried editing the default Pivot style, but I don't see anywhere where I can add/edit a Foreground property for the header items in the default Pivot style.

提前致谢！:)

推荐答案

有趣的是，PivotItemStyle 的 Foreground 属性控制了内容的前景色 在 PivotItem 中，而不是它的 header.并且无法在样式中修改 header 的颜色.

Interestingly, the Foreground property of the PivotItemStyle controls the foreground color of the content within the PivotItem, not the header of it. And there's no way to modify the color of the header within the style.

你或许可以找到对应的颜色资源并修改它们来达到你想要的效果，但这里有一个更灵活更纯的xaml方式-

You might be able to find the corresponding color resources and modify them to achieve what you want, but here's a more flexible and pure xaml way -

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

The Pivot control actually has a HeaderTemplate which allows you to fully customise your PivotItem headers. See the following code sample, all the headers should have the Teal color.

<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>

<小时>更新

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

So here is a better way.

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

I used the new Live Visual Tree tool in Visual Studio to help locate the actual header element. It's a control called PivotHeaderItem. So turns out, all the styling is defined within this control.

然后我不得不去 msdn 并抓住了完整的样式这个控件(混合不起作用).

I then had to go to msdn and grabbed the full style of this control (Blend didn't work).

正如您在样式中看到的，该控件具有 {ThemeResource SystemControlForegroundBaseMediumBrush} 的默认 Foreground 和 视觉状态，这Foreground 在 state 变为 Selected 时更改为 {ThemeResource SystemControlHighlightAltBaseHighBrush}.我已将它们更改为 Red 和 Green 以使它们更明显.

As you can see within the style, the control has a default Foreground of {ThemeResource SystemControlForegroundBaseMediumBrush} and within the visual states, this Foreground gets changed to {ThemeResource SystemControlHighlightAltBaseHighBrush} when the state goes to Selected. I've changed them to Red and Green to make them more obvious.

<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>

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

With this, you should now be able to fully customise your pivot headers! :)

这篇关于覆盖 UWP 应用程序中的 Pivot 标题前景画笔(Win 10 RTM SDK)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！