尧图网页设计 
简介这是一套基于 Ant Design 设计语言的 WinForm UI 界面库面向希望为 Windows 桌面应用注入现代前端视觉风格的 .NET 开发者尤其适合需要在老旧系统上保持兼容、又追求简洁美观界面的中高级开发者。界面库采用纯 GDI 绘图不依赖任何图片资源全面支持 AOT 预编译最低兼容 .NET Framework 4.0可覆盖较老版本的操作系统。资源包共 949 个文件以 535 个 cs 源码、147 个 md 说明文档、63 个 resx 资源文件为主另含 png、jpg、gif 等预览图与少量工程配置压缩包约 15.1MB。内容涵盖按钮、表单、表格、树形控件、标签页、菜单、图表、分割面板等常用组件的实现与渲染逻辑并配有文档与示例说明便于读者理解 GDI 自绘思路、组件样式组织方式与 AOT 兼容处理。目前已有 167 人学习适合用于桌面应用原型设计、组件演示与教学示例帮助开发者快速构建接近现代 Web 应用质感的桌面界面。1. 纯 GDI 绘制的 WinForm 界面库为什么它能把 AntDesign 风格带进桌面应用做过 WinForm 项目的人大概都有过这种体验功能逻辑写得飞快一到界面美化就卡住了。想做出 AntDesign 那种干净、现代、带圆角和阴影的视觉效果传统做法是引入一堆 PNG 图片资源按钮一套图、输入框一套图、选中态再来一套项目还没上线资源文件夹已经几十兆。更麻烦的是这些图片在高 DPI 屏幕上模糊、在换主题时全部作废、在 AOT 编译时还可能因为资源嵌入方式出问题。这个标题讲的方案走了一条完全不同的路用纯 GDI 绘图来渲染所有控件外观不依赖任何图片资源同时全面支持 AOT 编译最低兼容到 .NET Framework 4.0。换句话说它想做的事情是——把 AntDesign 的设计语言圆角、留白、主色体系、状态反馈用代码画出来而不是贴出来。这解决的核心痛点是资源零依赖、主题可动态切换、高分屏不失真、发布体积小。这套方案适合谁如果你正在维护一个 .NET Framework 4.0 以上的 WinForm 老项目想在不换框架的前提下把界面拉到现代水准或者你在做工业控制上位机winform industrial control需要长时间运行、低资源占用、界面还得过得去又或者你在评估 winform 界面美化的技术路线纠结到底该用图片还是自绘——那这篇内容值得你花时间看完。2. 纯 GDI 自绘控件的底层逻辑与最小可运行框架2.1 为什么选 GDI 而不是 GDI 或 WPF 混合先说选型理由。GDISystem.Drawing 命名空间下的 Graphics 类在 WinForm 里用得最多但它有个问题在 .NET Framework 4.0 上性能一般尤其是频繁重绘时容易闪烁。纯 GDI通过 P/Invoke 调用 gdi32.dll虽然写起来更底层但胜在绘制路径短、可控性强而且对 AOT 友好——GDI 在某些裁剪环境下会有反射依赖GDI 没有。另一个选择是不用 WPF 混合。WPF 确实能做出漂亮的界面但引入 WPF 意味着要么整个项目迁移要么用 ElementHost 嵌入后者在 .NET Framework 4.0 上性能堪忧而且 AOT 支持几乎不可能。所以这个方案锁死纯 WinForm GDI 自绘是一个务实的选择。AntDesign 的设计语言核心要素其实不多圆角矩形、主色#1890FF、间距体系8px 基准、状态色成功 #52C41A、警告 #FAAD14、错误 #F5222D、阴影层次。这些用 GDI 都能画出来关键是封装好绘制方法。2.2 最小自绘控件框架从 Control 继承并接管 OnPaint下面是一个最小可运行的自绘按钮框架展示了纯 GDI 绘制圆角矩形和文字的核心逻辑。你可以直接复制到一个新的 WinForm 项目里跑起来。using System; using System.Drawing; using System.Drawing.Drawing2D; using System.Runtime.InteropServices; using System.Windows.Forms; public class AntButton : Control { // 主色对应 AntDesign 的 #1890FF private Color _primaryColor Color.FromArgb(24, 144, 255); private Color _hoverColor Color.FromArgb(64, 169, 255); private Color _pressedColor Color.FromArgb(9, 88, 217); private bool _isHover false; private bool _isPressed false; public AntButton() { // 开启双缓冲减少闪烁 SetStyle(ControlStyles.AllPaintingInWmPaint | ControlStyles.UserPaint | ControlStyles.OptimizedDoubleBuffer | ControlStyles.ResizeRedraw, true); Size new Size(120, 32); Cursor Cursors.Hand; } protected override void OnMouseEnter(EventArgs e) { _isHover true; Invalidate(); // 触发重绘 base.OnMouseEnter(e); } protected override void OnMouseLeave(EventArgs e) { _isHover false; _isPressed false; Invalidate(); base.OnMouseLeave(e); } protected override void OnMouseDown(MouseEventArgs e) { _isPressed true; Invalidate(); base.OnMouseDown(e); } protected override void OnMouseUp(MouseEventArgs e) { _isPressed false; Invalidate(); base.OnMouseUp(e); } protected override void OnPaint(PaintEventArgs e) { Graphics g e.Graphics; g.SmoothingMode SmoothingMode.AntiAlias; // 抗锯齿圆角必须 g.TextRenderingHint System.Drawing.Text.TextRenderingHint.ClearTypeGridFit; // 根据状态选颜色 Color backColor _primaryColor; if (_isPressed) backColor _pressedColor; else if (_isHover) backColor _hoverColor; // 绘制圆角矩形圆角半径 4px符合 AntDesign 按钮规范 using (GraphicsPath path CreateRoundedRect(new Rectangle(0, 0, Width - 1, Height - 1), 4)) using (SolidBrush brush new SolidBrush(backColor)) { g.FillPath(brush, path); } // 绘制文字居中 using (StringFormat sf new StringFormat()) { sf.Alignment StringAlignment.Center; sf.LineAlignment StringAlignment.Center; using (SolidBrush textBrush new SolidBrush(Color.White)) { g.DrawString(Text, Font, textBrush, new RectangleF(0, 0, Width, Height), sf); } } } // 生成圆角矩形路径的辅助方法 private GraphicsPath CreateRoundedRect(Rectangle rect, int radius) { GraphicsPath path new GraphicsPath(); int diameter radius * 2; path.AddArc(rect.X, rect.Y, diameter, diameter, 180, 90); path.AddArc(rect.Right - diameter, rect.Y, diameter, diameter, 270, 90); path.AddArc(rect.Right - diameter, rect.Bottom - diameter, diameter, diameter, 0, 90); path.AddArc(rect.X, rect.Bottom - diameter, diameter, diameter, 90, 90); path.CloseFigure(); return path; } }这段代码的逻辑说明继承自Control而不是Button是为了完全接管绘制过程避免系统默认样式干扰。SetStyle里开启OptimizedDoubleBuffer和AllPaintingInWmPaint是自绘控件的标配否则拖动窗口时会闪得没法看。OnPaint里先设置SmoothingMode.AntiAlias这是圆角不出现锯齿的关键。颜色状态机默认、悬停、按下对应 AntDesign 的交互反馈规范。参数说明圆角半径设为 4px这是 AntDesign 按钮的标准值如果你要做卡片半径可以调到 8px。主色#1890FF是 AntDesign 的默认主色如果你要换主题只需要改_primaryColor等几个字段不需要动绘制逻辑。控件默认高度 32px这是 AntDesign 中号按钮的高度小号是 24px大号是 40px。2.3 不用图片资源那图标怎么画这是很多人会问的问题按钮上的图标怎么办纯 GDI 方案里图标有两种做法。第一种是用字体图标比如把 AntDesign 的图标做成一个 TTF 字体文件然后用g.DrawString绘制对应字符。第二种是用GraphicsPath直接画简单几何图形比如加号、箭头、勾选标记。对于复杂图标字体方案更实际对于简单指示符直接画路径性能更好。字体图标的加载方式如下// 从嵌入资源加载 TTF 字体不依赖外部文件 private FontFamily LoadIconFont() { // 假设字体文件已作为嵌入资源加入项目 var assembly typeof(AntButton).Assembly; using (var stream assembly.GetManifestResourceStream(YourNamespace.Fonts.anticon.ttf)) { // GDI 的 PrivateFontCollection 支持从流加载 var pfc new System.Drawing.Text.PrivateFontCollection(); // 注意需要将流复制到字节数组因为 AddMemoryFont 需要 IntPtr byte[] fontData new byte[stream.Length]; stream.Read(fontData, 0, fontData.Length); IntPtr fontPtr Marshal.AllocCoTaskMem(fontData.Length); Marshal.Copy(fontData, 0, fontPtr, fontData.Length); pfc.AddMemoryFont(fontPtr, fontData.Length); Marshal.FreeCoTaskMem(fontPtr); return pfc.Families[0]; } }这里有个坑要注意AddMemoryFont之后不能立即释放fontPtr否则字体可能加载失败。稳妥做法是把PrivateFontCollection实例保持为静态字段在应用程序生命周期内不释放。另外AOT 编译时嵌入资源的方式和普通编译略有不同需要确保资源在裁剪后仍然存在这个后面避坑章节会细说。3. 把 AntDesign 设计语言翻译成 GDI 绘制代码的关键映射3.1 颜色体系与主题切换的实现方式AntDesign 的颜色体系不是一堆散落的色值而是一套有逻辑的调色板。主色、辅助色、中性色、功能色每种都有明确的用途。在 GDI 自绘方案里我一般会定义一个静态主题类来集中管理这些颜色而不是在每个控件里硬编码。public static class AntTheme { // 主色及其衍生 public static Color Primary Color.FromArgb(24, 144, 255); public static Color PrimaryHover Color.FromArgb(64, 169, 255); public static Color PrimaryActive Color.FromArgb(9, 88, 217); public static Color PrimaryOutline Color.FromArgb(24, 144, 255, 60); // 带透明度 // 功能色 public static Color Success Color.FromArgb(82, 196, 26); public static Color Warning Color.FromArgb(250, 173, 20); public static Color Error Color.FromArgb(245, 34, 45); // 中性色 public static Color TextPrimary Color.FromArgb(0, 0, 0, 0.85); // 注意这里需要转换 public static Color TextSecondary Color.FromArgb(0, 0, 0, 0.45); public static Color Border Color.FromArgb(217, 217, 217); public static Color Background Color.FromArgb(245, 245, 245); // 主题切换切换主色时重新计算衍生色 public static void SetPrimary(Color color) { Primary color; PrimaryHover Lighten(color, 0.2f); PrimaryActive Darken(color, 0.2f); PrimaryOutline Color.FromArgb(60, color); } private static Color Lighten(Color c, float amount) { return Color.FromArgb(c.A, (int)Math.Min(255, c.R 255 * amount), (int)Math.Min(255, c.G 255 * amount), (int)Math.Min(255, c.B 255 * amount)); } private static Color Darken(Color c, float amount) { return Color.FromArgb(c.A, (int)Math.Max(0, c.R - 255 * amount), (int)Math.Max(0, c.G - 255 * amount), (int)Math.Max(0, c.B - 255 * amount)); } }这段代码的关键点在于主题切换不是简单地换一个颜色值而是要重新计算悬停色、按下色、轮廓色等衍生色。Lighten和Darken方法用简单的线性调整来模拟 AntDesign 的色板生成算法实际项目中如果你需要更精确的色板可以预计算一套色值表。注意上面TextPrimary的写法有问题——Color.FromArgb不接受 0 到 1 的浮点数作为 alpha。正确做法是Color.FromArgb(217, 0, 0, 0)表示 85% 不透明度的黑色。这个细节在写主题类时很容易翻车我见过不止一个项目在这里出 bug。3.2 圆角、阴影和间距的 GDI 实现细节圆角前面已经演示了GraphicsPath的做法。阴影在纯 GDI 里没有直接支持但可以用多层半透明圆角矩形叠加来模拟。具体做法是在控件背后画 3 到 5 层逐渐扩大、逐渐透明的圆角矩形形成柔和的阴影边缘。// 在控件背后绘制阴影需要在父容器的 OnPaint 里调用或者用单独的阴影控件 private void DrawShadow(Graphics g, Rectangle rect, int radius, int shadowSize) { for (int i shadowSize; i 0; i--) { int alpha (int)(30.0 / i); // 越外层越透明 using (GraphicsPath path CreateRoundedRect( new Rectangle(rect.X - i, rect.Y - i, rect.Width i * 2, rect.Height i * 2), radius i)) using (SolidBrush brush new SolidBrush(Color.FromArgb(alpha, 0, 0, 0))) { g.FillPath(brush, path); } } }参数说明shadowSize控制阴影扩散范围一般设为 4 到 8 像素alpha的计算方式决定了阴影的柔和程度30.0 / i是一个经验公式你可以根据实际效果调整。注意阴影绘制要在控件主体之前否则会盖住内容。间距体系方面AntDesign 用 8px 作为基准单位。在自绘控件里这意味着内边距、控件间距、文字与边框的距离都应该是 8 的倍数。我一般会定义一个const int AntUnit 8;然后在布局计算里用AntUnit * n来表示间距。这样做的好处是整体视觉节奏统一不会出现某个控件特别挤、某个特别松的情况。3.3 从单个控件到完整界面库的组织方式当你有了按钮、输入框、下拉框、表格这些基础控件之后下一步是让它们能组合成完整的界面。这里的关键是统一基类。我一般会定义一个AntControlBase继承自Control在里面处理公共的绘制逻辑比如边框、背景、焦点态然后各个具体控件继承它只实现自己特有的部分。public abstract class AntControlBase : Control { protected bool IsFocused { get; private set; } protected bool IsHover { get; private set; } protected AntControlBase() { SetStyle(ControlStyles.AllPaintingInWmPaint | ControlStyles.UserPaint | ControlStyles.OptimizedDoubleBuffer | ControlStyles.ResizeRedraw, true); } protected override void OnGotFocus(EventArgs e) { IsFocused true; Invalidate(); base.OnGotFocus(e); } protected override void OnLostFocus(EventArgs e) { IsFocused false; Invalidate(); base.OnLostFocus(e); } // 子类实现具体的绘制内容 protected abstract void OnPaintContent(Graphics g, Rectangle rect); protected override void OnPaint(PaintEventArgs e) { e.Graphics.SmoothingMode SmoothingMode.AntiAlias; e.Graphics.TextRenderingHint System.Drawing.Text.TextRenderingHint.ClearTypeGridFit; OnPaintContent(e.Graphics, ClientRectangle); } }这个基类的价值在于所有控件共享同一套双缓冲设置、抗锯齿设置、焦点管理逻辑。子类只需要关注自己的内容绘制。这种组织方式在控件数量超过 5 个之后会明显降低维护成本。对于表格类控件类似 DataGridView 的自绘版本核心难点是行高、列宽、滚动和虚拟化。如果数据量不大几百行以内可以直接在 OnPaint 里遍历绘制如果数据量大需要实现虚拟化——只绘制可见区域的行。这个在工业控制场景winform industrial control里尤其重要因为实时数据刷新频繁全量重绘会卡。4. AOT 编译与 .NET Framework 4.0 兼容的避坑清单4.1 坑一AOT 裁剪掉了反射调用的代码现象在 .NET 7/8 上开启 AOT 发布后程序运行时报MissingMethodException或TypeLoadException提示找不到某个类型或方法。原因AOT 编译器会进行裁剪trimming把没有静态引用的代码移除。如果你的控件库里有通过反射创建实例、或者通过Type.GetType动态加载的地方这些代码在裁剪后可能消失。解决在项目里添加TrimmerRootDescriptor文件显式保留需要的类型。或者更简单的方式——避免在控件库核心路径上使用反射。我一般会把所有控件的创建改成工厂模式用switch语句显式new而不是反射。如果确实需要反射在方法上加[DynamicDependency]特性标注。4.2 坑二.NET Framework 4.0 不支持某些 API现象代码在 .NET 6 上跑得好好的切到 .NET Framework 4.0 编译时报错提示找不到SpanT、ValueTuple或者某些Graphics的重载方法。原因.NET Framework 4.0 的 BCL 比较老很多现代 API 不存在。比如Graphics.DrawString的某些重载、Color.FromArgb的浮点参数版本在 4.0 上都没有。解决把目标框架设为 .NET Framework 4.0 后用条件编译或者手动降级 API。比如SpanT可以用数组加偏移量代替ValueTuple需要引入 NuGet 包System.ValueTuple。我一般会在项目里建一个Compat文件夹把不兼容的 API 封装成扩展方法上层代码统一调用扩展方法底层根据框架版本切换实现。4.3 坑三高 DPI 下自绘控件模糊或错位现象在 4K 屏幕上自绘控件的文字模糊圆角边缘有锯齿鼠标点击位置和控件实际位置有偏移。原因WinForm 默认是 DPI 不感知的系统会把整个窗口拉伸导致自绘内容被缩放后模糊。另外Control.MousePosition返回的是物理像素而控件坐标可能是逻辑像素两者不匹配就会导致点击偏移。解决在应用程序清单里声明 DPI 感知级别。对于 .NET Framework 4.0 项目需要在app.manifest里添加dpiAwaretrue/dpiAware。然后在代码里用Graphics.DpiX来动态计算尺寸而不是硬编码像素值。比如圆角半径应该是4 * (DpiX / 96)这样在高 DPI 下圆角会按比例放大不会显得太小。4.4 坑四双缓冲开启后仍然闪烁现象明明设置了OptimizedDoubleBuffer但快速拖动窗口或者频繁刷新数据时控件还是闪。原因双缓冲只对控件自身的绘制有效如果父容器在重绘时没有开启双缓冲或者控件背景被父容器先绘制了一遍仍然会闪。另外如果在OnPaint里调用了base.OnPaint系统可能会先画一遍背景。解决确保父容器也开启了双缓冲。对于自定义控件不要调用base.OnPaint而是完全接管绘制。如果控件有透明背景需求用SetStyle(ControlStyles.SupportsTransparentBackColor, true)并设置BackColor为透明而不是在OnPaint里手动绘制父容器背景。4.5 坑五字体图标在 AOT 下加载失败现象发布 AOT 版本后按钮上的图标变成方框或者空白但调试模式下正常。原因字体文件作为嵌入资源时AOT 裁剪可能把资源移除了或者GetManifestResourceStream返回 null。解决在项目文件里把字体资源标记为EmbeddedResource IncludeFonts\anticon.ttf /并且在裁剪配置里保留资源。更稳妥的做法是把字体文件放在输出目录用PrivateFontCollection.AddFontFile加载而不是嵌入资源。虽然这样多了一个文件但 AOT 兼容性最好。5. 工业控制场景下的实战技巧实时数据刷新与主题热切换工业控制上位机winform industrial control是这套方案的一个典型应用场景。这类程序通常需要长时间运行界面上有大量实时数据刷新同时操作员可能希望切换深色/浅色主题来适应不同光照环境。下面说两个我在实际项目里验证过的技巧。第一个技巧是局部刷新代替全量重绘。当某个仪表盘或数据表格的数字变化时不要调用Invalidate()重绘整个控件而是用Invalidate(Rectangle)只重绘变化区域。比如一个温度显示控件只有数字部分在变那就只重绘数字所在的矩形区域。这个优化在数据刷新频率超过 10Hz 时效果非常明显CPU 占用能从 15% 降到 3% 以下。// 只重绘数值区域而不是整个控件 private Rectangle _valueRect new Rectangle(10, 10, 80, 30); public void UpdateValue(double newValue) { _currentValue newValue; Invalidate(_valueRect); // 局部刷新 }第二个技巧是主题热切换时不重建控件。很多人的做法是切换主题时销毁所有控件重新创建这样会导致闪烁和状态丢失。正确做法是让所有控件订阅一个静态的ThemeChanged事件在事件处理里调用Invalidate()并重新读取主题颜色。由于颜色是从静态主题类读取的切换主题只需要改静态类的字段值然后通知所有控件重绘即可。// 主题管理器 public static class ThemeManager { public static event Action ThemeChanged; public static void ApplyTheme(bool isDark) { if (isDark) { AntTheme.SetPrimary(Color.FromArgb(24, 144, 255)); AntTheme.Background Color.FromArgb(20, 20, 20); AntTheme.TextPrimary Color.FromArgb(255, 255, 255); } else { AntTheme.SetPrimary(Color.FromArgb(24, 144, 255)); AntTheme.Background Color.FromArgb(245, 245, 245); AntTheme.TextPrimary Color.FromArgb(0, 0, 0); } ThemeChanged?.Invoke(); } } // 在控件基类里订阅 protected AntControlBase() { ThemeManager.ThemeChanged () Invalidate(); }注意事件订阅要在控件销毁时取消否则会造成内存泄漏。我一般会在Dispose方法里取消订阅。最后一个技巧关于验证怎么确认你的自绘控件在 AOT 下真的没问题我的习惯是建一个单独的测试项目目标框架设为 .NET 8开启PublishAot然后把控件库引用进去写一个最简单的窗体显示所有控件。发布后直接运行 exe如果所有控件正常显示、交互正常那基本就没问题了。这个测试项目不需要复杂但每次改完控件库都跑一遍能省掉很多上线后的后悔药。希望帮到你。本文还有配套的精品资源点击获取 纯GDI自绘WinForm界面库：AntDesign风格与AOT兼容实战
简介这是一套基于 Ant Design 设计语言的 WinForm UI 界面库面向希望为 Windows 桌面应用注入现代前端视觉风格的 .NET 开发者尤其适合需要在老旧系统上保持兼容、又追求简洁美观界面的中高级开发者。界面库采用纯 GDI 绘图不依赖任何图片资源全面支持 AOT 预编译最低兼容 .NET Framework 4.0可覆盖较老版本的操作系统。资源包共 949 个文件以 535 个 cs 源码、147 个 md 说明文档、63 个 resx 资源文件为主另含 png、jpg、gif 等预览图与少量工程配置压缩包约 15.1MB。内容涵盖按钮、表单、表格、树形控件、标签页、菜单、图表、分割面板等常用组件的实现与渲染逻辑并配有文档与示例说明便于读者理解 GDI 自绘思路、组件样式组织方式与 AOT 兼容处理。目前已有 167 人学习适合用于桌面应用原型设计、组件演示与教学示例帮助开发者快速构建接近现代 Web 应用质感的桌面界面。1. 纯 GDI 绘制的 WinForm 界面库为什么它能把 AntDesign 风格带进桌面应用做过 WinForm 项目的人大概都有过这种体验功能逻辑写得飞快一到界面美化就卡住了。想做出 AntDesign 那种干净、现代、带圆角和阴影的视觉效果传统做法是引入一堆 PNG 图片资源按钮一套图、输入框一套图、选中态再来一套项目还没上线资源文件夹已经几十兆。更麻烦的是这些图片在高 DPI 屏幕上模糊、在换主题时全部作废、在 AOT 编译时还可能因为资源嵌入方式出问题。这个标题讲的方案走了一条完全不同的路用纯 GDI 绘图来渲染所有控件外观不依赖任何图片资源同时全面支持 AOT 编译最低兼容到 .NET Framework 4.0。换句话说它想做的事情是——把 AntDesign 的设计语言圆角、留白、主色体系、状态反馈用代码画出来而不是贴出来。这解决的核心痛点是资源零依赖、主题可动态切换、高分屏不失真、发布体积小。这套方案适合谁如果你正在维护一个 .NET Framework 4.0 以上的 WinForm 老项目想在不换框架的前提下把界面拉到现代水准或者你在做工业控制上位机winform industrial control需要长时间运行、低资源占用、界面还得过得去又或者你在评估 winform 界面美化的技术路线纠结到底该用图片还是自绘——那这篇内容值得你花时间看完。2. 纯 GDI 自绘控件的底层逻辑与最小可运行框架2.1 为什么选 GDI 而不是 GDI 或 WPF 混合先说选型理由。GDISystem.Drawing 命名空间下的 Graphics 类在 WinForm 里用得最多但它有个问题在 .NET Framework 4.0 上性能一般尤其是频繁重绘时容易闪烁。纯 GDI通过 P/Invoke 调用 gdi32.dll虽然写起来更底层但胜在绘制路径短、可控性强而且对 AOT 友好——GDI 在某些裁剪环境下会有反射依赖GDI 没有。另一个选择是不用 WPF 混合。WPF 确实能做出漂亮的界面但引入 WPF 意味着要么整个项目迁移要么用 ElementHost 嵌入后者在 .NET Framework 4.0 上性能堪忧而且 AOT 支持几乎不可能。所以这个方案锁死纯 WinForm GDI 自绘是一个务实的选择。AntDesign 的设计语言核心要素其实不多圆角矩形、主色#1890FF、间距体系8px 基准、状态色成功 #52C41A、警告 #FAAD14、错误 #F5222D、阴影层次。这些用 GDI 都能画出来关键是封装好绘制方法。2.2 最小自绘控件框架从 Control 继承并接管 OnPaint下面是一个最小可运行的自绘按钮框架展示了纯 GDI 绘制圆角矩形和文字的核心逻辑。你可以直接复制到一个新的 WinForm 项目里跑起来。using System; using System.Drawing; using System.Drawing.Drawing2D; using System.Runtime.InteropServices; using System.Windows.Forms; public class AntButton : Control { // 主色对应 AntDesign 的 #1890FF private Color _primaryColor Color.FromArgb(24, 144, 255); private Color _hoverColor Color.FromArgb(64, 169, 255); private Color _pressedColor Color.FromArgb(9, 88, 217); private bool _isHover false; private bool _isPressed false; public AntButton() { // 开启双缓冲减少闪烁 SetStyle(ControlStyles.AllPaintingInWmPaint | ControlStyles.UserPaint | ControlStyles.OptimizedDoubleBuffer | ControlStyles.ResizeRedraw, true); Size new Size(120, 32); Cursor Cursors.Hand; } protected override void OnMouseEnter(EventArgs e) { _isHover true; Invalidate(); // 触发重绘 base.OnMouseEnter(e); } protected override void OnMouseLeave(EventArgs e) { _isHover false; _isPressed false; Invalidate(); base.OnMouseLeave(e); } protected override void OnMouseDown(MouseEventArgs e) { _isPressed true; Invalidate(); base.OnMouseDown(e); } protected override void OnMouseUp(MouseEventArgs e) { _isPressed false; Invalidate(); base.OnMouseUp(e); } protected override void OnPaint(PaintEventArgs e) { Graphics g e.Graphics; g.SmoothingMode SmoothingMode.AntiAlias; // 抗锯齿圆角必须 g.TextRenderingHint System.Drawing.Text.TextRenderingHint.ClearTypeGridFit; // 根据状态选颜色 Color backColor _primaryColor; if (_isPressed) backColor _pressedColor; else if (_isHover) backColor _hoverColor; // 绘制圆角矩形圆角半径 4px符合 AntDesign 按钮规范 using (GraphicsPath path CreateRoundedRect(new Rectangle(0, 0, Width - 1, Height - 1), 4)) using (SolidBrush brush new SolidBrush(backColor)) { g.FillPath(brush, path); } // 绘制文字居中 using (StringFormat sf new StringFormat()) { sf.Alignment StringAlignment.Center; sf.LineAlignment StringAlignment.Center; using (SolidBrush textBrush new SolidBrush(Color.White)) { g.DrawString(Text, Font, textBrush, new RectangleF(0, 0, Width, Height), sf); } } } // 生成圆角矩形路径的辅助方法 private GraphicsPath CreateRoundedRect(Rectangle rect, int radius) { GraphicsPath path new GraphicsPath(); int diameter radius * 2; path.AddArc(rect.X, rect.Y, diameter, diameter, 180, 90); path.AddArc(rect.Right - diameter, rect.Y, diameter, diameter, 270, 90); path.AddArc(rect.Right - diameter, rect.Bottom - diameter, diameter, diameter, 0, 90); path.AddArc(rect.X, rect.Bottom - diameter, diameter, diameter, 90, 90); path.CloseFigure(); return path; } }这段代码的逻辑说明继承自Control而不是Button是为了完全接管绘制过程避免系统默认样式干扰。SetStyle里开启OptimizedDoubleBuffer和AllPaintingInWmPaint是自绘控件的标配否则拖动窗口时会闪得没法看。OnPaint里先设置SmoothingMode.AntiAlias这是圆角不出现锯齿的关键。颜色状态机默认、悬停、按下对应 AntDesign 的交互反馈规范。参数说明圆角半径设为 4px这是 AntDesign 按钮的标准值如果你要做卡片半径可以调到 8px。主色#1890FF是 AntDesign 的默认主色如果你要换主题只需要改_primaryColor等几个字段不需要动绘制逻辑。控件默认高度 32px这是 AntDesign 中号按钮的高度小号是 24px大号是 40px。2.3 不用图片资源那图标怎么画这是很多人会问的问题按钮上的图标怎么办纯 GDI 方案里图标有两种做法。第一种是用字体图标比如把 AntDesign 的图标做成一个 TTF 字体文件然后用g.DrawString绘制对应字符。第二种是用GraphicsPath直接画简单几何图形比如加号、箭头、勾选标记。对于复杂图标字体方案更实际对于简单指示符直接画路径性能更好。字体图标的加载方式如下// 从嵌入资源加载 TTF 字体不依赖外部文件 private FontFamily LoadIconFont() { // 假设字体文件已作为嵌入资源加入项目 var assembly typeof(AntButton).Assembly; using (var stream assembly.GetManifestResourceStream(YourNamespace.Fonts.anticon.ttf)) { // GDI 的 PrivateFontCollection 支持从流加载 var pfc new System.Drawing.Text.PrivateFontCollection(); // 注意需要将流复制到字节数组因为 AddMemoryFont 需要 IntPtr byte[] fontData new byte[stream.Length]; stream.Read(fontData, 0, fontData.Length); IntPtr fontPtr Marshal.AllocCoTaskMem(fontData.Length); Marshal.Copy(fontData, 0, fontPtr, fontData.Length); pfc.AddMemoryFont(fontPtr, fontData.Length); Marshal.FreeCoTaskMem(fontPtr); return pfc.Families[0]; } }这里有个坑要注意AddMemoryFont之后不能立即释放fontPtr否则字体可能加载失败。稳妥做法是把PrivateFontCollection实例保持为静态字段在应用程序生命周期内不释放。另外AOT 编译时嵌入资源的方式和普通编译略有不同需要确保资源在裁剪后仍然存在这个后面避坑章节会细说。3. 把 AntDesign 设计语言翻译成 GDI 绘制代码的关键映射3.1 颜色体系与主题切换的实现方式AntDesign 的颜色体系不是一堆散落的色值而是一套有逻辑的调色板。主色、辅助色、中性色、功能色每种都有明确的用途。在 GDI 自绘方案里我一般会定义一个静态主题类来集中管理这些颜色而不是在每个控件里硬编码。public static class AntTheme { // 主色及其衍生 public static Color Primary Color.FromArgb(24, 144, 255); public static Color PrimaryHover Color.FromArgb(64, 169, 255); public static Color PrimaryActive Color.FromArgb(9, 88, 217); public static Color PrimaryOutline Color.FromArgb(24, 144, 255, 60); // 带透明度 // 功能色 public static Color Success Color.FromArgb(82, 196, 26); public static Color Warning Color.FromArgb(250, 173, 20); public static Color Error Color.FromArgb(245, 34, 45); // 中性色 public static Color TextPrimary Color.FromArgb(0, 0, 0, 0.85); // 注意这里需要转换 public static Color TextSecondary Color.FromArgb(0, 0, 0, 0.45); public static Color Border Color.FromArgb(217, 217, 217); public static Color Background Color.FromArgb(245, 245, 245); // 主题切换切换主色时重新计算衍生色 public static void SetPrimary(Color color) { Primary color; PrimaryHover Lighten(color, 0.2f); PrimaryActive Darken(color, 0.2f); PrimaryOutline Color.FromArgb(60, color); } private static Color Lighten(Color c, float amount) { return Color.FromArgb(c.A, (int)Math.Min(255, c.R 255 * amount), (int)Math.Min(255, c.G 255 * amount), (int)Math.Min(255, c.B 255 * amount)); } private static Color Darken(Color c, float amount) { return Color.FromArgb(c.A, (int)Math.Max(0, c.R - 255 * amount), (int)Math.Max(0, c.G - 255 * amount), (int)Math.Max(0, c.B - 255 * amount)); } }这段代码的关键点在于主题切换不是简单地换一个颜色值而是要重新计算悬停色、按下色、轮廓色等衍生色。Lighten和Darken方法用简单的线性调整来模拟 AntDesign 的色板生成算法实际项目中如果你需要更精确的色板可以预计算一套色值表。注意上面TextPrimary的写法有问题——Color.FromArgb不接受 0 到 1 的浮点数作为 alpha。正确做法是Color.FromArgb(217, 0, 0, 0)表示 85% 不透明度的黑色。这个细节在写主题类时很容易翻车我见过不止一个项目在这里出 bug。3.2 圆角、阴影和间距的 GDI 实现细节圆角前面已经演示了GraphicsPath的做法。阴影在纯 GDI 里没有直接支持但可以用多层半透明圆角矩形叠加来模拟。具体做法是在控件背后画 3 到 5 层逐渐扩大、逐渐透明的圆角矩形形成柔和的阴影边缘。// 在控件背后绘制阴影需要在父容器的 OnPaint 里调用或者用单独的阴影控件 private void DrawShadow(Graphics g, Rectangle rect, int radius, int shadowSize) { for (int i shadowSize; i 0; i--) { int alpha (int)(30.0 / i); // 越外层越透明 using (GraphicsPath path CreateRoundedRect( new Rectangle(rect.X - i, rect.Y - i, rect.Width i * 2, rect.Height i * 2), radius i)) using (SolidBrush brush new SolidBrush(Color.FromArgb(alpha, 0, 0, 0))) { g.FillPath(brush, path); } } }参数说明shadowSize控制阴影扩散范围一般设为 4 到 8 像素alpha的计算方式决定了阴影的柔和程度30.0 / i是一个经验公式你可以根据实际效果调整。注意阴影绘制要在控件主体之前否则会盖住内容。间距体系方面AntDesign 用 8px 作为基准单位。在自绘控件里这意味着内边距、控件间距、文字与边框的距离都应该是 8 的倍数。我一般会定义一个const int AntUnit 8;然后在布局计算里用AntUnit * n来表示间距。这样做的好处是整体视觉节奏统一不会出现某个控件特别挤、某个特别松的情况。3.3 从单个控件到完整界面库的组织方式当你有了按钮、输入框、下拉框、表格这些基础控件之后下一步是让它们能组合成完整的界面。这里的关键是统一基类。我一般会定义一个AntControlBase继承自Control在里面处理公共的绘制逻辑比如边框、背景、焦点态然后各个具体控件继承它只实现自己特有的部分。public abstract class AntControlBase : Control { protected bool IsFocused { get; private set; } protected bool IsHover { get; private set; } protected AntControlBase() { SetStyle(ControlStyles.AllPaintingInWmPaint | ControlStyles.UserPaint | ControlStyles.OptimizedDoubleBuffer | ControlStyles.ResizeRedraw, true); } protected override void OnGotFocus(EventArgs e) { IsFocused true; Invalidate(); base.OnGotFocus(e); } protected override void OnLostFocus(EventArgs e) { IsFocused false; Invalidate(); base.OnLostFocus(e); } // 子类实现具体的绘制内容 protected abstract void OnPaintContent(Graphics g, Rectangle rect); protected override void OnPaint(PaintEventArgs e) { e.Graphics.SmoothingMode SmoothingMode.AntiAlias; e.Graphics.TextRenderingHint System.Drawing.Text.TextRenderingHint.ClearTypeGridFit; OnPaintContent(e.Graphics, ClientRectangle); } }这个基类的价值在于所有控件共享同一套双缓冲设置、抗锯齿设置、焦点管理逻辑。子类只需要关注自己的内容绘制。这种组织方式在控件数量超过 5 个之后会明显降低维护成本。对于表格类控件类似 DataGridView 的自绘版本核心难点是行高、列宽、滚动和虚拟化。如果数据量不大几百行以内可以直接在 OnPaint 里遍历绘制如果数据量大需要实现虚拟化——只绘制可见区域的行。这个在工业控制场景winform industrial control里尤其重要因为实时数据刷新频繁全量重绘会卡。4. AOT 编译与 .NET Framework 4.0 兼容的避坑清单4.1 坑一AOT 裁剪掉了反射调用的代码现象在 .NET 7/8 上开启 AOT 发布后程序运行时报MissingMethodException或TypeLoadException提示找不到某个类型或方法。原因AOT 编译器会进行裁剪trimming把没有静态引用的代码移除。如果你的控件库里有通过反射创建实例、或者通过Type.GetType动态加载的地方这些代码在裁剪后可能消失。解决在项目里添加TrimmerRootDescriptor文件显式保留需要的类型。或者更简单的方式——避免在控件库核心路径上使用反射。我一般会把所有控件的创建改成工厂模式用switch语句显式new而不是反射。如果确实需要反射在方法上加[DynamicDependency]特性标注。4.2 坑二.NET Framework 4.0 不支持某些 API现象代码在 .NET 6 上跑得好好的切到 .NET Framework 4.0 编译时报错提示找不到SpanT、ValueTuple或者某些Graphics的重载方法。原因.NET Framework 4.0 的 BCL 比较老很多现代 API 不存在。比如Graphics.DrawString的某些重载、Color.FromArgb的浮点参数版本在 4.0 上都没有。解决把目标框架设为 .NET Framework 4.0 后用条件编译或者手动降级 API。比如SpanT可以用数组加偏移量代替ValueTuple需要引入 NuGet 包System.ValueTuple。我一般会在项目里建一个Compat文件夹把不兼容的 API 封装成扩展方法上层代码统一调用扩展方法底层根据框架版本切换实现。4.3 坑三高 DPI 下自绘控件模糊或错位现象在 4K 屏幕上自绘控件的文字模糊圆角边缘有锯齿鼠标点击位置和控件实际位置有偏移。原因WinForm 默认是 DPI 不感知的系统会把整个窗口拉伸导致自绘内容被缩放后模糊。另外Control.MousePosition返回的是物理像素而控件坐标可能是逻辑像素两者不匹配就会导致点击偏移。解决在应用程序清单里声明 DPI 感知级别。对于 .NET Framework 4.0 项目需要在app.manifest里添加dpiAwaretrue/dpiAware。然后在代码里用Graphics.DpiX来动态计算尺寸而不是硬编码像素值。比如圆角半径应该是4 * (DpiX / 96)这样在高 DPI 下圆角会按比例放大不会显得太小。4.4 坑四双缓冲开启后仍然闪烁现象明明设置了OptimizedDoubleBuffer但快速拖动窗口或者频繁刷新数据时控件还是闪。原因双缓冲只对控件自身的绘制有效如果父容器在重绘时没有开启双缓冲或者控件背景被父容器先绘制了一遍仍然会闪。另外如果在OnPaint里调用了base.OnPaint系统可能会先画一遍背景。解决确保父容器也开启了双缓冲。对于自定义控件不要调用base.OnPaint而是完全接管绘制。如果控件有透明背景需求用SetStyle(ControlStyles.SupportsTransparentBackColor, true)并设置BackColor为透明而不是在OnPaint里手动绘制父容器背景。4.5 坑五字体图标在 AOT 下加载失败现象发布 AOT 版本后按钮上的图标变成方框或者空白但调试模式下正常。原因字体文件作为嵌入资源时AOT 裁剪可能把资源移除了或者GetManifestResourceStream返回 null。解决在项目文件里把字体资源标记为EmbeddedResource IncludeFonts\anticon.ttf /并且在裁剪配置里保留资源。更稳妥的做法是把字体文件放在输出目录用PrivateFontCollection.AddFontFile加载而不是嵌入资源。虽然这样多了一个文件但 AOT 兼容性最好。5. 工业控制场景下的实战技巧实时数据刷新与主题热切换工业控制上位机winform industrial control是这套方案的一个典型应用场景。这类程序通常需要长时间运行界面上有大量实时数据刷新同时操作员可能希望切换深色/浅色主题来适应不同光照环境。下面说两个我在实际项目里验证过的技巧。第一个技巧是局部刷新代替全量重绘。当某个仪表盘或数据表格的数字变化时不要调用Invalidate()重绘整个控件而是用Invalidate(Rectangle)只重绘变化区域。比如一个温度显示控件只有数字部分在变那就只重绘数字所在的矩形区域。这个优化在数据刷新频率超过 10Hz 时效果非常明显CPU 占用能从 15% 降到 3% 以下。// 只重绘数值区域而不是整个控件 private Rectangle _valueRect new Rectangle(10, 10, 80, 30); public void UpdateValue(double newValue) { _currentValue newValue; Invalidate(_valueRect); // 局部刷新 }第二个技巧是主题热切换时不重建控件。很多人的做法是切换主题时销毁所有控件重新创建这样会导致闪烁和状态丢失。正确做法是让所有控件订阅一个静态的ThemeChanged事件在事件处理里调用Invalidate()并重新读取主题颜色。由于颜色是从静态主题类读取的切换主题只需要改静态类的字段值然后通知所有控件重绘即可。// 主题管理器 public static class ThemeManager { public static event Action ThemeChanged; public static void ApplyTheme(bool isDark) { if (isDark) { AntTheme.SetPrimary(Color.FromArgb(24, 144, 255)); AntTheme.Background Color.FromArgb(20, 20, 20); AntTheme.TextPrimary Color.FromArgb(255, 255, 255); } else { AntTheme.SetPrimary(Color.FromArgb(24, 144, 255)); AntTheme.Background Color.FromArgb(245, 245, 245); AntTheme.TextPrimary Color.FromArgb(0, 0, 0); } ThemeChanged?.Invoke(); } } // 在控件基类里订阅 protected AntControlBase() { ThemeManager.ThemeChanged () Invalidate(); }注意事件订阅要在控件销毁时取消否则会造成内存泄漏。我一般会在Dispose方法里取消订阅。最后一个技巧关于验证怎么确认你的自绘控件在 AOT 下真的没问题我的习惯是建一个单独的测试项目目标框架设为 .NET 8开启PublishAot然后把控件库引用进去写一个最简单的窗体显示所有控件。发布后直接运行 exe如果所有控件正常显示、交互正常那基本就没问题了。这个测试项目不需要复杂但每次改完控件库都跑一遍能省掉很多上线后的后悔药。希望帮到你。本文还有配套的精品资源点击获取