HandyControl 色系管理工具

基于HandyControl 的换肤逻辑，创建的一个小工具，主要用于添加属于自己的色系皮肤，管理器主要包含如下功能：

• 加载已有Colors.xaml。
• 对已有色卡进行颜色编辑。
• 应用编辑之后的色卡到当前编辑软件。
• 保存当前样式到新的颜色资源文件。
  代码及功能演示会在接下来的文章中进行详细描述。

功能展示

功能主页面，左侧为功能区，右侧为对应选中色系卡片。
选中默认Default。

切换色系。

应用当前样式到当前应用。

编辑色卡，点击色卡矩形框部分，弹出对应颜色编辑器，可查看到原始颜色与当前选中色值，点击取消则不更新，选择确定则更新色卡色值。

以Default为作为基础色系，创建一个橙色色系，修改主色和深主色。

修改颜色后，应用当前色系。

保存为新色系，保存时需要注意，会默认弹出到软件执行目录中的Themes/Basic/Colors/下，命名规范为Colors[Name].xaml，此处为Orange，输出之后如下：

保存成功后，点击确定，左侧列表中将挂载该目录下的所有色系。

色系列表更新。

色系列表中，可删除非选中项的色卡，本地路径将对应删除目标Colors[Name].xaml。

确认删除，删除成功，点击确定按钮，页面色系列表自动刷新。

刷新列表。

项目结构

整体来说，这个小工具项目项目并不复杂，使用的是相对比较简单的结构主体结构如下：

Models/  # 枚举 颜色对象
Services/ # Color服务 Theme服务
Themes/ # 包含对应的Colors.xaml 色系文件
ViewModels/ # 主窗体ViewModel实体
Views/ # 自定义属性编辑框
App.xaml
MainWindow.xaml

对应代码文件如下：

代码说明

代码不铺开说明，主要针对Services、Models、ColorEditDialog进行说明，解释流程。

IColorSchemeService.cs 色系色彩服务接口。

public interface IColorSchemeService
{/// <summary>/// 加载颜色色系文件/// </summary>/// <param name="filePath"></param>/// <returns></returns>Task<List<ColorItem>> LoadColorItemsAsync(string filePath);/// <summary>/// 保存色系到本地xaml中/// </summary>/// <param name="filePath">文件保存路径</param>/// <param name="colorItems">颜色集合</param>/// <returns></returns>Task SaveColorItemsAsync(string filePath, IEnumerable<ColorItem> colorItems);/// <summary>/// 验证目录中包含的色系文件/// </summary>/// <param name="directoryPath">色系路径</param>/// <returns></returns>List<string> GetAvailableColorSchemes(string directoryPath);
}

IThemeService.cs 主题服务接口。

public interface IThemeService
{/// <summary>/// 应用当前色系/// </summary>/// <param name="filePath"></param>void ApplyColorScheme(string filePath);
}

换肤实现。

public void ApplyColorScheme(string colorSchemeFilePath)
{var appResources = App.Current.Resources;// 加载新的色系字典var newColorDict = new ResourceDictionary { Source = new Uri(colorSchemeFilePath,UriKind.RelativeOrAbsolute) };// 确保 Theme.xaml 在最后加载，以便 DynamicResource 能引用到新的颜色appResources.MergedDictionaries[0] = newColorDict;var brushesDict = new ResourceDictionary { Source = new Uri(_defaultBrushesPath) };appResources.MergedDictionaries[1] = brushesDict; // 添加或替换 Brushes
}

App.xaml 中添加样式与主题，与HC 的全局样式引入方式一致。

<Application x:Class="ColorSchemeStudio.HC.App"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="clr-namespace:ColorSchemeStudio.HC"xmlns:hc="https://handyorg.github.io/handycontrol"xmlns:converters="clr-namespace:ColorSchemeStudio.HC.Converters"StartupUri="MainWindow.xaml"><Application.Resources><ResourceDictionary><ResourceDictionary.MergedDictionaries><!--<hc:Theme/><hc:StandaloneTheme/>--><ResourceDictionary Source="pack://application:,,,/HandyControl;component/Themes/SkinDefault.xaml"/><ResourceDictionary Source="pack://application:,,,/HandyControl;component/Themes/Theme.xaml"/></ResourceDictionary.MergedDictionaries></ResourceDictionary></Application.Resources>
</Application>

枚举主要对应着HC 的资源文件Colors.xaml，枚举的名称就是Color资源对应的x:Key。

public enum ColorKey
{// Primary Colors[Description("浅主色")]LightPrimaryColor,[Description("主色")]PrimaryColor,[Description("深主色")]DarkPrimaryColor,// 省略内容
}

ColorItem.cs 是对应的和核心数据类。

public class ColorItem : ViewModelBase
{private Color _value;public ColorKey Key { get; set; }public string Name { get; set; } // 通过 EnumHelper.GetDescription(Key) 获取public string Group { get; set; } // 通过 EnumHelper.GetGroup(Key) 获取// 添加属性值变更通知public Color Value{get => _value; set{if (_value == value){return;}SetProperty(ref _value, value);}}public ColorItem(ColorKey key, Color value){Key = key;Value = value;Name = EnumHelper.GetDescription(key);Group = EnumHelper.GetGroup(key);}
}

项目使用

用小工具生成的色系文件Colors[Name].xaml，在引入HC 作为主要库的项目中，建议将色系文件添加到/Themes/Basic/Colors/中，同时设置文件属性为页，并在Themes/ 目录中添加一个Skin[Name].xaml，用于合并资源文件，以LightOrange 为例子，创建一个SkinLightOrange.xaml。

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

在App.xaml 中替换掉SkinDefault.xaml。

<ResourceDictionary Source="pack://application:,,,/HandyControl;component/Themes/SkinLightOrange.xaml"/>

整体总结

以上主要是对于小工具的介绍以及核心代码的简单说明，如果需要源码可以直接访问Github，这是开源地址：https://github.com/guanguanchuangyu/ColorSchemeStudio.git，如果觉得对读者有帮助可以点个关注。