【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

  • 4
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是实现 WPF HandyControl MVVM 分页的步骤: 1. 添加依赖项 在项目中添加以下依赖项: - WPF HandyControl - Prism.Core - Prism.Wpf 2. 创建 ViewModel 创建一个 ViewModel,其中包含以下属性: - TotalItems:总项目数 - PageSize:每页显示的项目数 - CurrentPage:当前页码 - TotalPages:总页数 还应该有以下命令: - FirstCommand:将当前页码设置为第一页 - PreviousCommand:将当前页码减一 - NextCommand:将当前页码加一 - LastCommand:将当前页码设置为最后一页 3. 创建 View 创建一个 View,其中包含以下元素: - 一个 TextBlock,显示当前页码和总页数 - 一个 Button,用于执行 FirstCommand - 一个 Button,用于执行 PreviousCommand - 一个 Button,用于执行 NextCommand - 一个 Button,用于执行 LastCommand 4. 绑定数据 在 View 中绑定 ViewModel 的属性和命令,以便在用户与 View 交互时更新它们。 5. 实现分页逻辑 在 ViewModel 中实现分页逻辑。在 FirstCommand、PreviousCommand、NextCommand 和 LastCommand 中更新 CurrentPage 的值,并重新计算 TotalPages 的值。在 TotalItems、PageSize 和 CurrentPage 的值更改时,还应该更新 TotalPages 的值。 6. 显示分页数据 在 View 中使用 HandyControl 的 DataPager 控件来显示分页数据。将 DataPager 的 ItemsSource 属性绑定到 ViewModel 中的项目集合,并将 DataPager 的 PageSize 属性设置为 ViewModel 中的 PageSize 属性。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值