覆盖UWP应用程序中的Pivot标题前景画笔(Win 10 RTM SDK)

时间:2015-08-03 22:37:19

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

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

为了清楚起见,这个问题是关于UWP Pivot控件,而不是Win(Phone)8.1。我在8.1应用程序中使用了主题画笔覆盖方法,它完美地运行。但我似乎无法为UWP Pivot做同样的事情。

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

<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样式,但我没有看到任何可以为默认数据透视表样式中的标题项添加/编辑Foreground属性的地方。

提前致谢! :)

2 个答案:

答案 0 :(得分:30)

有趣的是,Foreground的{​​{1}}属性控制着PivotItemStyle内容的前景色,而不是标题它。并且无法修改样式中标题的颜色。

您可能能够找到相应的颜色资源并对其进行修改以达到您想要的效果,但这是一种更灵活,更纯粹的xaml方式 -

PivotItem控件实际上有一个Pivot,可让您完全自定义HeaderTemplate 标题。请参阅以下代码示例,所有标题应具有 Teal 颜色。

PivotItem

<小时/> 的更新

所以这是一个更好的方法。

我在 Visual Studio 中使用了新的 Live Visual Tree 工具来帮助找到实际的标题元素。它是一个名为<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> 的控件。事实证明,所有样式都在此控件中定义。

然后我不得不去msdn并抓住这个控件的完整风格(Blend没有工作)。

正如您在样式中看到的那样,该控件的默认PivotHeaderItemForeground,并且在可视状态中,此{ThemeResource SystemControlForegroundBaseMediumBrush}更改为{当状态转到Foreground时{1}}。我已将其更改为{ThemeResource SystemControlHighlightAltBaseHighBrush}Selected,以使其更加明显。

Red

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

答案 1 :(得分:0)

您还可以将每个枢纽项目的标题设置为自己的唯一颜色

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