C#上位机仪表控件自绘实战：圆表、直表、旋钮、开关与指示灯

简介这是一份面向C#开发者与工控组态界面设计人员的仪表控件示例资源围绕圆表、直表测量标尺、旋钮、开关和指示灯等常见仿真控件展开帮助读者在WinForm项目中快速搭建具有真实设备质感的可视化操作界面。资源包共18个文件约1.15MB包含6个cs源码文件、2个dll互操作库、2个resx资源文件、1个ocx控件、1个csproj工程文件、1个sln解决方案、1个exe可执行程序及1个jpg预览图等覆盖从控件引用、窗体设计到示例运行的完整环节。其中ActiveX互操作库与ocx控件展示了.NET调用COM组件的实现方式说明文档与示例工程则便于理解控件实例化、属性设置与事件响应。目前已有1235人学习下载适合希望掌握工控仪表界面开发、了解ActiveX与.NET互操作原理的初、中级开发者参考借鉴。1. 仪表控件 C# 例子从圆表到指示灯一套能直接搬进上位机的自绘方案做 C# 上位机的朋友多半遇到过这个场景设备通讯、数据采集、报警逻辑都跑通了最后卡在界面上——客户指着屏幕说“这个数值能不能做成圆表盘那种”“开关能不能别用 CheckBox太丑了”。这时候你会发现 WinForms 自带的 ProgressBar、CheckBox 根本撑不起工业现场那种仪表感而第三方控件库要么收费要么风格不搭。仪表控件 C# 例子这套东西讲的就是用 GDI 自绘圆表、直表测量标尺、旋钮、开关、指示灯这五类控件不依赖任何商业库代码可控、风格可调、能直接塞进现有上位机项目。它适合已经会写 C# 窗体、被串口线程和 TCPListener 多客户端折腾过、现在想把界面做扎实的开发者。下面按“先立住原理、再动手复现、最后避坑”的顺序拆开讲。2. 五类仪表控件的绘制原理与选型理由2.1 为什么不用现成控件非要自绘工业上位机对仪表控件的诉求和普通桌面软件不一样。普通软件里一个进度条能表达“加载中”就够了但现场操作工需要的是一眼看出当前值在量程里的位置、指针有没有进入红区、旋钮转到了第几档。这些信息密度标准控件给不了。自绘的第一个理由是可控性。GDI 的 Graphics 对象能画弧、画线、填充多边形圆表的刻度线、指针、中心轴全部由你决定坐标量程改了只改参数不改结构。第二个理由是性能。很多人一听自绘就觉得“肯定比原生控件慢”实际上仪表控件刷新频率通常跟着采集周期走50ms 到 200ms 一次GDI 双缓冲完全扛得住。真正会翻车的是在 Paint 事件里反复 new Pen、new Brush这个后面避坑章节会细说。第三个理由是部署干净。不引入第三方 DLL发布时就是一个 exe现场机器不用装运行时之外的任何东西这对工控环境很重要。选型上WinForms 和 WPF 都能做。WinForms 的 GDI 自绘代码更直白适合维护老项目WPF 用 Shape 和 DrawingContext矢量缩放更自然适合新项目。本文例子以 WinForms 为主因为上位机存量项目里 WinForms 占比高而且 GDI 的坐标计算逻辑搬到 WPF 也不难。2.2 圆表角度映射是核心别在刻度上硬编码圆表看着复杂拆开就三件事把数值映射成角度、按角度画刻度和指针、把结果双缓冲画到控件上。核心公式只有一个角度 起始角 (当前值 - 最小值) / (最大值 - 最小值) * 扫过角度起始角一般取 135 度扫过 270 度这样表盘下方留出缺口放数字符合大多数工业仪表的视觉习惯。刻度分主刻度和次刻度主刻度带数字次刻度只画短线。指针用一条带箭头的线段或者一个细三角形中心轴画个实心圆盖住指针根部。下面是一个最小可跑的圆表绘制方法放在自定义控件的 OnPaint 里protected override void OnPaint(PaintEventArgs e) { // 双缓冲先画到内存位图再一次性贴到屏幕避免闪烁 Bitmap bmp new Bitmap(this.Width, this.Height); using (Graphics g Graphics.FromImage(bmp)) { g.SmoothingMode System.Drawing.Drawing2D.SmoothingMode.AntiAlias; g.TextRenderingHint System.Drawing.Text.TextRenderingHint.AntiAlias; int cx this.Width / 2; int cy this.Height / 2; int radius Math.Min(cx, cy) - 10; // 留 10 像素边距 float startAngle 135f; // 起始角单位度 float sweepAngle 270f; // 扫过角度 float minValue 0f, maxValue 100f; // 量程 // 画表盘外圈 using (Pen pen new Pen(Color.DarkGray, 2)) g.DrawEllipse(pen, cx - radius, cy - radius, radius * 2, radius * 2); // 画主刻度和数字 int majorCount 10; for (int i 0; i majorCount; i) { float angle startAngle sweepAngle * i / majorCount; double rad angle * Math.PI / 180.0; float x1 cx (float)(Math.Cos(rad) * (radius - 15)); float y1 cy (float)(Math.Sin(rad) * (radius - 15)); float x2 cx (float)(Math.Cos(rad) * radius); float y2 cy (float)(Math.Sin(rad) * radius); using (Pen pen new Pen(Color.Black, 2)) g.DrawLine(pen, x1, y1, x2, y2); // 数字位置比刻度线再往里缩一点 float tx cx (float)(Math.Cos(rad) * (radius - 32)); float ty cy (float)(Math.Sin(rad) * (radius - 32)); string text (minValue (maxValue - minValue) * i / majorCount).ToString(0); SizeF sz g.MeasureString(text, this.Font); g.DrawString(text, this.Font, Brushes.Black, tx - sz.Width / 2, ty - sz.Height / 2); } // 画指针 float curValue 65f; // 实际项目里从属性或数据源取 float curAngle startAngle sweepAngle * (curValue - minValue) / (maxValue - minValue); double curRad curAngle * Math.PI / 180.0; float px cx (float)(Math.Cos(curRad) * (radius - 25)); float py cy (float)(Math.Sin(curRad) * (radius - 25)); using (Pen pen new Pen(Color.Red, 3)) g.DrawLine(pen, cx, cy, px, py); // 中心轴 g.FillEllipse(Brushes.Black, cx - 6, cy - 6, 12, 12); } e.Graphics.DrawImage(bmp, 0, 0); bmp.Dispose(); }逻辑说明先把所有绘制操作画到内存 Bitmap 上最后用e.Graphics.DrawImage一次性贴出来这是消除闪烁最直接的办法。参数说明startAngle和sweepAngle决定表盘开口方向改成 180/180 就是半圆表radius - 15控制刻度线长度radius - 32控制数字离圆心的距离这两个值要跟着控件尺寸动态调写死会在缩放时错位。curValue在实际项目里应该做成属性set 的时候调Invalidate()触发重绘。2.3 直表测量标尺横向还是纵向先定坐标系直表本质是把圆表的角度映射换成线性映射。横向直表适合放在参数行里纵向直表适合做液位、料位显示。绘制步骤先画一个矩形边框作为标尺区域再按等分画刻度线最后画一个填充矩形或三角指示当前值。// 横向直表核心绘制片段 int left 10, top 10, width this.Width - 20, height 40; float minValue 0f, maxValue 100f, curValue 72f; // 外框 using (Pen pen new Pen(Color.Gray, 1)) g.DrawRectangle(pen, left, top, width, height); // 刻度每 10% 一条 for (int i 0; i 10; i) { int x left width * i / 10; using (Pen pen new Pen(Color.Black, i % 5 0 ? 2 : 1)) g.DrawLine(pen, x, top, x, top (i % 5 0 ? 12 : 6)); } // 当前值指示条 int barWidth (int)(width * (curValue - minValue) / (maxValue - minValue)); using (Brush brush new SolidBrush(Color.FromArgb(180, Color.DodgerBlue))) g.FillRectangle(brush, left, top 14, barWidth, height - 14);逻辑说明刻度循环里用i % 5 0区分主次刻度主刻度线更长更粗。参数说明top 14是给刻度线留的空间指示条从刻度线下方开始填充Color.FromArgb(180, ...)的 180 是透明度让指示条盖住底纹时还能透出一点视觉上更柔和。纵向直表把 x/y 对调即可注意文字标注要旋转 90 度用g.RotateTransform配合g.TranslateTransform处理。2.4 旋钮、开关、指示灯状态机比绘制更重要这三个控件绘制本身不难难在状态管理。旋钮通常有离散档位比如 0 到 10 档鼠标按下拖动时要把鼠标位移映射成档位变化开关是二态或三态要处理点击切换和禁用态指示灯是纯显示但颜色和闪烁逻辑要跟报警等级挂钩。旋钮的鼠标交互核心是计算鼠标相对于控件中心的角度再映射到档位private void Knob_MouseMove(object sender, MouseEventArgs e) { if (e.Button ! MouseButtons.Left) return; int cx this.Width / 2, cy this.Height / 2; double angle Math.Atan2(e.Y - cy, e.X - cx) * 180.0 / Math.PI; // 把 -180~180 映射到 0~270 的档位范围 if (angle 0) angle 360; float ratio (float)((angle - 135 360) % 360) / 270f; ratio Math.Max(0, Math.Min(1, ratio)); int newLevel (int)Math.Round(ratio * MaxLevel); if (newLevel ! _level) { _level newLevel; Invalidate(); // 触发重绘 LevelChanged?.Invoke(this, EventArgs.Empty); // 通知外部 } }逻辑说明Math.Atan2返回弧度转成角度后归一化到 0 到 360再减去起始角 135 得到相对角度除以 270 得到 0 到 1 的比例。参数说明MaxLevel是档位总数LevelChanged是自定义事件外部订阅后可以联动其他控件或写寄存器。开关和指示灯相对简单开关用bool _isOn加点击切换指示灯用Color _color加bool _blink闪烁用System.Windows.Forms.Timer定时切换透明度即可。3. 把五个控件组装进一个可运行的 WinForms 示例3.1 项目结构与控件基类新建一个 WinForms 项目添加五个自定义控件类GaugeCircle、GaugeBar、KnobControl、SwitchControl、IndicatorLight。每个控件继承Control重写OnPaint。建议抽一个基类InstrumentBase把双缓冲、抗锯齿、字体设置这些公共逻辑放进去避免每个控件重复写。public abstract class InstrumentBase : Control { protected InstrumentBase() { // 开启双缓冲减少闪烁 this.SetStyle(ControlStyles.AllPaintingInWmPaint | ControlStyles.UserPaint | ControlStyles.OptimizedDoubleBuffer, true); this.ResizeRedraw true; // 尺寸变化时重绘 } protected override void OnPaint(PaintEventArgs e) { e.Graphics.SmoothingMode System.Drawing.Drawing2D.SmoothingMode.AntiAlias; e.Graphics.TextRenderingHint System.Drawing.Text.TextRenderingHint.AntiAlias; base.OnPaint(e); } }逻辑说明SetStyle里的三个标志位分别控制“所有绘制走 Paint”“用户自己画”“双缓冲”这是 WinForms 自绘控件的标准配置。参数说明ResizeRedraw true保证控件被拉伸时重新计算坐标否则刻度会糊掉。基类不实现具体绘制留给子类。3.2 主窗体布局与数据联动主窗体上放一个TableLayoutPanel左边放圆表和直表右边放旋钮、开关、指示灯。用一个System.Windows.Forms.Timer模拟数据源每 200ms 更新一次圆表和直表的值旋钮的LevelChanged事件里改直表量程开关控制指示灯的启用状态。private void timer1_Tick(object sender, EventArgs e) { _value (_value 3) % 101; // 模拟 0~100 循环 gaugeCircle1.Value _value; gaugeBar1.Value _value; indicatorLight1.IsOn _value 80; // 超过 80 亮红灯 } private void knobControl1_LevelChanged(object sender, EventArgs e) { // 旋钮档位映射成直表上限演示联动 gaugeBar1.MaxValue 50 knobControl1.Level * 10; }逻辑说明Timer 的 Tick 里更新控件属性属性的 set 方法内部调Invalidate()触发重绘。参数说明(_value 3) % 101是模拟数据实际项目里换成串口或 TCP 收到的解析结果。knobControl1.Level是旋钮当前档位映射到直表上限时注意别让MaxValue小于MinValue否则除零。3.3 属性设计与外部调用约定每个仪表控件至少暴露Value、MinValue、MaxValue三个属性旋钮暴露Level和MaxLevel开关暴露IsOn指示灯暴露IsOn和Blink。属性 set 里做范围钳制防止外部传入越界值导致绘制异常。private float _value; public float Value { get _value; set { float v Math.Max(MinValue, Math.Min(MaxValue, value)); if (Math.Abs(v - _value) 0.001f) { _value v; Invalidate(); // 只有值真的变了才重绘 } } }逻辑说明Math.Max和Math.Min组合做上下限钳制Math.Abs判断避免浮点误差导致的无意义重绘。参数说明0.001f是容差如果数据源精度更高可以调小。这个模式在五个控件里通用是保证界面不卡的基础。4. 避坑与排查自绘仪表控件最容易翻车的五个地方4.1 现象界面疯狂闪烁鼠标一动就闪原因在OnPaint里直接e.Graphics绘制没有双缓冲每次重绘都先擦背景再画前景中间态被看到。解决用SetStyle开启OptimizedDoubleBuffer或者像第 2 章那样先画到 Bitmap 再贴。注意ControlStyles.UserPaint必须一起开否则OnPaint不会被调用。4.2 现象运行几分钟后内存涨到几百兆原因Pen、Brush、Font、Bitmap这些 GDI 对象没有 Dispose每次重绘都 new 一个垃圾回收跟不上。解决所有 GDI 对象用using包起来或者做成控件级字段复用。特别注意new SolidBrush(Color.Red)这种写法颜色不变就提到字段里别在循环里 new。4.3 现象刻度数字和刻度线对不齐缩放后更明显原因数字位置用固定像素偏移没有跟着半径比例算。解决所有偏移量都写成radius * 系数的形式比如数字距离圆心radius * 0.75刻度线长度radius * 0.1。这样控件放大缩小时比例不变。另外MeasureString返回的尺寸要除以 2 再减才能让文字中心对准目标点。4.4 现象旋钮拖到边界时跳档或卡死原因Math.Atan2在 0 度和 360 度附近有跳变直接取模运算会在边界产生突变。解决先归一化角度到 0 到 360再减去起始角用(angle - 135 360) % 360保证结果非负最后Math.Max(0, Math.Min(1, ratio))钳制。如果还是跳检查MaxLevel是否为 0除零会返回 NaN。4.5 现象多线程更新控件值时抛跨线程异常原因串口线程或 TCPListener 的接收回调里直接改控件属性WinForms 控件只能在 UI 线程访问。解决用Invoke或BeginInvoke把更新操作封送到 UI 线程。如果更新频率很高别每个数据点都 Invoke攒一批再刷或者用Interlocked交换值后由 UI 定时器统一读。// 线程安全的更新方式 private void UpdateValueSafe(float v) { if (this.InvokeRequired) this.BeginInvoke(new Actionfloat(UpdateValueSafe), v); else this.Value v; }逻辑说明InvokeRequired判断当前线程是不是 UI 线程不是就BeginInvoke异步封送。参数说明用BeginInvoke而不是Invoke是为了避免接收线程被阻塞代价是更新顺序在极端情况下可能乱对仪表显示来说可以接受。5. 进阶技巧用双缓冲位图缓存把重绘开销压到最低前面几章的例子每次重绘都重新画所有元素对圆表这种刻度多、文字多的控件来说50ms 刷一次会有可感知的 CPU 占用。进阶做法是把静态部分缓存成位图动态部分指针、指示条每次重绘时叠加。具体来说在控件尺寸变化或量程变化时把表盘外圈、刻度线、数字画到一张_backgroundBmp里OnPaint里先DrawImage贴背景再画指针和中心轴。这样每次重绘的绘制指令从几百条降到几条。private Bitmap _backgroundBmp; private void RebuildBackground() { _backgroundBmp?.Dispose(); _backgroundBmp new Bitmap(this.Width, this.Height); using (Graphics g Graphics.FromImage(_backgroundBmp)) { g.SmoothingMode System.Drawing.Drawing2D.SmoothingMode.AntiAlias; // 这里画外圈、刻度、数字代码同第 2 章省略 } } protected override void OnPaint(PaintEventArgs e) { if (_backgroundBmp null || _backgroundBmp.Width ! this.Width) RebuildBackground(); e.Graphics.DrawImage(_backgroundBmp, 0, 0); // 只画指针和中心轴 DrawPointer(e.Graphics); }逻辑说明RebuildBackground在尺寸变化时重建缓存OnPaint里只贴背景加画指针。参数说明_backgroundBmp.Width ! this.Width是简单的失效判断更严谨的做法是同时判断高度和量程。注意_backgroundBmp要在控件Dispose时释放否则一样漏内存。验证缓存有没有生效可以用一个简单办法在OnPaint开头加Console.WriteLine(DateTime.Now.Ticks)对比优化前后两次输出的间隔或者直接看任务管理器里进程的 CPU 占用。我一般会在圆表上挂一个 200ms 的定时器优化前 CPU 占用在 3% 到 5% 波动缓存后降到 1% 以下。还有一个容易忽略的点ControlStyles.OptimizedDoubleBuffer和手动 Bitmap 缓存不要同时用。前者已经帮你做了一层缓冲再叠手动缓存等于画两遍反而更慢。二选一控件简单就用SetStyle控件复杂、静态元素多用位图缓存。最后说个血泪经验仪表控件的坐标计算一定要用float别用int。圆表半径小的时候int除法会把刻度位置算偏表盘看起来就是歪的。这个坑我调了一下午才定位到希望帮到你。本文还有配套的精品资源点击获取