2018-8-10-win10-uwp-修改Pivot-Header-颜色

title	author	date	CreateTime	categories
win10 uwp 修改Pivot Header 颜色	lindexi	2018-08-10 19:17:19 +0800	2018-2-13 17:23:3 +0800	Win10 UWP

我们在xaml创建一个Pivot

        <Pivot Grid.Row="1">

            <PivotItem Header="lindexi"></PivotItem>

            <PivotItem Header="CSDN"></PivotItem>

        </Pivot>

这样的Header是默认颜色

我们想修改颜色，可以使用

    <Pivot.HeaderTemplate>

        <DataTemplate>

            <TextBlock Text="{Binding}" Foreground="Cyan" FontSize="40" />

        </DataTemplate>

    </Pivot.HeaderTemplate>

参见：
http://stackoverflow.com/questions/31797875/overriding-pivot-header-foreground-brushes-in-uwp-app-win-10-rtm-sdk

但是如果我们要修改多的Pivot，使用模板其实还不能修改不选中的Pivot Header的颜色

我写了一个Style，可以直接复制到需要使用Pivot的Grid资源

        <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="{StaticResource PivotHeaderForegroundUnselectedBrush}" />

            <!-- 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="{StaticResource PivotHeaderForegroundSelectedBrush}" />

                                            </ObjectAnimationUsingKeyFrames>

                                        </Storyboard>

                                    </VisualState>

                                    <VisualState x:Name="Unselected" >

                                        <Storyboard>

                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"

                                                                           Storyboard.TargetProperty="Foreground">

                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PivotHeaderForegroundUnselectedBrush}" />

                                            </ObjectAnimationUsingKeyFrames>

                                        </Storyboard>

                                    </VisualState>

                                    <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 PivotHeaderSelectedForegroundBrush}" />

                                                <!-- 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="{StaticResource PivotHeaderUnselectedPointerOverForegroundBrush}" />

                                            </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="{StaticResource PivotHeaderSelectedPointerOverForegroundBrush}" />

                                            </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="{StaticResource PivotHeaderUnselectedPressedForegroundBrush}" />

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

接着在style的前面写

       <SolidColorBrush x:Key="PivotHeaderSelectedForegroundBrush" Color="BurlyWood"></SolidColorBrush>

        <SolidColorBrush x:Key="PivotHeaderUnselectedPressedForegroundBrush" Color="Brown"></SolidColorBrush>

        <SolidColorBrush x:Key="PivotHeaderForegroundUnselectedBrush" Color="Cyan" />

        <SolidColorBrush x:Key="PivotHeaderUnselectedPointerOverForegroundBrush" Color="BurlyWood"></SolidColorBrush>

        <SolidColorBrush x:Key="PivotHeaderSelectedPointerOverForegroundBrush" Color="BurlyWood"></SolidColorBrush>

PivotHeaderSelectedForegroundBrush 就是PivotHeader 被选择的颜色

PivotHeaderUnselectedPressedForegroundBrush 是PivotHeader 不被选择的颜色

PivotHeaderUnselectedPointerOverForegroundBrush 是鼠标移到没被选择的PivotHeader 上的颜色

PivotHeaderSelectedPointerOverForegroundBrush 是鼠标移到被选择的PivotHeader 上的颜色

如果希望修改其他颜色，请自己去看style可以修改的颜色，如果遇到问题，欢迎讨论。

代码 https://github.com/lindexi/UWP/tree/master/uwp/src/PivoHeader

2018-8-10-win10-uwp-修改Pivot-Header-颜色的更多相关文章

win10 uwp 修改Pivot Header 颜色
我们在xaml创建一个Pivot <Pivot Grid.Row="1"> <PivotItem Header="lindexi">&l ...
win10 uwp 修改CalendarDatePicker图标颜色
CalendarDatePicker 是一个好用的东西,但是我发现想要修改他右边的那个图标,显示日历的图标颜色,没有这个选项. 如果不知道我说的是哪个,请看下面的图. 左边颜色变化的就是我们要修改的图 ...
win10 uwp 随着数字变化颜色控件
我朋友在做一个控件,是显示异常,那么异常多就变为颜色,大概就是下面的图,很简单首先是一个Ellipse,然后把他的颜色绑定到Int,需要一个转换,UWP的转换和WPF差不多,因为我现在还不会转换,就 ...
win10 uwp 视差效果
本文翻译:http://jamescroft.co.uk/blog/uwp/playing-with-scrolling-parallax-effects-on-ui-elements-in-wind ...
win10 uwp 商业游戏
本文告诉大家去做一个商业游戏,游戏很简单,几乎没有什么技术游戏的开始,需要添加框架库,于是引用我自己写的库. 首先是创建一个启动页面,这个页面是显示启动的. 在显示启动的时候,是需要加载游戏需要使用 ...
win10 uwp 使用 Microsoft.Graph 发送邮件
在 2018 年 10 月 13 号参加了张队长的 Office 365 训练营学习如何开发 Office 365 插件和 OAuth 2.0 开发,于是我就使用 UWP 尝试使用 Micros ...
win10 uwp 列表模板选择器
本文主要讲ListView等列表可以根据内容不同,使用不同模板的列表模板选择器,DataTemplateSelector. 如果在 UWP 需要定义某些列的显示和其他列不同,或者某些行的显示和其他行不 ...
win10 uwp 获得元素绝对坐标
有时候需要获得一个元素,相对窗口的坐标,在修改他的位置可以使用. 那么 UWP 如何获得元素坐标? 我提供了一个方法,可以获得元素的坐标. 首先需要获得元素,如果没有获得元素,那么如何得到他的坐标? ...
win10 uwp 毛玻璃
毛玻璃在UWP很简单,不会和WPF那样伤性能. 本文告诉大家,如何在 UWP 使用 win2d 做毛玻璃. 毛玻璃可以使用 win2D 方法,也可以使用 Compositor . 使用 win2d 得 ...
win10 uwp 读取保存WriteableBitmap 、BitmapImage
我们在UWP,经常使用的图片,数据结构就是 BitmapImage 和 WriteableBitmap.关于 BitmapImage 和 WriteableBitmap 区别,我就不在这里说.主要说的 ...

随机推荐

java.lang.StackOverflowError 解决办法
java.lang.StackOverflowError com.sxt.servlet.servlet1.LoginServlet.doGet(LoginServlet.java:15) com.s ...
在oracle中操作数据——使用特点的格式插入日期 sql函数的使用——日期函数
日期函数用于处理date类型的数据,默认情况下的日期格式是dd-mm-yy即12-7月-78 (1)sysdate:该函数返回系统时间 (2)add_months(d,n) (3)last_day(d ...
php 练习 1
php5 echo 和 print 语句在PHP 中, 有两种基本的输出方法:echo 和print . 在本教程中,我们几乎在每个例子中都会用到echo和print.因此,本节为您讲解更多关于这两 ...
Python基础：10函数参数
局部命名空间为各个参数值创建了一个名字,一旦函数开始执行,就能访问这个名字了. 在函数调用时,有非关键字参数和关键字参数之分,非关键字参数必须位于关键字参数之前. 在函数定义时,严格的顺序是:位置参数 ...
Android Joda-time工具类
Joda-Time提供了一组Java类包用于处理包括ISO8601标准在内的date和time.可以利用它把JDK Date和Calendar类完全替换掉,而且仍然能够提供很好的集成. Joda- ...
Hive高阶聚合函数 GROUPING SETS、Cube、Rollup
-- GROUPING SETS作为GROUP BY的子句,允许开发人员在GROUP BY语句后面指定多个统计选项,可以简单理解为多条group by语句通过union all把查询结果聚合起来结合起 ...
一文告诉你Adam、AdamW、Amsgrad区别和联系重点
**序言:**Adam自2014年出现之后,一直是受人追捧的参数训练神器,但最近越来越多的文章指出:Adam存在很多问题,效果甚至没有简单的SGD + Momentum好.因此,出现了很多改进的版本, ...
Element-ui学习笔记1
1.col,row布局注意事项 el-row el-col gutter就是css,span的时候宽度是按boder-box来计算. 将 type 属性赋值为 'flex',可以启用 flex 布局, ...
H3C ISDN BRI和PRI
supersockets和 AppSession，AppServer 配合工作
现在, 你已经有了 RequestInfo, ReceiveFilter 和 ReceiveFilterFactory, 但是你还没有正式使用它们. 如果你想让他们在你的程序里面可用, 你需要定义你们 ...

2018-8-10-win10-uwp-修改Pivot-Header-颜色

2018-8-10-win10-uwp-修改Pivot-Header-颜色的更多相关文章

随机推荐

热门专题