C# WinForm圆形进度条自绘实现：GDI+绘制原理与避坑指南

简介C# WinForm开发中的圆形进度条往往需要通过自定义控件实现这份示例源码提供了从窗体布局到控件绘制的完整参考。项目基于VS2019与.NET Framework 4.7.2构建控件DLL按4.0版本编译兼顾新老环境的兼容运行。压缩包共20个文件整体约16.81MB核心包含6个.cs源代码文件、3个.config配置文件、2个.dll控件库以及.sln解决方案和可执行exe同时附有resx资源、pdb调试符号和nupkg包便于直接运行和调试学习。目前已有734人学习下载。通过该实例能够掌握GDI绘制圆形进度条的核心逻辑、属性封装与事件处理方式也可以理解HZH_Controls控件库的扩展用法适合仪表盘、加载动画等实际项目中的快速集成与二次开发。1. 圆形进度条到底难在哪自绘是WinForm里绕不开的一条路第一次在WinForm里拿到“圆形进度条”需求我下意识觉得找个现成控件就行。翻遍工具箱ProgressBar只有横条BorderStyle改来改去也变不成圆环网上搜到的圆形进度控件要么依赖第三方UI库要么功能和项目风格不搭。折腾一天后结论很直接WinForm里的圆形进度条本质就是自绘控件而用GDI从零画一个环二十行代码就够。这套“C# winform圆形进度条例子源码”今天完整拆开讲从绘制原理到封装复用再到最容易翻车的几个坑按顺序走一遍你能得到一份可以直接抄作业的版本。它适合谁做上位机调试界面、固件升级、安装器进度以及温度湿度监控面板这类WinForm项目的人还有刚学C#自定义控件、想看一个完整自绘例子的小白。前者要的是稳定可复用后者要的是能看懂每行在干什么下面都按这个标准写。2. 为什么原生ProgressBar画不出圆形自绘控件的选型与坐标模型2.1 原生进度条的三块天花板样式、形状与文字原生ProgressBar在WinForm里已经很好用状态栏、下载进度、批量处理都能胜任但面对圆形需求有三块天花板不是改属性就能绕过去。第一块是形状ProgressBar的渲染由当前Windows主题决定内部是分段块状或连续条状沿着主题绘制的矩形轨道行进没有给外部留出覆盖轮廓的接口把Height拉到很大只会得到更高更粗的横条不会向圆形靠拢。第二块是样式自带的Style只有Block、Continuous、Marquee三种Marquee适合不确定进度但只是来回滚动的方块同样建立在矩形渲染上。第三块是文字ProgressBar本身不绘制文本想在环中心显示百分比只能叠加一个动态Label百分比位数变化时还要反复换Label位置。这三块天花板本质上说明“进度百分比”与“圆形环状”是两个互相独立的显示要素进度是一个从0到100的数值环形是一种带弧度的几何形状。原生控件把它绑死在矩形里真正能解锁圆形的路子是找一个可以自由绘制的宿主然后自己把这两个要素画出来。WinForm里能满足这个宿主要求的就是继承Control重写OnPaint。这也是几乎所有winform仪表盘开源控件的底层做法仪表盘、自定义圆弧文本框这类控件画的路径不一样底层都是同一套自绘逻辑。2.2 替代方案盘点图片切换、WPF互操作、第三方库成本分别在哪不写自绘也能让界面看起来像圆形进度但每一种都有隐藏成本。先说图片切换你准备一组进度从0%到100%的圆环PNG用PictureBox按进度切换图片。这个方案做静态展示可以一旦进度频繁变化切换图会造成肉眼可见的卡顿图片放大缩小还容易出现锯齿想改颜色就得重新生成一整组图维护成本极高。图少进度不平滑图多内存占用大属于典型的“用美术工作量换开发工作量”。第二个选项是引入WPF或.NET MAUI做互操作把圆环放在一个单独的WPF UserControl里再嵌入WinForm。新项目用WPF或MAUI当然没问题但存量WinForm项目为一个小控件引一套渲染栈WindowsFormsHost互操作的开销、线程亲缘性、焦点切换都会冒出来收益不成比例。第三个选项是找开源的仪表盘控件能用但容易被项目定制需求反向绑架想改环宽、改成渐变、去掉中心文字往往要进源码扒属性如果这个库几个月不更新你的项目就被一个黑匣子控件拖住了。综合比较下来继承Control自绘的代码量最少依赖为零定制自由度最高这也是我推荐的方案。2.3 GDI画圆环的坐标模型startAngle为什么是270度自绘前先要把GDI的角度约定对齐否则会在屏幕上画出一个轨迹完全不对的圆弧。WinForm的Graphics坐标原点在控件左上角X轴向右Y轴向下角度以X轴正方向为0度逆时针方向为负、顺时针方向为正。也就是说3点钟方向是0度6点钟方向是90度9点钟方向是180度12点钟方向是270度。一个圆形进度条通常从12点方向起步所以起始角写死为270度或-90度效果一致。绘制圆环用到的是DrawArc方法签名是Graphics.DrawArc(Pen pen, Rectangle rect, float startAngle, float sweepAngle)。rect是圆弧所在圆的边界矩形画出来的圆被这个矩形完全内切pen的Width决定圆环视觉粗细sweepAngle是相对startAngle的扫描角度正数顺时针扫负数逆时针扫。把进度换算成扫描角很简单sweepAngle 进度百分比 × 360f。下面这张表是三个基准值调试时可以直接对着查。进度startAnglesweepAngle画面结果0%2700只有背景圆环没有进度弧50%270180从12点顺时针画到6点刚好半个圆100%270360从12点画一整圈回到12点GDI里还有一个高频参数SmoothingMode画笔在绘制弧线、椭圆时通过它来决定抗锯齿策略。自绘圆环必须设置为AntiAlias否则边缘会出现明显的锯齿台阶。这个参数在下一章代码里会立刻用到先记住它放在OnPaint开头放在后面设置可能不会生效。3. 用GDI画出第一个圆形进度条最小可运行代码与三个核心参数3.1 新建一个继承Control的类先把双缓冲开好下面是一份最小可运行的CircularProgressBar控件先看整体我再逐块拆解。using System; using System.Drawing; using System.Drawing.Drawing2D; using System.Windows.Forms; public class CircularProgressBar : Control { private int _value 0; public int Value { get { return _value; } set { _value Math.Max(0, Math.Min(100, value)); Invalidate(); } } public int RingWidth { get; set; } 10; public Color RingBackgroundColor { get; set; } Color.LightGray; public Color ProgressColor { get; set; } Color.DodgerBlue; public CircularProgressBar() { SetStyle(ControlStyles.AllPaintingInWmPaint | ControlStyles.UserPaint | ControlStyles.OptimizedDoubleBuffer, true); DoubleBuffered true; ResizeRedraw true; } protected override void OnPaint(PaintEventArgs e) { base.OnPaint(e); Graphics g e.Graphics; g.SmoothingMode SmoothingMode.AntiAlias; int side Math.Min(Width, Height); int ringOuter side - RingWidth; int padding RingWidth / 2; Rectangle rect new Rectangle( (Width - side) / 2 padding, (Height - side) / 2 padding, ringOuter, ringOuter); if (rect.Width 0 || rect.Height 0) return; using (Pen backPen new Pen(RingBackgroundColor, RingWidth)) { g.DrawEllipse(backPen, rect); } float startAngle 270f; float sweepAngle (float)Value / 100f * 360f; if (sweepAngle 0f) { using (Pen progressPen new Pen(ProgressColor, RingWidth) { StartCap LineCap.Round, EndCap LineCap.Round }) { g.DrawArc(progressPen, rect, startAngle, sweepAngle); } } string text Value %; using (Font font new Font(Microsoft YaHei UI, 10f, FontStyle.Bold)) using (StringFormat sf new StringFormat()) { sf.Alignment StringAlignment.Center; sf.LineAlignment StringAlignment.Center; g.DrawString(text, font, Brushes.Black, new Rectangle(0, 0, Width, Height), sf); } } }逻辑说明类继承Control而不是UserControlUserControl适合承载一组子控件的容器这里是纯绘制场景Control省掉容器开销。构造函数里SetStyle的三面旗是自绘控件抗闪烁的标准配置AllPaintingInWmPaint表示窗口重绘时忽略擦除背景的消息直接重画全部区域消除闪白UserPaint让控件自己接管绘制OptimizedDoubleBuffer启用双缓冲把绘制先画到内存位图再一次性提交。如果不配置这些后面画出来的圆环在拖动窗口时一定会闪烁。ResizeRedraw保证控件尺寸变化时立即重绘避免拉伸后留下旧圆环残影。3.2 rect边界计算为什么圆环矩形不用直接用SideOnPaint里最关键的一行是side Math.Min(Width, Height)。控件不保证宽高相等客户区可能是一块宽矩形而圆环必须是一个正圆所以取短边作为直径基准让圆环居于控件中心。接下来rect并不直接用这个side而是把边长减去RingWidth再做内缩原因是Pen在绘制时以它的中心线为轨迹Pen本身有粗细轨迹线左右各占一半宽度。直接传入Rectangle(0, 0, side, side)笔画的一半会落在控件边缘外圆环上下被裁掉两侧却有空隙。先减掉RingWidth再让rect偏移RingWidth/2视觉上的圆环外边界正好贴合side边缘。这个细节决定了高DPI下的渲染质量。如果偷懒直接用控件尺寸画圆缩放后的圆环边缘会出现忽粗忽细的失真这是自绘控件最常见的玄学问题之一很多人改了一堆参数都找不到原因本质就是边界矩形没有给笔宽留空间。在第5章避坑部分还会再提一次。3.3 Value到扫描角的换算、文本居中与最小接入方式代码里sweepAngle (float)Value / 100f * 360f。Value被限制在0到100之间这是当前简化版的约定实际项目中把100替换成Maximum即可第四章扩展时会看到。startAngle固定为270f配合2.3的坐标模型从12点起笔顺时针增长。sweepAngle大于0才调用DrawArc这里不是多余的防御LineCap.Round会给圆弧两端加圆头当sweepAngle为0时会渲染出一段极短但肉眼可见的圆头线段看起来像0%时多了一截进度。先跳过绘制这个坑会在第5章专门展开。中心文本用Font和StringFormat绘制。字体选择Microsoft YaHei UIWin7以上系统都带中文环境不容易出现字体缺失Alignment和LineAlignment都设成Center把字符串按整个客户区居中。文本颜色直接用Brushes.Black实际项目里建议做成属性这里为了最小化代码用了静态黑色。把这个控件放到Form上只需要最常见的三行CircularProgressBar bar new CircularProgressBar(); bar.Size new Size(120, 120); bar.Value 70; this.Controls.Add(bar);参数速查RingWidth是圆环粗细值越大环越粗、占面积越大常用区间6到20RingBackgroundColor是底环颜色通常是浅灰ProgressColor是进度颜色Value设置后触发Invalidate重绘不需要调用方手动Refresh。4. 把圆形进度条封装成可复用控件Maximum、事件与平滑动画4.1 属性设计让调用方只关心业务数值第3章的代码能跑但把它放进真实项目还不够。第一个要改的是Value限额写死100当进度来自网络上传、文件复制或硬件采集时总量可能是1327个数据包调用方不想再自己算一次百分比。因此把100抽成Maximum属性默认100内部换算改成sweepAngle (float)Value / Maximum * 360f。Maximum的setter必须做非法值兜底为0或负数时回退到100不然进度条一构造就抛DivideByZero这是自绘控件最常见的崩溃入口。第二个要改的是文本。进度文字未必总是百分比可能是“3/15”或者“写入中”直接把text暴露成Text属性复用Control自带的Text定义OnPaint里画this.Text而不是Value %这样设计器中也能直接修改逻辑统一。字体和文本颜色也一起暴露字体写死在OnPaint里会让高DPI下的大屏用户非常难受把Font变成公开属性后调用方想放大就放大与你无关。4.2 ValueChanged事件进度变化不再只靠轮询有时候进度条的值会驱动其他逻辑进度到100%后自动收起窗口、超过某个阈值后改变颜色、中途取消后重发指令。调用方如果每隔100毫秒去读一次Value再判断能做但难受更符合WinForm习惯的是提供事件。实现很简单Value的setter里在值真正变化时触发ValueChanged用老式的EventHandler调用方通常不需要额外参数只需要“值变了”这个信号。public event EventHandler ValueChanged; private int _maximum 100; public int Maximum { get { return _maximum; } set { _maximum (value 0) ? 100 : value; Invalidate(); } } private int _value 0; public int Value { get { return _value; } set { int newValue Math.Max(0, Math.Min(_maximum, value)); if (newValue _value) return; _value newValue; EventHandler handler ValueChanged; if (handler ! null) handler(this, EventArgs.Empty); Invalidate(); } }在后台线程或串口回调线程里给Value赋值时Control属性本质上要求UI线程访问直接写会触发跨线程异常。常规做法是封装一个方法让调用方无脑传入新值内部用InvokeRequired判断线程再BeginInvoke切回UI线程这个场景在c#上位机项目里几乎是标配处理固件升级进度时尤其常见。private void UpdateFromWorker(int newValue) { if (this.InvokeRequired) { this.BeginInvoke(new Actionint(UpdateFromWorker), newValue); return; } this.Value newValue; }注意在后台任务里直接给进度条控件赋值会踩跨线程异常必须通过BeginInvoke切回UI线程不要改成在后台线程里塞Thread.Sleep硬等。4.3 动画推进用Timer把跳变改成缓动真实场景中进度很少是稳定流畅增长的批量任务往往是一停一顿一批数据完成后Value从12瞬间跳到63。直接刷新会让用户感觉卡顿还容易产生“程序没响应”的错觉。常见做法是在控件内部加一个动画状态对外Value设置的是目标值OnPaint里画的却是当前显示值_displayValue。每次Timer Tick把_displayValue向_targetValue靠近一段用指数趋近公式而不是固定步长进度越接近目标时步伐越小视觉上自然平滑。private Timer _timer; private float _displayValue 0f; private float _targetValue 0f; private void StartSmoothAnimation(int target) { _targetValue target; if (!_timer.Enabled) _timer.Start(); } private void Timer_Tick(object sender, EventArgs e) { _displayValue (_targetValue - _displayValue) * 0.2f; if (Math.Abs(_targetValue - _displayValue) 0.5f) { _displayValue _targetValue; _timer.Stop(); } Invalidate(); }Timer的Interval建议30到50毫秒太快变成纯占CPU太慢拖沓。0.2f这个系数是经验值想要更迟滞用0.1f更跟手用0.3f。阈值0.5f用于停在目标值并关闭Timer避免一个已经完成的进度条还在后台空转Invalidate。注意动画结束后必须把_displayValue精确等于目标值否则下次启动动画会有微小跳变。OnPaint里的sweepAngle计算也要从Value改成_displayValue这样进度环才能表现出平滑增长。5. 避坑与排查圆形进度条最常见的5个翻车现场5.1 进度条闪烁、拖动窗口时留下残影现象控件放在Panel里拖动窗体或者Value变化快时会闪烁留下半段旧圆弧轨迹像没擦干净的黑板。原因WinForm默认绘制流程是先擦背景再画前景两帧之间的空窗期会被系统拿到消息并刷新显示就形成了闪烁。自绘控件如果只重写OnPaint却没有开启双缓冲等于每次都把半成品画面暴露给了屏幕。解决构造函数里必须做三件配置AllPaintingInWmPaint避免先擦背景UserPaint接管全部绘制OptimizedDoubleBuffer启用双缓冲。注意这个SetStyle要在构造函数里执行不能在OnPaint里做。写完后还在闪检查父容器有没有开启同样的样式、是否有第三方控件对子窗口做了透明处理。5.2 加了SmoothingMode.AntiAlias还是锯齿现象代码里设置了抗锯齿圆环边缘仍是锯齿甚至出现毛刺放大看像楼梯台阶。原因两个常见原因。一是AntiAlias赋值位置靠后OnPaint里先画了一个圆再设置已绘制的部分不会因为后续设置重新生成二是用整型Rectangle坐标时Graphics在非整数像素边界上抗锯齿会退化尤其Pen.Width为奇数时中心线正好落在两个像素之间边缘覆盖程度忽高忽低。解决把SmoothingMode SmoothingMode.AntiAlias放在OnPaint第一行确保所有绘制语句在它之后。rect计算按第3章的侧边内缩法保证圆弧轨迹落在整数像素坐标系内。如果还觉得边缘发虚把rect整体偏移0.5f得到RectangleF再画代价是线条会轻微模糊一般整数rect已经够用。5.3 0%时却出现一根短弧线现象Value设为0背景圆环正确但圆环顶部或3点钟方向出现一小截明显高亮的弧线看起来像瑕疵。原因LineCap.Round给圆弧两端生成半圆形帽当sweepAngle为0时DrawArc逻辑上仍然绘制一个零长度线段两端帽子叠加成一个点。Pen宽度越大这个点越明显甚至像一小截短弧。解决在调用DrawArc前加if (sweepAngle 0f)判断0%时只画背景环不画进度弧。如果项目允许进度回到0这个判断必须存在。另一个思路是sweep为0时不设Round cap但在运行中切换Cap会产生不可预期的渲染结果不如直接跳过绘制干净。5.4 进度圆被拉伸成椭圆现象控件的宽度和高度不一致时圆弧变成椭圆窗体最大化后更明显中心文本也偏离圆心。原因DrawArc的rect分别用Width和Height计算没有强制宽高一致。Control在Dock或Anchor布局下会被容器随意拉伸用户把窗体拉大圆环就跟着变形。解决在OnPaint第一行执行side Math.Min(Width, Height)所有坐标都基于这个side居中。rect的宽高也必须是side减去RingWidth而不是分别取Width和Height。这也是圆环保持正圆的前提任何时候都不要用控件的Width和Height直接作为圆弧矩形边长。5.5 DPI缩放后圆和文字错位现象在124%或150%桌面缩放下圆环正常但中心文本偏向左上或者设计器里看到的尺寸和运行时不一致。原因WinForm在高DPI下默认按像素拉伸自绘代码里如果使用了设计时的绝对坐标和固定字号显示缩放后实际客户区被放大文本绘制区域却没有跟着缩放结果就是圆环与文字相对位置破裂。解决让字体和文本区域共同基于客户区。文本绘制用整个ClientRectangle不要用自以为安全的固定偏移Font按client大小等比换算或者直接用SystemFonts。如果是.NET Framework项目还要在app.manifest里声明PerMonitorV2 DPI感知否则WinForm自己会在DPI变化时缩放一次自绘代码又缩放一次双重变换必然错位。6. 进阶玩法渐变圆环、不定进度与真实任务进度上报6.1 渐变圆环与高亮描边默认的单色圆环容易有“教学控件”的感觉把进度Pen从Color版换成LinearGradientBrush版视觉质感立刻不一样。using (LinearGradientBrush brush new LinearGradientBrush( this.ClientRectangle, Color.DodgerBlue, Color.MediumPurple, 45f)) using (Pen brushPen new Pen(brush, RingWidth)) { brushPen.StartCap LineCap.Round; brushPen.EndCap LineCap.Round; g.DrawArc(brushPen, rect, startAngle, sweepAngle); }逻辑说明LinearGradientBrush按ClientRectangle的左上到右下方向铺渐变Pen使用这个Brush后圆弧颜色会从蓝过渡到紫。45f是渐变方向角改成0就是水平渐变90就是垂直渐变按界面风格调。想要更精致可以在这个Pen外面再画一圈宽度多3像素、透明度30%的半透明圆环视觉上像发光。6.2 不定进度的旋转弧线有时候我们不知道任务还要多久但又不想让界面看起来死掉。给控件加一个IsIndeterminate布尔属性打开时启动一个Timer每30毫秒把_rotationAngle加6度并重绘OnPaint里画固定扫描角度的弧比如sweepAngle70起始角是270 _rotationAngle文字部分跳过。这就是软件自旋等待的标配做法类似原生ProgressBar在Marquee模式下做的效果但圆环形态更适合仪表盘风格的界面。6.3 三个验证检查点代码写完不算完我每次都会按三个检查点验证第一把Value打到0、50、100分别截图检查起始角是否正确、0%有没有残留短线第二把Value超过Maximum或设为负数确认setter的Math.Min/Max兜底生效第三用一个后台线程每20毫秒随机更新Value观察动画与文本是否同步、Timer是否在进度停住后自动关闭。这套验证方式帮我在上位机项目里抓到过两次真实的进度跳变漏帧。血泪经验是自绘控件的调试成本集中在视觉细节与其在界面上反复拖Value试错不如直接写一个Demo Form把三档基准值和随机刷新跑在一起看。希望帮到你。本文还有配套的精品资源点击获取