企业官网建设流程全解析

• UI组件
• 桌面应用

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.0（2020-01-01）随框架演进，经历了图片与文字摆放（V2.2.6）、图标颜色（V3.0.9）、主题配色重构（V3.1.1）等多个版本的完善。

属性全景：从布局到状态配色

原文档给出的属性表是使用该控件的第一手参考，下面按功能分组完整列出，并补充源码中的实际默认值作为对照。

基础与布局属性

需要说明的是，属性表中的Symbol默认值 61452 对应经典 FontAwesome 图标码点；而源码字段初始化值为361452（见 UISymbolButton.cs），二者分别属于不同字体图标编码区间，具体差异见后文"字体图标"一节。

状态配色属性

图标按钮在普通填充色/边框色/前景色之外，为每种交互状态都提供了独立配色，共 15 个 Color 类型属性，均可在StyleCustomMode = true时自定义：

这些属性的默认色值来自 Blue 主题（例如填充色80, 160, 255、移上填充色115, 179, 255、按下/选中填充色64, 128, 204，见 UIButton.cs）。状态色的优先级逻辑在GetSymbolForeColor()中体现：移上（Hover）→ 按下（Press）→ 选中（Selected）→ 焦点按下色，依次覆盖，禁用时统一使用symbolDisableColor（默认109, 109, 103，见 UISymbolButton.cs）。

此外，UISymbolButton还额外提供图标自身的颜色控制属性，这是普通按钮不具备的：

• SymbolColor：图标颜色，默认 White；
• SymbolHoverColor/SymbolPressColor/SymbolSelectedColor/SymbolDisableColor：图标在各状态下的颜色；
• SymbolRotate：图标旋转角度（0~360）；
• SymbolOffset：图标偏移位置（Point 类型，默认 0,0）。

切换主题时，这些图标色由SetStyleColor(UIBaseStyle)统一从主题色板同步（见 UISymbolButton.cs），因此默认主题下无需手工设置即可随Style联动。

字体图标：Symbol 与 SymbolSize

Symbol是控件的灵魂属性，它用一个 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.cs）；
• OnPaintRect：用CircleRectWidth宽度的画笔DrawEllipse绘制圆形边框，并切换到高质量抗锯齿渲染（见 UISymbolButton.cs）；
• 设置IsCircle = true时控件会自动清空Text（见 UISymbolButton.cs），保证圆形内只显示图标。

Demo 中典型的圆形按钮做法可参考 FButton.Designer.cs：IsCircle = 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：左侧按钮（如 uiSymbolButton18）RadiusSides = LeftTop | LeftBottom，中间按钮（uiSymbolButton13~17、21、22、23）RadiusSides = None，最右侧按钮（uiSymbolButton20、24）RadiusSides = RightTop | RightBottom，相邻按钮尺寸一致（46×35）、紧贴排列即可形成连续的胶囊形按钮组。

若需要"单选"行为，可配合 UIButton 的Selected+GroupIndex属性：同一父容器下GroupIndex相同的按钮，其中一个Selected = true时其他按钮会自动取消选中（见 UIButton.cs），适合制作页签切换类图标按钮组。

自定义图片：Image 系列属性

UISymbolButton不仅支持字体图标，还支持以普通图片作为按钮图形，Image系列属性负责图片的加载与排布：

• Image：按钮上显示的图片（Image 类型）；
• ImageAlign：图片放置位置（ContentAlignment），默认MiddleCenter；
• ImageInterval：图片与文字之间的间隔（int，默认 2，源码中做了Math.Max(0, value)下限保护，见 UISymbolButton.cs）。

原文档示例：

设置Image属性后，图标与文字的排布逻辑见OnPaint（UISymbolButton.cs）：

• 仅文字：文字按TextAlign居中绘制；
• 仅图标/图片：按ImageAlign定位；
• 图标（或图片）与文字并存：二者按ImageSize.Width + ImageInterval + TextSize.Width计算总宽度后整体居中，文字排在图标右侧，间距即ImageInterval；
• 当ImageAlign与TextAlign都不为MiddleCenter时，按九个方位（TopLeft、TopCenter、TopRight、MiddleLeft……BottomRight）分别计算图标位置，文字按TextAlign排布。

Demo 中的实际案例可参考 FButton.Designer.cs：Image = 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）；
• 键盘支持：焦点状态下按空格触发PerformClick；Text中&后的字符可作为助记键（UseMnemonic，默认开启，见 UIButton.cs）；
• 角标：ShowTips = true后设置TipsText、TipsFont、TipsColor（默认 Red）、TipsForeColor即可在右上角显示数字角标（见 UIButton.cs）；
• 焦点指示：ShowFocusLine = true时以虚线圆角框显示激活状态（见 UIButton.cs）。

Demo 中按钮页还演示了图标按钮与 UIToolTip 的组合，例如 FButton.cs 中为图标按钮设置带图标、字号与颜色的 ToolTip；uiSymbolButton25_Click展示了图标按钮作为导航入口调用Frame.SelectPage(5000)切换页面（见 FButton.cs）。

小结

UISymbolButton是 SunnyUI 中"图标化操作入口"的首选控件：以Symbol字体图标为核心、SymbolSize控制大小，通过IsCircle/CircleRectWidth可快速构造圆形图标按钮，借助RadiusSides/RectSides能拼出分段按钮组，Image系列属性让图片与文字自由排布，15 个状态配色属性配合StyleCustomMode可实现完全自定义的视觉风格。若在 WinForm 项目中需要兼具图标表现力与完整交互态的按钮，可直接参考 FButton 演示页 的配置方式，再对照 UISymbolButton.cs 源码理解其绘制细节。

• UI组件
• 桌面应用