Themes 与 Styles主题目录Source/Themes项目说明H.Theme主题核心。H.Themes.Colors.Accent强调色。H.Themes.Colors.Blue蓝色。H.Themes.Colors.Copper铜色/复古。H.Themes.Colors.Gray灰色。H.Themes.Colors.Industrial工业风。H.Themes.Colors.Mineral矿物色。H.Themes.Colors.PlatformApple、FluentUI、MaterialDesign。H.Themes.Colors.Purple紫色。H.Themes.Colors.Solid纯色。H.Themes.Colors.Technology科技风。H.Themes.Colors.WebAntDesignPro、Bootstrap、LayUI、WeUI。样式目录Source/Styles项目作用H.Style默认样式核心。H.Styles.BootstrapBootstrap 风格样式。WPF-Control 大量使用ResourceDictionaryDynamicResourceStaticResourceStyleControlTemplateThemes/Generic.xaml常见窗口样式Style{DynamicResource {x:Static WindowKeys.Default}}这代表样式来自资源字典并且可以随主题动态变化。Themes 与 Styles 主题样式系统详解一、主题样式系统概述WPF-Control 的主题样式系统负责管理应用的外观和视觉效果通过资源字典实现主题切换和样式复用。核心思想将颜色、字体、布局等视觉元素抽象为可配置的资源支持动态切换。二、主题系统架构2.1 主题项目结构Source/Themes/ ├── H.Theme/ # 主题核心 │ ├── Colors/ # 颜色资源 │ │ ├── Light.xaml # 浅色主题 │ │ ├── Dark.xaml # 深色主题 │ │ └── ColorThemeType.cs # 主题类型枚举 │ ├── Backgrounds/ # 背景资源 │ ├── FontSizes/ # 字体大小 │ └── Layouts/ # 布局资源 ├── H.Themes.Colors.Blue/ # 蓝色主题 ├── H.Themes.Colors.Gray/ # 灰色主题 ├── H.Themes.Colors.Purple/ # 紫色主题 ├── H.Themes.Colors.Platform/ # 平台风格Apple、FluentUI、MaterialDesign └── H.Themes.Colors.Web/ # Web风格AntDesignPro、Bootstrap、LayUI2.2 颜色主题分类主题项目风格特点适用场景Blue清爽蓝色调通用企业应用Copper复古铜色调艺术类应用Gray简洁灰色调专业工具类Industrial工业金属风工业软件Mineral矿物自然色设计类应用Platform平台风格跨平台应用Purple优雅紫色调创意类应用Solid纯色简洁简约风格Technology科技感科技产品WebWeb框架风格Web迁移应用三、核心概念3.1 ResourceDictionary资源字典资源字典是 WPF 中管理资源的核心机制ResourceDictionary!-- 颜色资源 --Colorx:KeyPrimaryColor#2D80FF/Color!-- 画笔资源 --SolidColorBrushx:KeyPrimaryBrushColor{StaticResource PrimaryColor}/!-- 样式资源 --Stylex:KeyButtonStyleTargetTypeButtonSetter PropertyBackgroundValue{StaticResource PrimaryBrush}//Style/ResourceDictionary3.2 DynamicResource vs StaticResource特性StaticResourceDynamicResource加载时机编译时运行时性能更快稍慢动态更新不支持支持适用场景固定资源主题切换3.3 ComponentResourceKey组件资源键用于跨程序集共享资源!-- 定义资源 --Colorx:Key{ComponentResourceKey ResourceIdS.Color.Accent, TypeInTargetAssembly{x:Type local:ColorKeys}}#2D80FF/Color!-- 使用资源 --SolidColorBrushColor{DynamicResource {ComponentResourceKey ResourceIdS.Color.Accent, TypeInTargetAssembly{x:Type local:ColorKeys}}}/四、颜色系统详解4.1 浅色主题Light.xaml!-- 背景色 --Colorx:Key{ComponentResourceKey ResourceIdS.Color.CaptionBackground, ...}#f5f5f5/ColorColorx:Key{ComponentResourceKey ResourceIdS.Color.TextBackground, ...}#FFFFFF/Color!-- 前景色 --Colorx:Key{ComponentResourceKey ResourceIdS.Color.TextForeground, ...}#606266/ColorColorx:Key{ComponentResourceKey ResourceIdS.Color.TextForeground.Title, ...}#000000/Color!-- 边框色 --Colorx:Key{ComponentResourceKey ResourceIdS.Color.TextBorderBrush, ...}#ebebeb/Color4.2 深色主题Dark.xaml!-- 背景色 --Colorx:Key{ComponentResourceKey ResourceIdS.Color.CaptionBackground, ...}#191a20/ColorColorx:Key{ComponentResourceKey ResourceIdS.Color.TextBackground, ...}#121317/Color!-- 前景色 --Colorx:Key{ComponentResourceKey ResourceIdS.Color.TextForeground, ...}#FF8F939C/ColorColorx:Key{ComponentResourceKey ResourceIdS.Color.TextForeground.Title, ...}#ffffff/Color!-- 边框色 --Colorx:Key{ComponentResourceKey ResourceIdS.Color.TextBorderBrush, ...}#2e313b/Color4.3 颜色键命名规范前缀含义示例S.Color.基础颜色S.Color.Red,S.Color.BlueS.Color.Caption标题栏颜色S.Color.CaptionBackgroundS.Color.Text文本相关颜色S.Color.TextForegroundS.Color.Dark.N灰度颜色N为0-28S.Color.Dark.10五、样式系统详解5.1 样式项目结构Source/Styles/ ├── H.Style/ # 默认样式核心 │ ├── Controls/ # 控件样式 │ │ ├── Button.xaml │ │ ├── TextBox.xaml │ │ ├── Window.xaml │ │ └── ... │ ├── Share.xaml # 共享资源 │ └── Themes/ │ └── Generic.xaml # 默认样式入口 └── H.Styles.Bootstrap/ # Bootstrap风格5.2 控件样式示例!-- Button.xaml --StyleTargetTypeButtonSetter PropertyBackgroundValue{DynamicResource {ComponentResourceKey ResourceIdS.Color.TextBackground, TypeInTargetAssembly{x:Type local:ColorKeys}}}/ Setter PropertyForegroundValue{DynamicResource {ComponentResourceKey ResourceIdS.Color.TextForeground, TypeInTargetAssembly{x:Type local:ColorKeys}}}/ Setter PropertyBorderBrushValue{DynamicResource {ComponentResourceKey ResourceIdS.Color.TextBorderBrush, TypeInTargetAssembly{x:Type local:ColorKeys}}}/ Style.Triggers Trigger PropertyIsMouseOverValueTrue Setter PropertyBackgroundValue{DynamicResource {ComponentResourceKey ResourceIdS.Color.TextMouseOver, TypeInTargetAssembly{x:Type local:ColorKeys}}}/ /Trigger Trigger PropertyIsPressedValueTrue Setter PropertyBackgroundValue{DynamicResource {ComponentResourceKey ResourceIdS.Color.TextSelected, TypeInTargetAssembly{x:Type local:ColorKeys}}}/ /Trigger /Style.Triggers/Style5.3 窗口样式!-- Window.xaml --Stylex:Key{ComponentResourceKey ResourceIdWindowKeys.Default, TypeInTargetAssembly{x:Type local:WindowKeys}}TargetTypeWindowSetter PropertyBackgroundValue{DynamicResource {ComponentResourceKey ResourceIdS.Color.TextBackground, TypeInTargetAssembly{x:Type local:ColorKeys}}}/ Setter PropertyForegroundValue{DynamicResource {ComponentResourceKey ResourceIdS.Color.TextForeground, TypeInTargetAssembly{x:Type local:ColorKeys}}}/ Setter PropertyBorderBrushValue{DynamicResource {ComponentResourceKey ResourceIdS.Color.TextBorderBrush.Title, TypeInTargetAssembly{x:Type local:ColorKeys}}}//Style六、主题切换机制6.1 主题类型枚举publicenumColorThemeType{[Display(Name常规)]Default0,[Display(Name深色)]Dark,[Display(Name浅色)]Light}6.2 主题加载流程1. 用户选择主题 │ ▼ 2. 调用主题切换服务 │ ▼ 3. 加载对应主题的 ResourceDictionary │ ▼ 4. 合并到 Application.Resources │ ▼ 5. DynamicResource 自动更新UI6.3 使用示例// 切换到深色主题Ioc.GetServiceILoadThemeOptionsService().Load(ColorThemeType.Dark);// 切换到浅色主题Ioc.GetServiceILoadThemeOptionsService().Load(ColorThemeType.Light);6.4 XAML 中使用动态资源!-- 颜色 --ButtonBackground{DynamicResource {ComponentResourceKey ResourceIdS.Color.Accent, TypeInTargetAssembly{x:Type local:ColorKeys}}}/!-- 样式 --WindowStyle{DynamicResource{ComponentResourceKey ResourceIdWindowKeys.Default, TypeInTargetAssembly{x:Typelocal:WindowKeys}}}/七、自定义主题7.1 创建自定义颜色主题步骤1创建颜色资源文件!-- CustomTheme.xaml --ResourceDictionaryxmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentation!-- 自定义颜色 --Colorx:Key{ComponentResourceKey ResourceIdS.Color.Accent, TypeInTargetAssembly{x:Type local:ColorKeys}}#FF6B8E23/ColorColorx:Key{ComponentResourceKey ResourceIdS.Color.CaptionBackground, TypeInTargetAssembly{x:Type local:ColorKeys}}#F5F5DC/ColorColorx:Key{ComponentResourceKey ResourceIdS.Color.TextBackground, TypeInTargetAssembly{x:Type local:ColorKeys}}#FFFFFF/ColorColorx:Key{ComponentResourceKey ResourceIdS.Color.TextForeground, TypeInTargetAssembly{x:Type local:ColorKeys}}#333333/Color/ResourceDictionary步骤2注册主题publicstaticclassCustomThemeExtension{publicstaticIServiceCollectionAddCustomTheme(thisIServiceCollectionservices){services.TryAddSingletonIThemeResource,CustomThemeResource();returnservices;}}7.2 创建自定义样式!-- CustomButtonStyle.xaml --ResourceDictionaryStylex:KeyCustomButtonTargetTypeButtonSetter PropertyPaddingValue12,6/ Setter PropertyBorderRadiusValue8/ Setter PropertyBackgroundValue{DynamicResource {ComponentResourceKey ResourceIdS.Color.Accent, TypeInTargetAssembly{x:Type local:ColorKeys}}}/ Style.Triggers Trigger PropertyIsMouseOverValueTrue Setter PropertyOpacityValue0.9/ /Trigger /Style.Triggers/Style/ResourceDictionary八、最佳实践8.1 资源引用规范// ✅ 推荐使用 DynamicResource 支持主题切换Background{DynamicResource {ComponentResourceKey ResourceIdS.Color.Accent, ...}}// ❌ 不推荐硬编码颜色Background#FF6B8E238.2 样式优先级1. 内联样式Inline │ ▼ 2. 控件级样式Style 属性 │ ▼ 3. 页面级资源Window.Resources │ ▼ 4. 应用级资源Application.Resources │ ▼ 5. 主题资源Themes/Generic.xaml8.3 性能优化// ✅ 推荐使用 StaticResource 提高性能非主题资源SolidColorBrushx:KeyStaticBrushColor{StaticResource MyColor}/// ✅ 推荐使用 DynamicResource 支持主题切换SolidColorBrushx:KeyDynamicBrushColor{DynamicResource S.Color.Accent}/九、总结主题样式系统是 WPF-Control 的外观核心主题分类丰富支持浅色、深色、蓝色、紫色等多种主题动态切换通过 DynamicResource 实现主题实时切换跨程序集共享使用 ComponentResourceKey 共享资源高度可定制支持自定义主题和样式性能优化区分 StaticResource 和 DynamicResource掌握主题样式系统可以打造视觉效果出色的 WPF 应用。