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

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

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



关关长语
目录
相关文章
码农小达人
|
5月前
|
缓存 前端开发
动态样式去哪儿了？
动态样式去哪儿了？
码农小达人
48 6
星河造梦坊丨程序开发
|
5月前
|
前端开发 图形学
小功能⭐️3DCanvas交互方法、Unity自动调整文本框大小、改变文字大小和颜色
小功能⭐️3DCanvas交互方法、Unity自动调整文本框大小、改变文字大小和颜色
星河造梦坊丨程序开发
57 0
代码迷途
|
算法 API C#
Winform控件优化之圆角按钮【各种实现中的推荐做法】（下）
最终优化实现ButtonPro按钮（继承自Button），既提供Button原生功能，又提供扩展功能，除了圆角以外，还实现了圆形、圆角矩形的脚尖效果、边框大小和颜色、背景渐变颜色...
代码迷途
2202 0
Winform控件优化之圆角按钮【各种实现中的推荐做法】（下）
你挚爱的强哥
|
8月前
【sgDragSize】自定义组件：自定义拖拽修改DIV尺寸组件，适用于窗体大小调整
【sgDragSize】自定义组件：自定义拖拽修改DIV尺寸组件，适用于窗体大小调整
你挚爱的强哥
131 0
长沙红胖子Qt
|
数据安全/隐私保护 计算机视觉
qss样式表笔记大全(三)：可设置样式的窗口部件列表（中）（持续更新示例） 一
qss样式表笔记大全(三)：可设置样式的窗口部件列表（中）（持续更新示例）
长沙红胖子Qt
779 0
qss样式表笔记大全(三)：可设置样式的窗口部件列表（中）（持续更新示例） 一
啊理八八
|
UED 容器
如何实现侧边两栏宽度固定，中间栏宽度自适应的布局？——双飞翼布局、圣杯（Holy Grails）布局
如何实现侧边两栏宽度固定，中间栏宽度自适应的布局？——双飞翼布局、圣杯（Holy Grails）布局
啊理八八
95 0
代码迷途
|
C# 图形学 Windows
Winform控件优化之圆角按钮【各种实现中的推荐做法】（上）
Windows 11下所有控件已经默认采用圆角，其效果更好、相对有着更好的优化...尝试介绍很常见的圆角效果，通过重写控件的OnPaint方法实现绘制，并在后面进一步探索对应的优化和可能的问题
代码迷途
1536 0
Winform控件优化之圆角按钮【各种实现中的推荐做法】（上）
长沙红胖子Qt
|
计算机视觉
qss样式表笔记大全(四)：可设置样式的窗口部件列表（下）（持续更新示例）一
qss样式表笔记大全(四)：可设置样式的窗口部件列表（下）（持续更新示例）
长沙红胖子Qt
573 0
qss样式表笔记大全(四)：可设置样式的窗口部件列表（下）（持续更新示例）一
长沙红胖子Qt
qss样式表笔记大全(四)：可设置样式的窗口部件列表（下）（持续更新示例）二
qss样式表笔记大全(四)：可设置样式的窗口部件列表（下）（持续更新示例）
长沙红胖子Qt
1540 0
qss样式表笔记大全(四)：可设置样式的窗口部件列表（下）（持续更新示例）二
长沙红胖子Qt
qss样式表笔记大全(三)：可设置样式的窗口部件列表（中）（持续更新示例）二
qss样式表笔记大全(三)：可设置样式的窗口部件列表（中）（持续更新示例）
长沙红胖子Qt
977 0
qss样式表笔记大全(三)：可设置样式的窗口部件列表（中）（持续更新示例）二

热门文章

最新文章

  • 1
    ip查询显示泛播是什么意思？
  • 2
    charles抓包显示乱码解决方法
  • 3
    持续定义SaaS模式云数据仓库+数据银行
  • 4
    从0开始打造一款APP：前端+搭建本机服务，定制暖冬卫衣先到先得
  • 5
    patch 命令用法详解（转）
  • 6
    小程序审核常见驳回类型
  • 7
    评测：AI客服接入钉钉与微信的对比分析
  • 8
    Linux的归档及压缩，Linux的cron时间计划任务， NTP网络时间协议 ， 查看网络连接
  • 9
    全新Gmail网络钓鱼攻击出现 最细心的用户也可能上当
  • 10
    Eclipse内存监控插件 FreeMem
  • 1
    TransPixar AI
    124
  • 2
    《docker基础篇：2.Docker安装》包括前提说明、Docker的基本组成、Docker平台架构图解(架构版)、安装步骤、阿里云镜像加速、永远的HelloWorld、底层原理
    143
  • 3
    通义万相2.1：VBench榜单荣登第一！阿里通义万相最新视频生成模型，支持生成1080P长视频
    84
  • 4
    GLM-Zero：智谱AI推出与 OpenAI-o1-Preview 旗鼓相当的深度推理模型，开放在线免费使用和API调用
    62
  • 5
    DeepSeek Artifacts：在线实时预览的前端 AI 编程工具，基于DeepSeek V3快速生成React App
    82
  • 6
    智能运维新时代：AI在云资源管理中的应用与实践
    52
  • 7
    假如AI欺骗了你 | AI大咖说
    116
  • 8
    写在最前的话
    45
  • 9
    深度强化学习实战：训练DQN模型玩超级马里奥兄弟
    114
  • 10
    体验《多模态数据信息提取》
    43

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册

    • 相关实验场景

    更多
  • 图表样式智能美化工具
  • 前端开发基础3：CSS3常见显示属性
    • 下一篇
    DataWorks智能交互式数据开发与分析之旅