`
lindexi-gd
  • 浏览: 139448 次
社区版块
存档分类
最新评论

win10 uwp 修改Pivot Header 颜色

 
阅读更多
<!--more-->

我们在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

知识共享许可协议
本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。欢迎转载、使用、重新发布,但务必保留文章署名林德熙(包含链接:http://blog.csdn.net/lindexi_gd ),不得用于商业目的,基于本文修改后的作品务必以相同的许可发布。如有任何疑问,请与我联系

<script type="text/javascript"> $(function () { $('pre.prettyprint code').each(function () { var lines = $(this).text().split('\n').length; var $numbering = $('<ul/>').addClass('pre-numbering').hide(); $(this).addClass('has-numbering').parent().append($numbering); for (i = 1; i <= lines; i++) { $numbering.append($('<li/>').text(i)); }; $numbering.fadeIn(1700); }); }); </script>
分享到:
评论

相关推荐

    Win10 UWP 开发教程 课程 资源

    Win10 UWP 开发教程 课程 资源 80课时 课程地址:http://blog.csdn.net/shanguuncle/article/details/78111649

    Win10 UWP应用代理工具

    全选设置之后UWP即可访问localhost,可以走代理。

    Win10下通过UWP刷新WIFI

    下面我们将深入探讨如何在Win10下通过UWP实现这些功能。 首先,我们需要了解UWP(Universal Windows Platform)是微软为Windows 10推出的一种跨设备的应用程序开发框架。它允许开发者编写一次代码,就能在各种...

    win10 uwp 轻量级 MVVM 框架入门 2.1.5.3199 例子

    总结来说,"win10 uwp 轻量级 MVVM 框架入门 2.1.5.3199 例子"提供了一个实际操作的平台,让开发者学习如何在UWP环境中利用MVVM模式进行开发。通过分析和实践这个框架,你将能够更好地理解MVVM的工作原理,以及如何...

    C#实现win10 uwp 右击浮出窗在点击位置

    在Windows 10 UWP应用开发中,常常需要创建一种用户友好的交互方式,即当用户右键点击某个元素时,能在一个特定的位置显示一个浮出菜单(MenuFlyout)。本篇文章将详细介绍如何使用C#实现这样的功能,使得MenuFlyout...

    win10 uwp 使用 asp dotnet core 做图床服务器客户端

    在本文中,我们将探讨如何利用Windows 10的UWP(通用Windows平台)应用程序与ASP.NET Core构建一个图床服务器的客户端。这是一个涉及到跨平台开发和云端图像存储管理的项目,旨在提供一种高效且灵活的方式来上传和...

    win10 moblie uwp qq5.6.1150.1000

    win10 moblie uwp qq5.6.1150.1000主程序,不含依赖程序

    win10 moblie uwp 越飞阅读1.4.68.0

    win10 moblie uwp 越飞阅读1.4.68.0主程序,不含依赖程序

    lindexi#lindexi#2020-10-28-win10-uwp-字符文本转语音声音文件方法1

    title: "win10 uwp 字符文本转语音声音文件方法"在 UWP 中,支持将传入的字符串文本内容转换为音频语音,可以将这个语音声音通过 MediaEl

    WindowsStore_LTSC2019,LTSC 自动恢复 win10 应用商店

    但是LTSB/C也没了应用商店和UWP运行环境.,LTSC自动恢复win10应用商店,应用商店也是Win10的一大特色! Win10的应用商店也有一些优秀的应用可以代替臃肿的桌面程序. 使用该工具即可在 Windows10 LTSC(2019,1809) 上...

    lindexi#lindexi.github.io#win10 uwp 使用 AppCenter 自动构建1

    首先打开 使用微软的账号或 github 账号登陆点击 add new 添加一个 UWP 程序,需要写出 app 的

    WindowsStore_LTSC2019,LTSC自动恢复win10应用商店

    但是LTSB/C也没了应用商店和UWP运行环境.,LTSC自动恢复win10应用商店,应用商店也是Win10的一大特色! Win10的应用商店也有一些优秀的应用可以代替臃肿的桌面程序. 使用该工具即可在 Windows10 LTSC(2019,1809) 上安装...

    TabbedPivot:UWP自定义Pivot控件,带有类似标签的标头

    &lt; PivotItem&gt;&lt; PivotHeader xss=removed xss=removed&gt;&lt;/ PivotItem&gt; 标签的位置可以更改,以便项目显示在页面底部内容的下方。 如果要在底部显示标题,请签出。 #截屏 #作者的 #执照TabbedPivot在MIT许可下可用...

    lindexi#lindexi.github.io#win10 uwp 异步转同步1

    如果需要反过来,把同步转异步,可以使用 同步方法转异步写你的代码使用Task.Wait 时需要小心死锁不会出现死锁的代码使用Task.Delay等待即使使用方法

    lindexi#lindexi#2019-09-02-win10-uwp-随着数字变化颜色控件1

    我朋友在做一个控件,是显示异常,那么异常多就变为颜色,大概就是下面的图,很简单首先是一个Ellipse,然后把他的颜色绑定到Int,需要一个转换,UWP的转换和

    Sound Blaster Connect的uwp版独立安装包

    此安装包为win10的uwp版应用软件Sound Blaster Connect,有需要的朋友可以去下载下来

    Uwp中的换肤

    3. **颜色主题**:UWP提供了一套系统颜色,如PrimaryColor、SecondaryColor等,开发者可以通过修改这些颜色值实现换肤。同时,也可以自定义颜色资源,创建个性化的颜色主题。 4. **数据绑定与依赖属性**:为了实现...

    uwp开发-demoHelloworld源码

    【描述】提到的"一个uwp开发源码,可以移植到一切win10系统"意味着该项目遵循了UWP的跨平台特性,使得开发者能够在不同类型的Windows 10设备上部署和运行同一套代码。UWP是微软为了统一Windows生态而推出的新开发...

    win10应用商店uwp安装包

    win10应用商店安装包,Microsoft.WindowsStore_11804.1001.913.0_neutral_~_8wekyb3d8bbwe,可用于不带应用商店的安装

    快捷将UWP应用添加到环回免除列表以使用代理加速访问.zip

    在IT行业中,UWP(Universal Windows Platform)应用是微软为Windows 10及更高版本操作系统设计的一种现代化应用程序框架。这些应用程序具有跨设备兼容性,并且能够利用Windows平台的各种特性和功能。然而,当涉及到...

Global site tag (gtag.js) - Google Analytics