ARTICLE DETAIL

资讯详情

深耕网站视觉设计与运营推广的一线实战洞察。

SunnyUI 带颜色标签控件 UIMarkLabel 完全指南:属性、标签位置与主题联动机制

SunnyUI 带颜色标签控件 UIMarkLabel 完全指南:属性、标签位置与主题联动机制 UI组件桌面应用【免费下载链接】SunnyUISunnyUI.NET 是基于.NET Framework 4.0、.NET6、.NET8、.NET9 框架的 C# WinForm UI、开源控件库、工具类库、扩展类库、多页面开发框架。项目地址https://gitcode.com/gh_mirrors/su/SunnyUI点击查看免费下载UIMarkLabel 是 SunnyUI.NET 控件库基于 .NET Framework 4.0、.NET6、.NET8、.NET9 的 C# WinForm UI 开源控件库中用于在文本旁侧绘制一条颜色标签Mark的标签控件常用于列表项、表单分组、状态标题等场景的强调与视觉引导。阅读本文后你将掌握 UIMarkLabel 的全部公开属性与默认值、四种标签方向的切换规则以及它与 SunnyUI 主题配色系统之间的联动实现细节并能在设计器或代码中直接落地使用。控件定位UIMarkLabel 是什么UIMarkLabel 是带颜色标签的标签控件它在传统文本标签的基础上沿控件边缘绘制一条与主题色一致的色条从而在不引入额外图形元素的情况下实现文本强调。从源码结构看UIMarkLabel.cs 直接继承自 UILabel.cs因此它天然具备 SunnyUI 标签家族的文本显示、主题换肤IStyleInterface、窗体缩放IZoomScale与多语言翻译IFormTranslator能力同时通过重写绘图OnPaint叠加了独特的色条效果。默认属性Text[DefaultProperty(Text)]默认事件Click[DefaultEvent(Click)]控件在属性面板中的描述为带颜色标签控件见 UIMarkLabel.cs可直接从工具箱拖入 WinForm 设计器使用。属性列表核心公开属性与默认值下表完整列出 UIMarkLabel 的公开属性及其默认值与官方文档一致并补充了源码中的实现细节属性说明类型默认值Style主题样式UIStyleBlueStyleCustomMode获取或设置可以自定义主题风格boolfalseText获取或设置显示的文本string-AutoSize自动大小booltrueForeColor字体颜色Color-MarkSize标签大小色条宽度/高度像素int3MarkPos标签位置UIMarkPosLeftMarkColor标签颜色Color-TagString获取或设置包含有关控件的数据的对象字符串string-Version版本string-其中几项属性值得展开说明其底层行为MarkSize色条在左/右方向时的宽度、在上/下方向时的高度源码默认值为3通过[DefaultValue(3)]声明UIMarkLabel.cs。改变该值会触发Invalidate()立即重绘。MarkColor色条填充颜色。属性默认值声明为80, 160, 255RGB与 SunnyUI 蓝色主题的主色一致构造函数中实际取UIStyles.Blue.MarkLabelForeColor作为初始值UIMarkLabel.cs。TagString / VersionTagString用于携带与控件关联的任意字符串数据Version来自UIGlobal.Version两者均在基类 UILabel 中定义UILabel.cs并向下继承给 UIMarkLabel。标签位置四个方向的切换与自动 PaddingUIMarkLabel 的色条支持四个显示位置左Left、右Right、下Bottom、上Top对应控件内部定义的枚举UIMarkPosUIMarkLabel.cspublic enum UIMarkPos { Left, Top, Right, Bottom }官方文档给出的四方向效果如下图所示位置切换如何影响布局MarkPos属性在赋值时不仅触发重绘还会自动改写控件的Padding为色条预留出MarkSize 2像素的空间保证文本不会被色条遮挡UIMarkLabel.csLeftPadding new Padding(MarkSize 2, 0, 0, 0)左侧留白RightPadding new Padding(0, 0, MarkSize 2, 0)右侧留白TopPadding new Padding(0, MarkSize 2, 0, 0)上方留白BottomPadding new Padding(0, 0, 0, MarkSize 2)下方留白这一设计与 Demo 工程 FLabel.Designer.cs 中的四个示例控件完全吻合——uiMarkLabel1Left的 Padding 为(5, 0, 0, 0)、uiMarkLabel3Right为(0, 0, 5, 0)、uiMarkLabel2Bottom为(0, 0, 0, 5)、uiMarkLabel4Top为(0, 5, 0, 0)即在 MarkSize3 时统一留出 5 像素。绘图原理色条是如何画出来的UIMarkLabel 的视觉效果完全由重写的OnPaint方法实现UIMarkLabel.cs核心逻辑分两步自动尺寸计算当AutoSize true且未停靠Dock DockStyle.None时先用TextRenderer.MeasureText测量文本尺寸再根据标签方向累加MarkSize 2得出控件宽高并同步赋值左/右方向时Width 文本宽 MarkSize 2高度保持文本高上/下方向时Height 文本高 MarkSize 2宽度保持文本宽。色条绘制根据MarkPos用FillRectangle填充一个细长矩形UIMarkLabel.csLeft在(0, 0)处填充MarkSize × Height的竖条Right在(Width - MarkSize, 0)处填充竖条Top在(0, 0)处填充Width × MarkSize的横条Bottom在(0, Height - MarkSize)处填充横条。可以看到色条总是紧贴控件边缘贯通整个宽/高这正是带颜色标签视觉风格的关键。主题联动MarkColor 跟随 Style 自动换色UIMarkLabel 是典型的主题驱动控件当切换 SunnyUI 主题样式时色条颜色会自动跟随主题主色变化。其机制位于SetStyleColor(UIBaseStyle uiColor)方法中UIMarkLabel.cspublic override void SetStyleColor(UIBaseStyle uiColor) { base.SetStyleColor(uiColor); markColor uiColor.MarkLabelForeColor; }而MarkLabelForeColor由主题配色类统一提供UIStyleColor.cs在主题初始化时被赋值为该主题的PrimaryColorUIStyleColor.cs。这意味着默认Style Blue时色条为蓝色主题主色80, 160, 255切换到其他内置主题如 Green、Orange、Purple 等时色条自动变为对应主题色若将StyleCustomMode设为true进入自定义风格模式则可绕过主题机制直接通过MarkColor指定任意颜色。如需查阅各主题下MarkLabelForeColor的具体取值可参考主题配色定义文件 UIStyleColor.cs并可通过 UIForm.cs 中的UIStyleManager相关接口在运行时动态切换主题。实战在代码中创建与配置 UIMarkLabel除了在设计器中拖拽配置也可以完全通过代码创建示例如下using Sunny.UI; // 创建一个左侧色条的状态标签 UIMarkLabel markLabel new UIMarkLabel { Text 核心模块, AutoSize true, MarkSize 4, // 色条宽度 4 像素 MarkPos UIMarkLabel.UIMarkPos.Left, // 默认即为 Left Font UIStyles.Font() // 使用 SunnyUI 默认字体 }; // 让色条颜色跟随当前主题 markLabel.Style UIStyle.Blue; // 或者在自定义风格模式下指定任意颜色 // markLabel.StyleCustomMode true; // markLabel.MarkColor Color.FromArgb(255, 128, 0);需要注意的几点构造函数会自动设置Padding为(MarkSize 2, 0, 0, 0)因此代码中无需手动处理色条占位MarkPos每次赋值都会重新计算 Padding建议先设置MarkSize再设置MarkPos以确保留白宽度正确AutoSize true时控件尺寸由文本与色条共同决定适合独立放置若需固定尺寸将AutoSize置为false并手动指定Size即可。验证与延伸阅读SunnyUI.Demo 演示工程在标签页 FLabel.Designer.cs 中一次性展示了 Left / Right / Bottom / Top 四种标签方向的标准配置运行 SunnyUI.Demo.sln 中的 FLabel 页面即可直观对比各方向效果。UIMarkLabel 因其简洁的文本 主题色条组合非常适合作为分组标题、数据条目前缀标识和导航强调元素配合 UIForm.cs 与 UIStyleManager.cs 的主题切换能力可以轻松实现全界面视觉风格的一致性。赞分享UI组件桌面应用【免费下载链接】SunnyUISunnyUI.NET 是基于.NET Framework 4.0、.NET6、.NET8、.NET9 框架的 C# WinForm UI、开源控件库、工具类库、扩展类库、多页面开发框架。项目地址https://gitcode.com/gh_mirrors/su/SunnyUI点击查看免费下载相关推荐5分钟生成黑苹果EFIOpCore-Simplify实操复盘与避坑清单5分钟生成黑苹果EFIOpCore Simplify实操复盘与避坑清单 给现有台式机装macOS时最劝退的往往不是安装过程而是装之前的配置环节查指南、挑UI组件桌面应用FoundationDB 事务状态存储txnStateStore深度解析引导、复制、持久化与内存实现FoundationDB 事务状态存储txnStateStore深度解析引导、复制、持久化与内存实现 导读 本文以 FoundationDB 设计文档 dUI组件桌面应用ng-zorro-antd 缎带徽标nz-ribbon完全指南用法、颜色与位置定制ng zorro antd 缎带徽标nz ribbon完全指南用法、颜色与位置定制 导读 缎带Ribbon是 ng zorro antd 徽标BadUI组件前端上一篇掌握 Rome 项目初始化深入解析 rome init 命令的配置生成与最佳实践下一篇6大技术域16套工作流ComfyUI-Workflows-ZHO 上手手册创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表