【WPF】HandyControl调整样式色系

图解关系

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

 色系与皮肤组

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

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

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

调整色值
新建Colors.xaml以及SkinDefault.xaml,Colors.xaml用于存放本地颜色值,SkinDefault.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">#f3fbff</Color>
    <Color x:Key="PrimaryColor">#326cf3</Color>
    <Color x:Key="DarkPrimaryColor">#326cf3</Color>

    <Color x:Key="LightDangerColor">#fff6f7</Color>
    <Color x:Key="DangerColor">#db3340</Color>
    <Color x:Key="DarkDangerColor">#db3340</Color>

    <Color x:Key="LightWarningColor">#fffcf5</Color>
    <Color x:Key="WarningColor">#e9af20</Color>
    <Color x:Key="DarkWarningColor">#e9af20</Color>

    <Color x:Key="LightInfoColor">#f1fdff</Color>
    <Color x:Key="InfoColor">#00bcd4</Color>
    <Color x:Key="DarkInfoColor">#00bcd4</Color>

    <Color x:Key="LightSuccessColor">#f3fff6</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">#757575</Color>
    <Color x:Key="BackgroundColor">#eeeeee</Color>
    <Color x:Key="RegionColor">LightSkyBlue</Color>
    <Color x:Key="SecondaryRegionColor">#eeeeee</Color>
    <Color x:Key="ThirdlyRegionColor">White</Color>
    <Color x:Key="TitleColor">#326cf3</Color>
    <Color x:Key="SecondaryTitleColor">#326cf3</Color>

    <Color x:Key="DefaultColor">White</Color>
    <Color x:Key="DarkDefaultColor">#D0326cf3</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>


</ResourceDictionary>

名称 用途

PrimaryColor 主色调DarkPrimaryColor 主色调(深色)DangerColor 错误、危险DarkDangerColor 错误、危险(深色)WarningColor 警告DarkWarningColor 警告(深色)InfoColor 信息DarkInfoColor 信息(深色)SuccessColor 成功DarkSuccessColor 成功(深色)PrimaryTextColor 主文本SecondaryTextColor 次级文本ThirdlyTextColor 末级文本ReverseTextColor 反色文本TextIconColor 一般用于深色背景下的文字或图标BorderColor 边框SecondaryBorderColor 次级边框BackgroundColor 主背景色RegionColor 区域块背景SecondaryRegionColor 次级区域块背景ThirdlyRegionColor 末级区域块背景TitleColor 标题背景SecondaryTitleColor 次级标题背景DefaultColor 默认颜色DarkDefaultColor 次级默认颜色AccentColor 提醒DarkAccentColor 提醒(深色)DarkMaskColor 作为遮罩使用DarkOpacityColor 半透明背景BlurGradientValue 仅用于模糊窗口的背景

SkinDefault.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">

    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="pack://application:,,,/Fpi.HandyControl;component/Resources/Themes/Basic/Colors/Colors.xaml"/>
    </ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

替换色系资源

修改App.xaml

    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/Fpi.HandyControl;component/Resources/Themes/SkinDefault.xaml"/>
                <!--<ResourceDictionary Source="pack://application:,,,/HandyControl;component/Themes/SkinViolet.xaml"/>-->
                <!--<ResourceDictionary Source="pack://application:,,,/HandyControl;component/Themes/Theme.xaml"/>-->
                <ResourceDictionary Source="pack://application:,,,/Fpi.HandyControl;component/Resources/Themes/Theme.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>

此处theme.xaml可以选用上一个,也就是原先默认的,此处也重写了theme,不过并没有添加功能

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">

    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="pack://application:,,,/HandyControl;component/Themes/Theme.xaml"/>
        <ResourceDictionary Source="Basic/Basic.xaml"/>
        <ResourceDictionary Source="Styles/Style.xaml"/>
    </ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

此处的Basic.xaml是其他一些资源,没有可不加,Style.xaml是其他一些样式,没有可不加。

运行效果

改完也发现了,我想修改窗体的颜色,修改的是RegionColor ,但是导致DataGrid的颜色也变了。目前暂时没找到单独改窗体的颜色的。

如果有人知道,还请留言告知一下。

更正:修改窗体的标题栏的背景色:

NonClientAreaBackground="Red"

组合色值(非必要)

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


参考链接:https://blog.csdn.net/qq_28806349/article/details/119057529

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值