UI组件桌面应用【免费下载链接】HandyControlContains some simple and commonly used WPF controls项目地址https://gitcode.com/gh_mirrors/ha/HandyControl点击查看免费下载HandyControl 将控件库运行所需的全部基础视觉资源颜色、画刷、行为、转换器、阴影效果、字体、几何图形、Path 路径与尺寸统一收敛在Themes/Basic目录下以一组独立的 XAML 资源字典对外暴露。本文以 基础 xaml 定义 为主线逐层拆解这一资源体系的命名约定、内部结构与每个资源项的实际用途并结合仓库源码给出可直接复制使用的绑定与引用写法帮助你在自己的 WPF 项目中快速套用 HandyControl 的视觉语言或在其基础上定制主题。一、Basic 目录结构与资源定位HandyControl 的基础 XAML 定义全部位于Basic文件夹中在源码仓库中对应 src/Shared/HandyControl_Shared/Themes/Basic 目录。其内部组织如下| 文件 | 用途 | |-|-| | Colors/ | 包含内置的 3 个颜色定义文件Colors.xaml、ColorsDark.xaml、ColorsViolet.xaml | | Basic.xaml | 包装好的基础 xaml 定义统一合并入口 | | Behaviors.xaml | 包含所有的行为定义 | | Brushes.xaml | 包含所有的画刷定义 | | Converters.xaml | 包含所有的转换器定义 | | Effects.xaml | 包含所有的效果定义 | | Fonts.xaml | 包含所有的字体大小定义 | | Geometries.xaml | 包含所有的几何形状定义多用于 Path | | Paths.xaml | 包含所有的 Path 路径定义 | | Sizes.xaml | 包含所有的尺寸定义 |从源码结构看Basic.xaml承担包装合并职责通过ResourceDictionary.MergedDictionaries将上述各文件聚合为一个整体主题入口Theme.xaml再引用该合并字典从而让全部基础资源在控件样式Themes/Styles与 Demo 页面中全局可用。这一分层让基础资源与控件样式解耦换配色或调尺寸只需替换对应基础字典无需改动任何控件模板。需要说明的是所有基础资源都刻意采用按语义命名而非按具体色值命名例如PrimaryColor而非Blue600因此在不同主题下引用同一资源键即可自动切换外观。二、Colors三套内置配色与颜色命名体系颜色定义文件共 3 个均位于 Themes/Basic/Colors| 文件 | 用途 | |-|-| | Colors.xaml | 默认亮色配置 | | ColorsDark.xaml | 暗色配置 | | ColorsViolet.xaml | 紫色配置 |每个文件定义了相同的颜色名称只是颜色值不同从而保证换肤时资源键不变。以默认配置 Colors.xaml 为例其颜色名称与用途如下| 名称 | 用途 | |-|-| | 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 | 仅用于模糊窗口的背景 |查看默认配色的源码可以确认具体色值Colors.xamlColor x:KeyLightPrimaryColor#f3fbff/Color Color x:KeyPrimaryColor#326cf3/Color Color x:KeyDarkPrimaryColor#326cf3/Color Color x:KeyDangerColor#db3340/Color Color x:KeyWarningColor#e9af20/Color Color x:KeyInfoColor#00bcd4/Color Color x:KeySuccessColor#2db84d/Color Color x:KeyAccentColor#f8491e/Color从中可以提炼出两条设计规律语义色都有配套的浅色变体如LightPrimaryColor、LightDangerColor、LightWarningColor、LightInfoColor、LightSuccessColor专门用于浅底场景如 Tag、Badge 的底色与正常色、深色变体构成三级体系。文本与背景分两级语义Primary/Secondary/ThirdlyTextColor对应主、次、末级文本层级RegionColor系列与BackgroundColor区分页面主背景与卡片/区域块背景DarkMaskColor#20000000与DarkOpacityColor#40000000分别用于遮罩与半透明覆盖层。BlurGradientValue以UInt32形式0x99FFFFFF存在仅服务于模糊窗口的渐变背景。典型用法在 XAML 中直接引用TextBlock Foreground{DynamicResource PrimaryTextColor} Text{DynamicResource PrimaryColor}/三、Brushes与颜色一一对应的画刷体系画刷基于颜色构建仓库中维护了一套与颜色命名严格对应的 Brush 资源Brushes.xaml便于在Background、Foreground、BorderBrush等依赖属性上直接使用| 名称 | 用途 | |-|-| | PrimaryBrush | 主色调 | | DarkPrimaryBrush | 主色调深色 | | DangerBrush | 错误、危险 | | DarkDangerBrush | 错误、危险深色 | | WarningBrush | 警告 | | DarkWarningBrush | 警告深色 | | InfoBrush | 信息 | | DarkInfoBrush | 信息深色 | | SuccessBrush | 成功 | | DarkSuccessBrush | 成功深色 | | PrimaryTextBrush | 主文本 | | SecondaryTextBrush | 次级文本 | | ThirdlyTextBrush | 末级文本 | | ReverseTextBrush | 反色文本 | | TextIconBrush | 一般用于深色背景下的文字或图标 | | BorderBrush | 边框 | | SecondaryBorderBrush | 次级边框 | | BackgroundBrush | 主背景色 | | RegionBrush | 区域块背景 | | SecondaryRegionBrush | 次级区域块背景 | | ThirdlyRegionBrush | 末级区域块背景 | | TitleBrush | 标题背景 | | DefaultBrush | 默认颜色 | | DarkDefaultBrush | 次级默认颜色 | | AccentBrush | 提醒 | | DarkAccentBrush | 提醒深色 | | DarkMaskBrush | 作为遮罩使用 | | DarkOpacityBrush | 半透明背景 |使用方式与颜色几乎一致只是属性换成画刷型属性Border Background{DynamicResource RegionBrush} BorderBrush{DynamicResource BorderBrush}/之所以同时维护 Color 与 Brush 两套资源是因为 XAML 中部分属性如Fill、Stroke接受Brush而非Color保持两套命名平行可以让开发者在不同场景下都能以同一种语义进行引用避免在 XAML 中手写SolidColorBrush包装。四、Behaviors开箱即用的流体移动行为行为定义集中在 Behaviors.xaml目前提供 6 个流体移动FluidMove行为按运动轴向与动画时长排列| 名称 | 用途 | |-|-| | BehaviorXY200 | 流体移动行为x、y 轴运动200 毫秒结束动画 | | BehaviorX200 | 流体移动行为x 轴运动200 毫秒结束动画 | | BehaviorY200 | 流体移动行为y 轴运动200 毫秒结束动画 | | BehaviorXY400 | 流体移动行为x、y 轴运动400 毫秒结束动画 | | BehaviorX400 | 流体移动行为x 轴运动400 毫秒结束动画 | | BehaviorY400 | 流体移动行为y 轴运动400 毫秒结束动画 |命名规则非常直观前缀Behavior 轴向X/Y/XY 动画毫秒数200/400。这一资源通常配合PanelElement.FluidMoveBehavior附加属性使用让子元素在增删或移动时产生平滑的位移动画hc:PanelElement.FluidMoveBehavior StaticResource ResourceKeyBehaviorXY200/ /hc:PanelElement.FluidMoveBehavior等价写法与文档用例一致hc:PanelElement.FluidMoveBehavior{StaticResource BehaviorXY200}从行为底层看FluidMove 依托交互库中的FluidMoveBehavior源码位于 src/Shared/Microsoft.Expression.Interactions/FluidMoveBehavior.cs对UIElement的位移变化进行插值动画。X/Y/XY 三档轴向与 200/400 两档时长组合覆盖了多数列表项增删/布局重排的过渡场景。五、Converters内置转换器全览转换器集中在 Converters.xaml用于在绑定时完成布尔、字符串、可见性、几何等类型之间的转换。各转换器说明如下| 转换器 | 功能说明 | |-|-| | Boolean2BooleanReConverter | 反转布尔类型 | | Boolean2StrConverter | 需要提供一个字符串参数形式为[字符串0];[字符串1]值为true时返回[字符串0]否则返回[字符串1]| | Boolean2VisibilityConverter | 将true转换为Visiblefalse转换为Collapsed| | Boolean2VisibilityReConverter | 与Boolean2VisibilityConverter相反 | | BooleanArr2VisibilityConverter | 将布尔数组转换为Visibility数组内全部为true时返回Visible否则返回Collapsed| | BorderCircularClipConverter | Border 专用接受长度为 3 的 object 数组长、宽、圆角半径返回圆形几何形状作为 Clip 剪裁 Border | | BorderCircularConverter | Border 专用接受长和宽合成的整型数组返回两者最小值的一半作为圆形 Border 的半径 | | BorderClipConverter | Border 专用接受长度为 3 的 object 数组长、宽、圆角半径返回圆角矩形作为 Clip 剪裁 Border | | ColLayoutConverter | 用于 XAML 设计时将字符串转换为有效的ColLayout值 | | Color2ChannelAConverter内部使用 | 提取SolidColorBrush.Color透明通道A的值 | | Color2HexStrConverter | 将SolidColorBrush转换为带#的 16 进制字符串 | | CornerRadiusSplitConverter | 需要字符串参数形式为[0/1],[0/1],[0/1],[0/1]依次对应CornerRadius的 Left、Top、Right、Bottom值为 1 时返回对应属性值否则返回 0 | | Double2GridLengthConverter | 将double值转换为GridLength| | DoubleMinConverter内部使用 | 可提供字符串作为最小值不提供则默认为 0传入值小于最小值时返回最小值否则返回原值 | | Int2StrConverter | 需要字符串参数形式为[字符串0];[字符串1];...[字符串n]以整型值作为索引获取并返回对应字符串 | | Long2FileSizeConverter | 将长整型转换为文件大小的字符串 | | Number2PercentageConverter | 接受长度为 2 的数字数组返回两数的百分比值 | | Object2BooleanConverter | 值为null时返回false否则返回true| | Object2VisibilityConverter | 值为null时返回Collapsed否则返回Visible| | RectangleCircularConverter | Rectangle 专用接受长和宽合成的整型数组返回两者最小值的一半作为圆形 Rectangle 的半径 | | String2VisibilityConverter | 接受字符串为空或null时返回Collapsed否则返回Visible| | String2VisibilityReConverter | 与String2VisibilityConverter相反 | | ThicknessSplitConverter | 需要字符串参数形式为[0/1],[0/1],[0/1],[0/1]依次对应Thickness的 Left、Top、Right、Bottom值为 1 时返回对应属性值否则返回 0 | | TreeViewItemMarginConverter内部使用 | 为 TreeViewItem 提供适当的左边距 |其中标记内部使用的转换器Color2ChannelAConverter、DoubleMinConverter、TreeViewItemMarginConverter主要服务于控件模板内部的绑定普通业务代码中无需直接引用其余转换器均可直接在 View 层使用。典型用例——根据 ViewModel 布尔值控制控件可见性Button Visibility{Binding ShowButton, Converter{StaticResource Boolean2VisibilityConverter}}/Boolean2StrConverter适合做男女/开关状态这类二值文本映射例如ConverterParameter是;否CornerRadiusSplitConverter与ThicknessSplitConverter则用于按边拆分圆角/边距在自定义控件模板时非常实用。六、Effects五级阴影效果效果定义位于 Effects.xaml目前只包含 5 个级别的阴影效果| 名称 | 半径 | |-|-| | EffectShadow1 | 5 | | EffectShadow2 | 8 | | EffectShadow3 | 14 | | EffectShadow4 | 25 | | EffectShadow5 | 35 |对应源码实现如下Effects.xamlColor x:KeyEffectShadowColor#88000000/Color DropShadowEffect x:KeyEffectShadow1 BlurRadius5 ShadowDepth1 Direction270 Color{StaticResource EffectShadowColor} Opacity.2 RenderingBiasPerformance o:FreezeTrue / DropShadowEffect x:KeyEffectShadow2 BlurRadius8 ShadowDepth1.5 ... DropShadowEffect x:KeyEffectShadow3 BlurRadius14 ShadowDepth4.5 ... DropShadowEffect x:KeyEffectShadow4 BlurRadius25 ShadowDepth8 ... DropShadowEffect x:KeyEffectShadow5 BlurRadius35 ShadowDepth13 ...除文档表格列出的BlurRadius外源码还透露出更多细节统一使用#88000000的阴影色、Direction270光源朝下即阴影落在元素下方、Opacity.2、RenderingBiasPerformance优先性能且阴影深度ShadowDepth随级别同步递增1 → 1.5 → 4.5 → 8 → 13。这五个级别构成了从轻浮起到重投影的完整阶梯可直接挂在任意元素的Effect属性上Border Effect{StaticResource EffectShadow5}/七、Fonts字体大小规范字体大小定义位于 Fonts.xaml按层级而非具体场景散落定义| 名称 | 大小 | 用途 | |-|-|-| | LargeFontSize | 24 | 页面标题 | | HeadFontSize | 20 | 功能标题 | | SubHeadFontSize | 16 | 子功能标题 | | TextFontSize | 12 | 文本 |四个层级对应从页面级标题到正文的完整字号阶梯保证整个应用内文字层级统一。使用示例TextBlock TextHandyControl FontSize{StaticResource LargeFontSize}/在 Demo 工程HandyControlDemo_Shared的页面与窗口模板中这套字号被大量复用这也是为什么各演示页面观感高度一致——字号即设计规范的一部分。八、Geometries内置几何形状几何形状定义位于 Geometries.xaml。HandyControl 明确表示不准备包罗万象只求所需这些形状首先服务于控件库自身如日历、时钟、窗口按钮等控件的内部图标同时完全开放给使用者。控件库中所有形状定义如下| 名称 | 描述 | |-|-| | CalendarGeometry | 日历 | | DeleteGeometry | 删除 | | DeleteFillCircleGeometry | 删除圆形填充 | | CloseGeometry | 关闭 | | DownGeometry | 下 | | UpGeometry | 上 | | ClockGeometry | 时钟 | | LeftGeometry | 左 | | RightGeometry | 右 | | RotateLeftGeometry | 向左旋转 | | RotateRightGeometry | 向左旋转 | | EnlargeGeometry | 放大 | | ReduceGeometry | 缩小 | | DownloadGeometry | 下载 | | SaveGeometry | 保存 | | WindowsGeometry | 窗口 | | FullScreenGeometry | 全屏 | | FullScreenReturnGeometry | 全屏返回 | | SearchGeometry | 搜索 | | UpDownGeometry | 上和下的组合 | | WindowMinGeometry | 窗口最小化 | | WindowRestoreGeometry | 窗口还原 | | WindowMaxGeometry | 窗口最大化 | | CheckedGeometry | 选中 | | PageModeGeometry | 单页模式 | | TwoPageModeGeometry | 双页模式 | | ScrollModeGeometry | 滚动模式 | | EyeOpenGeometry | 睁眼 | | EyeCloseGeometry | 闭眼 | | AudioGeometry | 声音 | | BubbleTailGeometry | 气泡的尾巴 | | StarGeometry | 爱心 | | AddGeometry | 加 | | SubGeometry | 减 | | WarningGeometry | 警告 | | InfoGeometry | 信息 | | ErrorGeometry | 错误 | | SuccessGeometry | 成功 | | FatalGeometry | 严重 | | AskGeometry | 询问 | | AllGeometry | 所有 | | DragGeometry | 拖拽用于工具条 |这些 Geometry 是StreamGeometry类型的资源典型用途是作为Path的DataPath Data{StaticResource DragGeometry} Fill{DynamicResource PrimaryBrush}/配合上一节的画刷即可快速拼出带语义配色的图标。Growl 通知、MessageBox、Tag、窗口按钮等控件的图标都直接取用这套几何资源。九、PathsPath 路径样式Path 路径定义位于 Paths.xaml与几何形状同思路——不求包罗万象只求所需。这里定义的不是裸Geometry而是封装好的Path控件样式| 名称 | 描述 | |-|-| | PathBaseStyle | Path 路径基样式 | | SearchPathStyle | 搜索 | | FullScreenReturnPathStyle | 全屏返回 | | FullScreenPathStyle | 全屏 | | WindowsPathStyle | 窗口 | | SavePathStyle | 保存 | | DownloadPathStyle | 下载 | | EnlargePathStyle | 放大 | | ReducePathStyle | 缩小 | | RotatePathStyle | 向左旋转默认 | | CalendarPathStyle | 日历 | | DeletePathStyle | 删除 | | ClosePathStyle | 关闭 | | DownPathStyle | 下 | | ClockPathStyle | 时钟 | | LeftPathStyle | 向左 | | RightPathStyle | 向右 | | UpDownPathStyle | 上和下的组合 |PathBaseStyle是全部 Path 样式的基样式通常在其中统一Data之外的公共属性如Stretch、对齐方式、命中测试等其余样式在此基础上仅替换Data。用法是把它当作普通 Style 应用到Path上Path Style{StaticResource SearchPathStyle}/与上一节 Geometry 的差异在于Geometry 只提供形状数据需要自己挂Path并设置画刷而 Path 样式把整条Path的Data与基础样式打包一个资源即可渲染出成品图标更适合在模板中直接复用。十、Sizes统一尺寸规范尺寸定义位于 Sizes.xaml文档描述如下| 名称 | 类型 | 值 | 描述 | |-|-|-|-| | DefaultControlHeight | System.Double | 30 | 默认控件高度 | | DefaultControlPadding | System.Windows.Thickness | 10,6 | 默认控件内边距 | | DefaultInputPadding | System.Windows.Thickness | 8,6 | 默认输入控件内边距 | | DefaultCornerRadius | System.Windows.CornerRadius | 4 | 默认圆角 |对照当前仓库源码Sizes.xaml实际定义的值略有差异sys:Double x:KeyDefaultControlHeight28/sys:Double sys:Double x:KeySmallControlHeight20/sys:Double Thickness x:KeyDefaultControlPadding10,5/Thickness Thickness x:KeyDefaultInputPadding8,0/Thickness CornerRadius x:KeyDefaultCornerRadius4/CornerRadius sys:Double x:Key{x:Static SystemParameters.VerticalScrollBarButtonHeightKey}30/sys:Double源码中还额外提供了SmallControlHeight20小型控件高度与滚动条按钮高度键说明文档表格之外实际可用资源更多且数值以源码为准。这些尺寸被控件样式的Height、Padding、CornerRadius属性大量引用是控件库疏密一致的底层保障。用法示例Button Height{StaticResource DefaultControlHeight} Padding{StaticResource DefaultControlPadding} CornerRadius{StaticResource DefaultCornerRadius}/十一、在此基础上定制自己的主题理解了上述资源体系后定制主题只需遵循同名覆盖原则复制与替换复制 Themes/Basic/Colors/Colors.xaml 中的资源键在App.xaml的Application.Resources中以后定义的同名资源覆盖例如将PrimaryColor替换为企业品牌色。扩展而非覆盖Geometries、Paths这类资源按需补充即可不会影响控件库既有引用——控件只读取它认识的键多出来的资源是纯增量。关注配套变体改颜色时建议同时覆盖对应的浅色、深色变体Light*、Dark*以及*Brush系列否则换肤后部分控件Tag、Badge、按钮 hover 态可能出现新旧色混杂。尺寸与圆角统一调整修改DefaultControlHeight、DefaultCornerRadius即可让整套控件风格同步变化无需逐个改模板。完整的主题切换入口在 Theme.xaml 及其皮肤文件如 SkinDefault.xamlColors.xaml/ColorsDark.xaml/ColorsViolet.xaml三套配色也正是为不同皮肤而准备的更多配色与画刷的引用场景可继续阅读 颜色、画刷、转换器、几何形状、Path 路径 等专题文档。赞分享UI组件桌面应用【免费下载链接】HandyControlContains some simple and commonly used WPF controls项目地址https://gitcode.com/gh_mirrors/ha/HandyControl点击查看免费下载相关推荐astryx Neutral 主题实战指南安装、调色板体系与源码级主题定制解析astryx Neutral 主题实战指南安装、调色板体系与源码级主题定制解析 本文基于仓库文档 packages/themes/neutral/README设计系统UI组件前端5分钟逛完170款开源游戏免安装速查指南5分钟逛完170款开源游戏免安装速查指南 想找个免费好玩的开源游戏或者想找份老游戏的开源源码读一读这份开源游戏合集把 170 多款游戏按 18 个分区排文档知识库Trippy TUI 主题定制完全指南从 --tui-theme-colors 到 theme-colors 配置Trippy TUI 主题定制完全指南从 tui theme colors 到 theme colors 配置 Trippy 是一款用 Rust 编写的网络诊网络CLI运维上一篇终极免费macOS屏幕录制工具QuickRecorder完全指南下一篇DHAT Rust 程序分析器使用教程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
