AI 助理
备案控制台
开发者社区 云计算 文章 正文

你听我说-HandyControl调整样式色系

2023-08-11 272
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 你听我说-HandyControl调整样式色系

问题场景

HandyControl中自带的色系想要自己自定义如何操作和处理？

加入个人自定义的色系资源，应该如何操作更符合HandyControl风格？

问题分析

每次选择演示Demo中的主题皮肤，能够对案例进行整理的样式色系调整，实际上就是每次都替换了一套对应的色系资源文件，由于资源中使用的是动态资源方式DynamicResource进行添加，并未更改对应的资源的键名称

HandyControl资源如下：

  • [色系]https://handyorg.gitee.io/handycontrol/basic_xaml/colors
  • [画刷]https://handyorg.gitee.io/handycontrol/basic_xaml/brushes/

案例换肤

默认

暗色

紫色

资源引用

以案例项目App.xaml作为系统资源入口，存在如下关系

App.xaml：

<Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary>
                    <ResourceDictionary.MergedDictionaries>
                        <ResourceDictionary Source="pack://application:,,,/HandyControl;component/Themes/SkinDefault.xaml"/>
                        <ResourceDictionary Source="Resources/Themes/SkinDefault.xaml"/>
                    </ResourceDictionary.MergedDictionaries>
                </ResourceDictionary>
                <ResourceDictionary>
                    <ResourceDictionary.MergedDictionaries>
                        <ResourceDictionary Source="pack://application:,,,/HandyControl;component/Themes/Theme.xaml"/>
                        <ResourceDictionary Source="Resources/Themes/Theme.xaml"/>
                    </ResourceDictionary.MergedDictionaries>
                </ResourceDictionary>
            </ResourceDictionary.MergedDictionaries>
            ......省略无关项.......
        </ResourceDictionary>
    </Application.Resources>

图解关系

资源组成

主要分为Theme.xaml和SkinXXX.xaml两类资源字典文件，属于HandyControl_Shared是HandyControl库自带的相关色系和样式资源，属于本地案例HandyControlDemo_Shared的Theme.xaml以及SkinXXX.xaml为类库样式的扩展和色系自定义，同时也是用户自定义样式，总之一句话就是UI库没有的，当前项目需要，就添加到本地

色系与皮肤组

每一个皮肤组，就是一套完整的运行项目皮肤，至少有一个Theme.xaml和SkinXXX.xaml组成，其中，画刷间接性依赖不同SkinXXX.xaml中对应的ColorsXXX.xaml

解决方案

上图的主要目的是表明，色系作为资源，在保证是DynamicResource资源加载方式时，Key不变，替换掉对应资源内容值，就能够实现样式的改变，HandyControl库中的资源改不了，那控件自带的色系无法变更，本地资源可以变更，在保证Key值一致情况下，本地加载实际资源组，达到替换皮肤色系的目的

替换默认皮肤

HandyControl类库的基础教程中，默认使用的是SkinDefault.xaml的皮肤色系，如果要选择其他色系，可以通过修改App.xaml中的需要合并的资源

创建项目

本地创建一个案例项目名叫blog_hc_style，引用HandyControl的Nuget包，此处版本为3.2.0，基础配置操作请阅读官方文档[快速开始]https://handyorg.gitee.io/handycontrol/quick_start/

App.xaml

<Application x:Class="blog_hc_style.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:blog_hc_style"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary>
                    <ResourceDictionary.MergedDictionaries>
                        <ResourceDictionary Source="pack://application:,,,/HandyControl;component/Themes/SkinDefault.xaml"/>
                        <ResourceDictionary Source="pack://application:,,,/HandyControl;component/Themes/Theme.xaml"/>
                    </ResourceDictionary.MergedDictionaries>
                </ResourceDictionary>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

MainWindow.xaml

<Window x:Class="blog_hc_style.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:blog_hc_style"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <TabControl>
            <TabItem Header="测试01">
            </TabItem>
            <TabItem Header="测试02">
            </TabItem>
            <TabItem Header="测试03">
            </TabItem>
            <TabItem Header="测试04">
            </TabItem>
        </TabControl>
    </Grid>
</Window>

运行效果

修改资源

如果只是为了替换默认色系，可以直接替换App.xaml中上文提过的SkinXXX.xaml，即可

App.xaml，如下，将色系修改为HandyControl库中自带的Dark色系

<Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary>
                    <ResourceDictionary.MergedDictionaries>
                        <!--合并Dark为目标色系-->
                        <ResourceDictionary Source="pack://application:,,,/HandyControl;component/Themes/SkinDark.xaml"/>
                        <!--替换原始色系-->
                        <!--<ResourceDictionary Source="pack://application:,,,/HandyControl;component/Themes/SkinDefault.xaml"/>-->
                        <ResourceDictionary Source="pack://application:,,,/HandyControl;component/Themes/Theme.xaml"/>
                    </ResourceDictionary.MergedDictionaries>
                </ResourceDictionary>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>

运行效果

自定义本地色系

自定义本地色系时，需要将源码Colors.xaml中的所有内容拷贝到本地项目内的资源样式中文件中，主要 目的是为了保持，色系和皮肤的结构的统一性，便于日后维护，自定义本地色系依旧是基于上述案例项目进行本地改造

调整色值

新建ColorsLocal.xaml以及SkinLocal.xaml，ColorsLocal.xaml用于存放本地颜色值，SkinLocal.xaml用于作为中间层进行字典合并，同时保证目录结构的统一性

复制HandyControl源码HandyControl_Shared中的Colors.xaml，每个颜色样式的的说明可查看[官方文档-颜色]https://handyorg.gitee.io/handycontrol/basic_xaml/colors/，依据用途调整对应的色值，以下是笔者自己调整之后的样式

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:system="clr-namespace:System;assembly=mscorlib">
    <Color x:Key="LightPrimaryColor">#8b7fb6</Color>
    <Color x:Key="PrimaryColor">#5d5386</Color>
    <Color x:Key="DarkPrimaryColor">#312a59</Color>
    <Color x:Key="LightDangerColor">#ff6b70</Color>
    <Color x:Key="DangerColor">#db3340</Color>
    <Color x:Key="DarkDangerColor">#db3340</Color>
    <Color x:Key="LightWarningColor">#ffe158</Color>
    <Color x:Key="WarningColor">#e9af20</Color>
    <Color x:Key="DarkWarningColor">#e9af20</Color>
    <Color x:Key="LightInfoColor">#60d4ea</Color>
    <Color x:Key="InfoColor">#00bcd4</Color>
    <Color x:Key="DarkInfoColor">#00bcd4</Color>
    <Color x:Key="LightSuccessColor">#64da73</Color>
    <Color x:Key="SuccessColor">#2db84d</Color>
    <Color x:Key="DarkSuccessColor">#2db84d</Color>
    <Color x:Key="PrimaryTextColor">#212121</Color>
    <Color x:Key="SecondaryTextColor">#757575</Color>
    <Color x:Key="ThirdlyTextColor">#bdbdbd</Color>
    <Color x:Key="ReverseTextColor">#212121</Color>
    <Color x:Key="TextIconColor">White</Color>
    <Color x:Key="BorderColor">#e0e0e0</Color>
    <Color x:Key="SecondaryBorderColor">#e0e0e0</Color>
    <Color x:Key="BackgroundColor">#f1f2f7</Color>
    <Color x:Key="RegionColor">#ffffff</Color>
    <Color x:Key="SecondaryRegionColor">#f9f9f9</Color>
    <Color x:Key="ThirdlyRegionColor">White</Color>
    <Color x:Key="TitleColor">#326cf3</Color>
    <Color x:Key="SecondaryTitleColor">#326cf3</Color>
    <Color x:Key="DefaultColor">#f9f9f9</Color>
    <Color x:Key="DarkDefaultColor">#2c304d</Color>
    <Color x:Key="AccentColor">#f8491e</Color>
    <Color x:Key="DarkAccentColor">#f8491e</Color>
    <Color x:Key="DarkMaskColor">#20000000</Color>
    <Color x:Key="DarkOpacityColor">#40000000</Color>
    <system:UInt32 x:Key="BlurGradientValue">0x99FFFFFF</system:UInt32>
    <Color x:Key="PinkColor">#e76c90</Color>
</ResourceDictionary>

SkinLocal.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="pack://application:,,,/blog_hc_style;component/Resources/Themes/Basic/Colors/ColorsLocal.xaml"/>
    </ResourceDictionary.MergedDictionaries>
</ResourceDictionary

替换色系资源

修改App.xaml中合并资源的SkinDark.xaml为SkinLocal.xaml

<Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary>
                    <ResourceDictionary.MergedDictionaries>
                        <ResourceDictionary Source="pack://application:,,,/blog_hc_style;component/Resources/Themes/SkinLocal.xaml"/>
                        <!--合并Dark为目标色系-->
                        <!--<ResourceDictionary Source="pack://application:,,,/HandyControl;component/Themes/SkinDark.xaml"/>-->
                        <!--替换原始色系-->
                        <!--<ResourceDictionary Source="pack://application:,,,/HandyControl;component/Themes/SkinDefault.xaml"/>-->
                        <ResourceDictionary Source="pack://application:,,,/HandyControl;component/Themes/Theme.xaml"/>
                    </ResourceDictionary.MergedDictionaries>
                </ResourceDictionary>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
 </Application.Resources>

运行效果

组合色值(非必要)

此操作为可选操作，为用户对现有控件画刷颜色进行整体重写时可用（比较简单粗暴的操作），画刷用途请查看[官方文档-画刷]https://handyorg.gitee.io/handycontrol/basic_xaml/brushes/，这样的破坏性修改，建议在不熟悉HandyControl情况下不要轻易应用的实际生产中，容易打乱HandyControl的内部色系布局

注意

不少资源并未包含在HandyControl.dll程序集中，如果小伙伴瞧得起对应案例的资源样式，可以考虑自己从案例中刨出去使用即可，私聊回复【hcstyle】获取本文对应案例

后续将继续构建HandyControl的相关系列，有相关想法，进行留言：【HandyControl】



关关长语
目录
相关文章
星河造梦坊丨程序开发
|
3月前
|
前端开发 图形学
小功能⭐️3DCanvas交互方法、Unity自动调整文本框大小、改变文字大小和颜色
小功能⭐️3DCanvas交互方法、Unity自动调整文本框大小、改变文字大小和颜色
星河造梦坊丨程序开发
40 0
爱你三千遍斯塔克
|
4月前
|
JavaScript
Elementplus淡入淡出效果，头部顶栏如何设置文字隐藏效果,默认图标如何收缩,icons如何通过类进行替换，侧边栏如何添加阴影，右边如何设置高度，侧边栏如何设置阴影，如何让icon与文字
Elementplus淡入淡出效果，头部顶栏如何设置文字隐藏效果,默认图标如何收缩,icons如何通过类进行替换，侧边栏如何添加阴影，右边如何设置高度，侧边栏如何设置阴影，如何让icon与文字
爱你三千遍斯塔克
49 0
sunrr
|
6月前
|
前端开发
CSS属性涵盖了从文本样式到布局控制、从颜色处理到动画效果的各个方面
【5月更文挑战第31天】CSS属性涵盖了从文本样式到布局控制、从颜色处理到动画效果的各个方面
sunrr
46 1
fruge365
|
6月前
【UI】修改滚动条样式
【UI】修改滚动条样式
fruge365
43 1
兜里只有三分钱~
|
前端开发
css改变滚动条的颜色-横向滚动demo效果示例（整理）
css改变滚动条的颜色-横向滚动demo效果示例（整理）
兜里只有三分钱~
84 0
编程达人
|
前端开发
CSS层级小技巧：在滚动时自动添加头部阴影
CSS层级小技巧：在滚动时自动添加头部阴影
编程达人
238 0
CSS层级小技巧：在滚动时自动添加头部阴影
游客ruqdfvh2iuyqc
|
前端开发
css 修改默认滚动条的样式 小工具
css 修改默认滚动条的样式 小工具
游客ruqdfvh2iuyqc
134 0
css 修改默认滚动条的样式 小工具
4n2nnvzgqrwxq
VsCode修改注释颜色以及鼠标滚动调整字体大小
笔记
4n2nnvzgqrwxq
721 0
VsCode修改注释颜色以及鼠标滚动调整字体大小
redrain.
|
C++
duilib corner属性的贴图技巧——让图片自动贴到控件的的某一边或者一角并自适应控件的大小
转载请说明原出处，谢谢~~          Duilib给控件贴图功能可以附带多个属性，各个属性的配合可以达到许多效果。以下是duilib支持的所有贴图属性： 贴图描述：          Duilib的表现力丰富很大程度上得益于贴图描述的简单强大。
redrain.
1813 0
小蓝枣
Qt Designer设置背景图片、颜色不影响其它组件小技巧，控件层级设置，组件的继承，styleSheet设置样式。
Qt Designer设置背景图片、颜色不影响其它组件小技巧，控件层级设置，组件的继承，styleSheet设置样式。
小蓝枣
783 0
Qt Designer设置背景图片、颜色不影响其它组件小技巧，控件层级设置，组件的继承，styleSheet设置样式。