UI组件桌面应用【免费下载链接】SunnyUISunnyUI.NET 是基于.NET Framework 4.0、.NET6、.NET8、.NET9 框架的 C# WinForm UI、开源控件库、工具类库、扩展类库、多页面开发框架。项目地址https://gitcode.com/gh_mirrors/su/SunnyUI点击查看免费下载SunnyUI.NET 提供了一类以字体图标Font Icon为核心视觉元素的按钮控件UISymbolButton它继承自 UIButton在保留普通按钮全部交互能力的基础上用内嵌字体图标代替或搭配文字显示广泛用于工具栏、导航菜单、表单操作区与移动端风格的圆形图标按钮。本文基于 docs/UISymbolButton.md 与源码 SunnyUI/Controls/UISymbolButton.cs完整梳理该控件的 40 余项属性、字体图标的选取机制、圆形按钮与按钮组的实现原理以及图标不居中等常见问题的处理方案。控件定位与基础信息UISymbolButton是 字体图标按钮Font Icon Button默认属性为Text、默认事件为Click在 Visual Studio 工具箱中可直接拖入窗体。它与普通 UIButton 的关系如下继承链UISymbolButton - UIButton - UIControl因此 UIButton 的点击、悬浮、按下、选中、禁用等状态机制和角标Tips能力全部继承实现了ISymbol接口具备统一的字体图标描述能力构造时默认ShowText false见 UISymbolButton.cs即图标按钮默认以图标为主体显示。从源码注释看该控件自 V2.2.02020-01-01随框架演进经历了图片与文字摆放V2.2.6、图标颜色V3.0.9、主题配色重构V3.1.1等多个版本的完善。属性全景从布局到状态配色原文档给出的属性表是使用该控件的第一手参考下面按功能分组完整列出并补充源码中的实际默认值作为对照。基础与布局属性属性说明类型默认值Style主题样式UIStyleBlueStyleCustomMode获取或设置可以自定义主题风格boolfalseText获取或设置显示的文本string-RadiusSides圆角显示位置UICornerRadiusSidesAllRadius圆角角度int5RectSides边框显示位置ToolStripStatusLabelBorderSidesAllTextAlign文字对齐方向ContentAlignmentMiddleCenterSymbol字体图标int61452SymbolSize字体图标大小int24Image图片Image-ImageAlign图片放置位置ContentAlignmentMiddleCenterImageInterval图片文字间间隔int2IsCircle是否是圆形boolfalseCircleRectWidth圆形边框大小int1Selected是否选中boolfalseDialogResult指定标识符以指示对话框的返回值DialogResultNoneShowFocusLine显示激活时边框线boolfalseShowTips是否显示角标boolfalseTipsText角标文字string-TipsFont角标文字字体Font-TipsColor角标文字颜色ColorRedTagString获取或设置包含有关控件的数据的对象字符串string-Version版本string-UseDoubleClick是否启用双击事件boolfalse需要说明的是属性表中的Symbol默认值 61452 对应经典 FontAwesome 图标码点而源码字段初始化值为361452见 UISymbolButton.cs二者分别属于不同字体图标编码区间具体差异见后文字体图标一节。状态配色属性图标按钮在普通填充色/边框色/前景色之外为每种交互状态都提供了独立配色共 15 个 Color 类型属性均可在StyleCustomMode true时自定义状态填充颜色边框颜色字体颜色默认FillColorRectColorForeColor不可用FillDisableColorRectDisableColorForeDisableColor鼠标移上FillHoverColorRectHoverColorForeHoverColor鼠标按下FillPressColorRectPressColorForePressColor选中FillSelectedColorRectSelectedColorForeSelectedColor这些属性的默认色值来自 Blue 主题例如填充色80, 160, 255、移上填充色115, 179, 255、按下/选中填充色64, 128, 204见 UIButton.cs。状态色的优先级逻辑在GetSymbolForeColor()中体现移上Hover→ 按下Press→ 选中Selected→ 焦点按下色依次覆盖禁用时统一使用symbolDisableColor默认109, 109, 103见 UISymbolButton.cs。此外UISymbolButton还额外提供图标自身的颜色控制属性这是普通按钮不具备的SymbolColor图标颜色默认 WhiteSymbolHoverColor/SymbolPressColor/SymbolSelectedColor/SymbolDisableColor图标在各状态下的颜色SymbolRotate图标旋转角度0~360SymbolOffset图标偏移位置Point 类型默认 0,0。切换主题时这些图标色由SetStyleColor(UIBaseStyle)统一从主题色板同步见 UISymbolButton.cs因此默认主题下无需手工设置即可随Style联动。字体图标Symbol 与 SymbolSizeSymbol是控件的灵魂属性它用一个 int 值表示字体图标编码。原文档配套的图标总览如下Symbol与SymbolSize的用法要点Symbol字体图标的 int 编码属性面板中可直接输入数值SymbolSize字体图标的大小像素源码中做了边界钳制取值被限制在 16~128 之间Math.Max(value, 16)/Math.Min(value, 128)见 UISymbolButton.cs小于 16 会按 16 处理。在属性窗口中点击 Symbol 右侧的按钮会弹出字体图标选择面板面板中鼠标移到图标上时显示的数字即为该图标的Symbol字符值点击图标即可完成设置。这一交互背后Symbol属性挂载了UIImagePropertyEditor类型编辑器见 UISymbolButton.cs从源码看Symbol 0时控件才绘制图标。关于编码区间的实际使用Demo 中大量按钮使用361xxx系列编码如 361452、361453同时也有61452、61530、57607、61809等值并存见 FButton.Designer.cs说明 SunnyUI 内置了多套字体图标字库编码值需与对应字体族匹配才能正确显示。图标最终由 UFontImageHelper.cs 的DrawFontImage扩展方法渲染先根据编码取字体再将码点通过char.ConvertFromUtf32转为字符以抗锯齿方式绘制支持偏移与旋转。圆形按钮IsCircle 与 CircleRectWidth将IsCircle设为true即可得到圆形图标按钮CircleRectWidth控制圆形边框粗细默认 1从源码看圆形模式对绘制路径做了专门处理OnPaintFill用Min(Width, Height) - 2 - CircleRectWidth计算内切圆直径以FillEllipse填充见 UISymbolButton.csOnPaintRect用CircleRectWidth宽度的画笔DrawEllipse绘制圆形边框并切换到高质量抗锯齿渲染见 UISymbolButton.cs设置IsCircle true时控件会自动清空Text见 UISymbolButton.cs保证圆形内只显示图标。Demo 中典型的圆形按钮做法可参考 FButton.Designer.csIsCircle true、Size (35, 35)、StyleCustomMode true并自定义一组红色系配色同时配合Style UIStyle.Custom独立调色。若想控制图标颜色可仿照 FButton.Designer.cs 中SymbolColor、SymbolHoverColor、SymbolPressColor、SymbolSelectedColor四件套的写法。按钮组用 RadiusSides 拼接分段式按钮图标按钮与 UIButton 一样支持RadiusSides圆角显示位置UICornerRadiusSides枚举和RectSides边框显示位置借助二者可以拼出分段式按钮组效果组合规则原文档给出的标准做法左侧按钮RadiusSides设为LeftTop | LeftBottom只显示左边两个圆角中间按钮RadiusSides设为None无圆角右侧按钮RadiusSides设为RightTop | RightBottom只显示右边两个圆角。Demo 中已有一组现成的五按钮分段示例见 FButton.Designer.cs左侧按钮如 uiSymbolButton18RadiusSides LeftTop | LeftBottom中间按钮uiSymbolButton13~17、21、22、23RadiusSides None最右侧按钮uiSymbolButton20、24RadiusSides RightTop | RightBottom相邻按钮尺寸一致46×35、紧贴排列即可形成连续的胶囊形按钮组。若需要单选行为可配合 UIButton 的SelectedGroupIndex属性同一父容器下GroupIndex相同的按钮其中一个Selected true时其他按钮会自动取消选中见 UIButton.cs适合制作页签切换类图标按钮组。自定义图片Image 系列属性UISymbolButton不仅支持字体图标还支持以普通图片作为按钮图形Image系列属性负责图片的加载与排布Image按钮上显示的图片Image 类型ImageAlign图片放置位置ContentAlignment默认MiddleCenterImageInterval图片与文字之间的间隔int默认 2源码中做了Math.Max(0, value)下限保护见 UISymbolButton.cs。原文档示例设置Image属性后图标与文字的排布逻辑见OnPaintUISymbolButton.cs仅文字文字按TextAlign居中绘制仅图标/图片按ImageAlign定位图标或图片与文字并存二者按ImageSize.Width ImageInterval TextSize.Width计算总宽度后整体居中文字排在图标右侧间距即ImageInterval当ImageAlign与TextAlign都不为MiddleCenter时按九个方位TopLeft、TopCenter、TopRight、MiddleLeft……BottomRight分别计算图标位置文字按TextAlign排布。Demo 中的实际案例可参考 FButton.Designer.csImage Resources.save、ImageAlign MiddleLeft、Text Save、TextAlign MiddleRight再配合Padding(5, 0, 10, 0)微调间距实现左图标右文字的工具按钮。图标不居中的处理ImageAlign 与 Padding 微调字体图标字体并非等宽等高绘制在指定区域时经常出现视觉上的不居中现象。原文档给出了标准处理方案设置ImageAlign TopLeft然后设置Padding的Left和Top属性例如5, 5, 0, 0。从源码看当ImageAlign为TopLeft时图标以Padding.Left、Padding.Top为绘制起点见 UISymbolButton.cs因此通过 Padding 可以精确补偿图标字体的内边距偏差。同理源码中每个非居中方位都严格考虑了Padding.Left/Right/Top/Bottom为手工微调提供了统一的坐标基准。交互与事件补充继承自 UIButton 的能力让图标按钮具备完整交互Click默认事件与UseDoubleClick双击事件点击时若按钮设置了DialogResult会同步设置所在窗体的返回值并触发PerformClick逻辑见 UIButton.cs键盘支持焦点状态下按空格触发PerformClickText中后的字符可作为助记键UseMnemonic默认开启见 UIButton.cs角标ShowTips true后设置TipsText、TipsFont、TipsColor默认 Red、TipsForeColor即可在右上角显示数字角标见 UIButton.cs焦点指示ShowFocusLine true时以虚线圆角框显示激活状态见 UIButton.cs。Demo 中按钮页还演示了图标按钮与 UIToolTip 的组合例如 FButton.cs 中为图标按钮设置带图标、字号与颜色的 ToolTipuiSymbolButton25_Click展示了图标按钮作为导航入口调用Frame.SelectPage(5000)切换页面见 FButton.cs。小结UISymbolButton是 SunnyUI 中图标化操作入口的首选控件以Symbol字体图标为核心、SymbolSize控制大小通过IsCircle/CircleRectWidth可快速构造圆形图标按钮借助RadiusSides/RectSides能拼出分段按钮组Image系列属性让图片与文字自由排布15 个状态配色属性配合StyleCustomMode可实现完全自定义的视觉风格。若在 WinForm 项目中需要兼具图标表现力与完整交互态的按钮可直接参考 FButton 演示页 的配置方式再对照 UISymbolButton.cs 源码理解其绘制细节。赞分享UI组件桌面应用【免费下载链接】SunnyUISunnyUI.NET 是基于.NET Framework 4.0、.NET6、.NET8、.NET9 框架的 C# WinForm UI、开源控件库、工具类库、扩展类库、多页面开发框架。项目地址https://gitcode.com/gh_mirrors/su/SunnyUI点击查看免费下载相关推荐SunnyUI UISymbolLabel 字体图标标签控件详解属性配置、Symbol 编码与图标选择器实战SunnyUI UISymbolLabel 字体图标标签控件详解属性配置、Symbol 编码与图标选择器实战 UISymbolLabel 是 SunnyUI.UI组件桌面应用SunnyUI 控件详解UIButton 操作按钮的完整属性体系与圆角实战SunnyUI 控件详解UIButton 操作按钮的完整属性体系与圆角实战 本文以 SunnyUI 开源 WinForm 控件库中的 UIButton 常用UI组件桌面应用rsuite IconButton 圆形图标按钮实战circle 属性详解与源码实现rsuite IconButton 圆形图标按钮实战circle 属性详解与源码实现 圆形图标按钮Circle IconButton是 rsuite 组件前端UI组件上一篇Proxmox VE Helper-Scripts终极指南CIS-CAT安全合规检查工具详解下一篇告别算子开发困境ONNX函数定义的完整实践指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考