C#绘制常用工业控件（仪表盘，流动条，开关等）

已于 2024-09-02 11:36:59 修改
阅读量3.1k 收藏 38
点赞数 7
分类专栏： Winform开发 文章标签： c# windows 后端
于 2024-09-02 11:29:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/lingxiao16888/article/details/141811496
版权

目录

1，使用Graphics绘制Toggle。

效果：

测试代码：

Toggle控件代码：

2，使用Graphics绘制Switch。

效果：

测试代码：

Switch控件代码：

3，使用Graphics绘制PanelHead。

效果

PanelHead控件代码：

4，自定义数字键盘NumberKeyBoard。

效果：

测试代码：

NumberKeyBoard控件代码

5，使用Graphics绘制LED。

效果：

LED控件代码：

6，使用Graphics绘制流动条。

效果：

FlowControl代码 ：

7，使用Graphics绘制仪表盘1：

效果：

DashBoard控件代码

8，使用Graphics绘制仪表盘2：

效果：

Gague控件代码：

预览

1，使用Graphics绘制Toggle。

效果：

测试代码：
 private void toggle3_Click(object sender, EventArgs e)
        {
            toggle3.Checked = !toggle3.Checked;
        }
        private void toggle2_Click(object sender, EventArgs e)
        {
            toggle2.Checked = !toggle2.Checked;
        }
        private void toggle1_Click(object sender, EventArgs e)
        {
            toggle1.Checked = !toggle1.Checked;
        }
Toggle控件代码：
 [DefaultEvent("Click")]//指定默认事件
    public partial class Toggle : UserControl
    {
        public Toggle()
        {
            InitializeComponent();
            设置控件样式
            this.SetStyle(ControlStyles.AllPaintingInWmPaint, true);
            this.SetStyle(ControlStyles.DoubleBuffer, true);
            this.SetStyle(ControlStyles.ResizeRedraw, true);
            this.SetStyle(ControlStyles.Selectable, true);
            this.SetStyle(ControlStyles.SupportsTransparentBackColor, true);
            this.SetStyle(ControlStyles.UserPaint, true);
        }
        string falseText = "关闭";
        [Browsable(true), Category("自定义属性"), Description("false时文本")]
        public string FalseText
        {
            get
            {
                return falseText;
            }
            set
            {
                falseText = value;
                this.Invalidate();
            }
        }
        string trueText = "打开";
        [Browsable(true), Category("自定义属性"), Description("true时文本")]
        public string TrueText
        {
            get
            {
                return trueText;
            }
            set
            {
                trueText = value;
                this.Invalidate();
            }
        }
        bool _checked = false;
        [Browsable(true), Category("自定义属性"), Description("是否确认,Ture表示ON，False表示OFF")]
        public bool Checked
        {
            get
            {
                return _checked;
            }
            set
            {
                _checked = value;
                this.Invalidate();
            }
        }
        bool isShowWord = false;
        [Browsable(true), Category("自定义属性"), Description("是否显示文字，如果否则显示形状")]
        public bool IsShowWord
        {
            get
            {
                return isShowWord;
            }
            set
            {
                isShowWord = value;
                this.Invalidate();
            }
        }
        Color falseColor = Color.LightGray;
        [Browsable(true), Category("自定义属性"), Description("False状态时填充色")]
        public Color FalseColor
        {
            get
            {
                return falseColor;
            }
            set
            {
                falseColor = value;
                this.Invalidate();
            }
        }
        Color trueColor = Color.CadetBlue;
        [Browsable(true), Category("自定义属性"), Description("True状态时填充色")]
        public Color TrueColor
        {
            get
            {
                return trueColor;
            }
            set
            {
                trueColor = value;
                this.Invalidate();
            }
        }
        [Browsable(true), Category("自定义属性"), Description("若为非文字模式时，圆点的半径")]
        public int EmbellishRadius
        {
            get
            {
                return (int)(EmbellishRadiusFactor * Height);
            }
        }
        float _embellishRadiusFactor = 0.15f;
        [Browsable(true), Category("自定义属性"), Description("若为非文字模式时，圆点的比例因子")]
        public float EmbellishRadiusFactor
        {
            set
            {
                if (value >= 1 || value <= 0)
                {
                    _embellishRadiusFactor = 0.3f;
                }
                else
                {
                    _embellishRadiusFactor = value;
                }
                this.Invalidate();
            }
            get
            {
                return _embellishRadiusFactor;
            }
        }
        bool _embellishPointAuto = true;
        [Browsable(true), Category("自定义属性"), Description("修饰文字或者图形的起点是否自动获取")]
        public bool EmbellishPointAuto
        {
            get
            {
                return _embellishPointAuto;
            }
            set
            {
                _embellishPointAuto = value;
                this.Invalidate();
            }
        }
        PointF _embellishPoint;
        [Browsable(true), Category("自定义属性"), Description("绘制修饰文字或者图形所需的起点")]
        public PointF EmbellishPoint
        {
            get
            {
                return _embellishPoint;
            }
            set
            {
                _embellishPoint = value;
                if (!EmbellishPointAuto)
                {
                    this.Invalidate();
                }
            }
        }
        Color _embellishColor = Color.White;
        [Browsable(true), Category("自定义属性"), Description("绘制修饰文字或者图形所需的颜色")]
        public Color EmbellishColor
        {
            get
            {
                return _embellishColor;
            }
            set
            {
                _embellishColor = value;
                this.Invalidate();
            }
        }
        ToggleType _toggleType = ToggleType.Rectangle;
        [Browsable(true), Category("自定义属性"), Description("Toggle的样式")]
        public ToggleType ToggleStyle
        {
            get
            {
                return _toggleType;
            }
            set
            {
                _toggleType = value;
                this.Invalidate();
            }
        }
        Padding _borderRadius = new Padding(3);
        [Browsable(true), Category("自定义属性"), Description("Rectangle风格时采用的倒角半径")]
        public Padding BorderRadius
        {
            get
            {
                return _borderRadius;
            }
            set
            {
                _borderRadius = value;
                if (ToggleStyle == ToggleType.Rectangle)
                {
                    this.Invalidate();
                }
            }
        }
        int _innerGap = 3;
        [Browsable(true), Category("自定义属性"), Description("内部间隙")]
        public int InnerGap
        {
            get
            {
                return _innerGap;
            }
            set
            {
                _innerGap = value;
                this.Invalidate();
            }
        }
        Color _slidingColor = Color.White;
        [Browsable(true), Category("自定义属性"), Description("滑动块颜色")]
        public Color SlidingColor
        {
            get
            {
                return _slidingColor;
            }
            set
            {
                _slidingColor = value;
                this.Invalidate();
            }
        }
        protected override void OnPaint(PaintEventArgs e)
        {
            base.OnPaint(e);
            Graphics g = e.Graphics;
            g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias;
            g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
            g.CompositingQuality = System.Drawing.Drawing2D.CompositingQuality.HighQuality;
            g.TextRenderingHint = System.Drawing.Text.TextRenderingHint.ClearTypeGridFit;
            GraphicsPath path = new GraphicsPath();
            Padding drawingRadius;
            if (ToggleStyle == ToggleType.Ellipse)
            {
                drawingRadius = new Padding(Height / 2);
            }
            else
            {
                drawingRadius = BorderRadius;
            }
            //绘制矩形
            //左上角
            path.AddArc(0, 0, drawingRadius.Left * 2, drawingRadius.Left * 2, 180, 90);
            //右上角
            path.AddArc(Width - drawingRadius.Top * 2, 0, drawingRadius.Top * 2, drawingRadius.Top * 2, 270, 90);
            //右下角
            path.AddArc(Width - drawingRadius.Right * 2, Height - drawingRadius.Right * 2, drawingRadius.Right * 2, drawingRadius.Right * 2, 0, 90);
            //左下角
            path.AddArc(0, Height - 2 * drawingRadius.Bottom, 2 * drawingRadius.Bottom, 2 * drawingRadius.Bottom, 90, 90);
            //滑动块起点
            Point slidingPoint;
            if (Checked)
            {
                g.FillPath(new SolidBrush(TrueColor), path);
                slidingPoint = new Point(Width - Height + InnerGap, InnerGap);
                //如果是文字模式
                if (IsShowWord && EmbellishPointAuto)
                {
                    SizeF trueTextSize = g.MeasureString(TrueText, this.Font);
                    EmbellishPoint = new PointF(((Width - trueTextSize.Width - Height)) / 2, ((Height - trueTextSize.Height)) / 2);
                }
                //如果是非文字模式
                if (!IsShowWord && EmbellishPointAuto)
                {
                    EmbellishPoint = new PointF(Height / 2 - EmbellishRadius, Height / 2 - EmbellishRadius);
                }
            }
            else
            {
                g.FillPath(new SolidBrush(FalseColor), path);
                slidingPoint = new Point(InnerGap, InnerGap);
                //如果是文字模式
                if (IsShowWord && EmbellishPointAuto)
                {
                    SizeF falseTextSize = g.MeasureString(FalseText, this.Font);
                    EmbellishPoint = new PointF(Height + (Width - Height - falseTextSize.Width) / 2, ((Height - falseTextSize.Height)) / 2);
                }
                //如果是非文字模式
                if (!IsShowWord && EmbellishPointAuto)
                {
                    EmbellishPoint = new Point(Width - (Height / 2 + EmbellishRadius / 2), Height / 2 - EmbellishRadius);
                }
            }
            int slidingWidth = Height - 2 * InnerGap;
            GraphicsPath path2 = new GraphicsPath(FillMode.Alternate);
            int slidingHeight = slidingWidth;
            float scale = slidingWidth * 1.0f / Width;
            if (ToggleStyle == ToggleType.Rectangle)
            {
                //左上角
                path2.AddArc(slidingPoint.X, slidingPoint.Y, drawingRadius.Left * 2, drawingRadius.Left * 2, 180, 90);
                //右上角
                path2.AddArc(slidingPoint.X + slidingWidth - drawingRadius.Top * 2, slidingPoint.Y, drawingRadius.Top * 2, drawingRadius.Top * 2, 270, 90);
                //右下角
                path2.AddArc(slidingPoint.X + slidingWidth - drawingRadius.Right * 2, slidingPoint.Y + slidingHeight - drawingRadius.Right * 2, drawingRadius.Right * 2, drawingRadius.Right * 2, 0, 90);
                //左下角
                path2.AddArc(slidingPoint.X, slidingPoint.Y + slidingHeight - 2 * drawingRadius.Bottom, 2 * drawingRadius.Bottom, 2 * drawingRadius.Bottom, 90, 90);
            }
            else
            {
                path2.AddEllipse(slidingPoint.X, slidingPoint.Y, Height - 2 * InnerGap, Height - 2 * InnerGap);
            }
            g.FillPath(new SolidBrush(SlidingColor), path2);
            if (IsShowWord)
            {
                if (Checked)
                {
                    g.DrawString(TrueText, this.Font, new SolidBrush(this.EmbellishColor), EmbellishPoint);
                }
                else
                {
                    g.DrawString(FalseText, this.Font, new SolidBrush(this.EmbellishColor), EmbellishPoint);
                }
            }
            else
            {
                g.DrawEllipse(new Pen(EmbellishColor, 2), new RectangleF(EmbellishPoint, new SizeF(EmbellishRadius * 2, EmbellishRadius * 2)));
            }
        }
    }
    public enum ToggleType
    {
        /// <summary>
        /// 矩形形状
        /// </summary>
        Rectangle,
        /// <summary>
        /// 椭圆形状
        /// </summary>
        Ellipse
    }

2，使用Graphics绘制Switch。

效果：

测试代码：
 private void switchControl1_Click(object sender, EventArgs e)
        {
            switchControl1.SwitchStatus = !switchControl1.SwitchStatus;
        }
Switch控件代码：
 [DefaultEvent("Click")]
    public partial class SwitchControl : UserControl
    {
        public SwitchControl()
        {
            InitializeComponent();
            设置控件样式
            this.SetStyle(ControlStyles.AllPaintingInWmPaint, true);
            this.SetStyle(ControlStyles.DoubleBuffer, true);
            this.SetStyle(ControlStyles.ResizeRedraw, true);
            this.SetStyle(ControlStyles.Selectable, true);
            this.SetStyle(ControlStyles.SupportsTransparentBackColor, true);
            this.SetStyle(ControlStyles.UserPaint, true);
        }
        int _outGap = 20;
        /// <summary>
        /// 外间隙
        /// </summary>
        [Browsable(true),Category("自定义属性"),Description("外间隙")]
        public int OutCap
        {
            get
            {
                return _outGap;
            }
            set
            {
                if (_outGap < 0)
                {
                    _outGap = 0;
                }
                else
                {
                    _outGap = value;
                }
                this.Invalidate();
            }
        }
        int _innerGap = 3;
        /// <summary>
        /// 内间隙
        /// </summary>
        [Browsable(true), Category("自定义属性"), Description("内间隙")]
        public int InnerCap
        {
            get
            {
                return _innerGap;
            }
            set
            {
                if (_innerGap < 0)
                {
                    _innerGap = 0;
                }
                else
                {
                    _innerGap = value;
                }
                this.Invalidate();
            }
        }
        bool _switchStatus = false;
        /// <summary>
        /// 开关状态
        /// </summary>
        [Browsable(true), Category("自定义属性"), Description("开关状态")]
        public bool SwitchStatus
        {
            get
            {
                return _switchStatus;
            }
            set
            {
                    _switchStatus = value;
                this.Invalidate();
            }
        }
        int _outCircleWidth = 4;
        /// <summary>
        /// 外圆宽度
        /// </summary>
        [Browsable(true), Category("自定义属性"), Description("外圆宽度")]
        public int OutCircleWidth
        {
            get
            {
                return _outCircleWidth;
            }
            set
            {
                if (_outCircleWidth < 0)
                {
                    _outCircleWidth = 2;
                }
                else
                {
                    _outCircleWidth = value;
                }
                this.Invalidate();
            }
        }
        Color _outCircleColor = Color.Gray;
        /// <summary>
        /// 外圆颜色
        /// </summary>
        [Browsable(true), Category("自定义属性"), Description("外圆颜色")]
        public Color OutCircleColor
        {
            get
            {
                return _outCircleColor;
            }
            set
            {
                    _outCircleColor = value;
                this.Invalidate();
            }
        }
        Color _innerCircleColor = Color.Gray;
        /// <summary>
        /// 外圆颜色
        /// </summary>
        [Browsable(true), Category("自定义属性"), Description("内圆颜色")]
        public Color InnerCircleColor
        {
            get
            {
                return _innerCircleColor;
            }
            set
            {
                _innerCircleColor = value;
                this.Invalidate();
            }
        }
        /// <summary>
        ///旋转手柄宽度
        /// </summary>
        [Browsable(true), Category("自定义属性"), Description("旋转手柄宽度")]
        public float HandleWidth
        {
            get
            {
                return Dimensions*HandleWidthFactor;
            }
        }
        float _handleWidthFactor = 0.1f;
        /// <summary>
        ///旋转手柄宽度比例因子
        /// </summary>
        [Browsable(true), Category("自定义属性"), Description("旋转手柄宽度比例因子")]
        public float HandleWidthFactor
        {
            get
            {
                return _handleWidthFactor;
            }
            set
            {
                if (_handleWidthFactor < 0)
                {
                    _handleWidthFactor = 0.15f;
                }
                else
                {
                    _handleWidthFactor = value;
                }
                this.Invalidate();
            }
        }
        Color _embellishColor = Color.Orange;
        /// <summary>
        /// 手柄标记颜色
        /// </summary>
        [Browsable(true), Category("自定义属性"), Description("手柄标记颜色")]
        public Color EmbellishColor
        {
            get
            {
                return _embellishColor;
            }
            set
            {
                _embellishColor = value;
                this.Invalidate();
            }
        }
        Color _handleColor = Color.Black;
        /// <summary>
        /// 手柄颜色
        /// </summary>
        [Browsable(true), Category("自定义属性"), Description("手柄颜色")]
        public Color HandleColor
        {
            get
            {
                return _handleColor;
            }
            set
            {
                _handleColor = value;
                this.Invalidate();
            }
        }
        /// <summary>
        /// 绘图的标准尺寸
        /// </summary>
       private int Dimensions
        {
            get
            {
                if (Width > Height)
                {
                    return Height;
                }
                else
                {
                    return Width;
                }
            }
        }
        float _sweep = 36;
        /// <summary>
        /// 手柄旋转角度
        /// </summary>
        [Browsable(true), Category("自定义属性"), Description("手柄旋转角度")]
        public float Sweep
        {
            get
            {
                return _sweep;
            }
            set
            {
                _sweep = value;
                this.Invalidate();
            }
        }
        protected override void OnPaint(PaintEventArgs e)
        {
            base.OnPaint(e);
            Graphics g = e.Graphics;
            g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias;
            g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
            g.CompositingQuality = System.Drawing.Drawing2D.CompositingQuality.HighQuality;
            g.TextRenderingHint = System.Drawing.Text.TextRenderingHint.ClearTypeGridFit;
            //绘制外圆
            g.DrawEllipse(new Pen(OutCircleColor, OutCircleWidth), OutCap, OutCap, this.Dimensions - 2 * OutCap, Dimensions - 2 * OutCap);
            //绘制内圆
            Point innerPoint = new Point(OutCap + OutCircleWidth + InnerCap, OutCap + OutCircleWidth + InnerCap);
            int innerWidth = Dimensions - 2 * innerPoint.X ;
            g.FillEllipse(new SolidBrush(InnerCircleColor), innerPoint.X, innerPoint.Y, innerWidth, innerWidth);
            //偏移原点
            g.TranslateTransform(Dimensions / 2, Dimensions / 2);
            //旋转角度
            if (SwitchStatus)
            {
                g.RotateTransform(Sweep);
            }
            else
            {
                g.RotateTransform(-Sweep);
            }
            //绘制手柄
             g.FillRectangle(new SolidBrush(HandleColor), -HandleWidth/2, (-Dimensions + OutCap)/2, HandleWidth, Dimensions - OutCap);
            //绘制手柄标志
            float embellishWidth = HandleWidth / 2;
            float embellishHeight = HandleWidth * 1.5f;
            g.FillEllipse(new SolidBrush(EmbellishColor), -embellishWidth / 2, (-Dimensions + OutCap) / 2 + embellishWidth / 2, embellishWidth, embellishHeight);
        }
    }

3，使用Graphics绘制PanelHead。

效果

可设置边框颜色，有无，Header文字，Header高度，背景色等，以及Dock类型

PanelHead控件代码：
public partial class PanelHead : Panel
    {
        public PanelHead()
        {
            InitializeComponent();
            //  设置控
最低0.47元/天 解锁文章
仪表控件 C#例子,包括圆表，直表（测量标尺），旋钮，开关，指示灯
03-08
一个仪表控件C#例子。 有 圆表，直表（测量标尺），旋钮，开关，指示灯。 压缩包内有截图。
好例子网_C#漂亮的工业软件控件.rar
11-27
本代码提供了用c#开发的工业上用的控件，有仪表盘、数字液晶显示、颜色按钮、还有带属性的数字字母控件， 特别适合初级者入门与学习。
C#工业风格用户界面控件源码剖析与实战
最新发布
weixin_42181686的博客
05-08 929
仪表控件，亦称为量表控件，是一种用于图形化展示数据和度量的用户界面元素。其外观与传统的物理仪器表盘类似，能够以直观的方式显示数值或者进度。仪表控件在功能上可以根据实际需求定制各种类型的展示效果，例如温度计、电压表、转速表等。通常仪表控件具备以下功能特点：可视化展示：将数据以易于理解的图形形式展现出来，例如指针、区域填充等。动态数据更新：实时反映数据的变化，允许通过程序改变其显示值。用户交互：支持用户的交互操作，如点击、拖动指针进行数值调整。
C#工业控件
02-26
使用C#实现的一些用于组态软件的工业控件实例。
C#常用工业控件及使用方法
12-13
C#常用工业控件及使用方法，各种表，各种按钮都有，好东西，一起分享！！
C#工业软件控件.rar_C# 工业控件_工业 自动控制_工业按钮_工业控件_自动化仪表
07-13
工业控制用到的仪表,按钮等操作 ,可以方便自动化集成。
c#工业控件集合
04-10
用于工业使用的自定义控件，包括图表，温度计，仪表盘等自定义控件。
C#自定义工业控件开发
weixin_34344403的博客
12-13 387
由于工作需要，调研过一段时间的工业控制方面的“组态软件”（SCADA）的开发，组态软件常用于自动化工业控制领域，其中包括实时数据采集、数据储存、设备控制和数据展现等功能。其中工控组件的界面展现的实现类似于Windows系统下的各种开发控件，通过各种控件的组装，和硬件协议的集成，就可以实现对相应设备的控制和实时状态的显示。 每个对应的硬件UI展示都可以用一个自定义控件来实现，如下图的一个温度计，就...
极品工控控件 C# 非常有用
04-06
极品工控控件，一些相当有用的控件和组件，用于画图等。实现的绘图工具组件库源代码
C# 常用工业控件 Winform
qq_41848097的博客
07-20 1663
工业控件、免费、winform
C#编写《仪表盘》控件
01-06
使用C#编写的一个工业仪表盘的控件，控件可以变大小，背景颜色、指针等颜色可以改变。有意向童鞋可以下载参考。本人声明：本人为业余爱好者，编写控件纯粹是玩耍，所以控件并未经过严格测试，和代码冗余测试等等，若发现有错误，请谅解。 开发环境：Visual Studio 2010 开发语言：C# 本人声明：本人为业余爱好者，编写控件纯粹是玩耍，所以控件并未经过严格测试，和代码冗余测试等等，若发现有错误，请谅解。
非常非常好用而且炫丽的C#仪表盘控件
09-28
本仪表盘控件由C#编写，是一位印度高手完成，在此与大家分享。
C#实用仪表控件
12-17
内含两个仪表控件，简单，效果好，本人亲测成功，如有疑问 可以咨询，一行代码就解决的事。
C# 绚丽仪表控件，开关控件，彩色圆形按钮，晶体管数字控件源码(已测试)
10-12
绚丽仪表控件，开关控件，彩色圆形按钮，晶体管数字控件源码及测试源码，都已测试，绝对可用
C#第3方控件包括工业仪表
04-14
C#第3方控件包括工业仪表，非常好的第3方控件，工业仪表是带源码的。
c# Winform自定义控件-仪表盘功能
08-25
仪表盘控件可以应用于各种场景，例如工业控制系统、医疗设备、汽车电子设备等。 9. 自定义控件的优点和缺点 自定义控件的优点是可以满足特殊的需求，提供灵活的设计和实现方式。但是，自定义控件也存在一些缺点，...
Winform仪表盘控件_C#_仪表盘_winform_
09-30
"Winform仪表盘控件"就是一种专门用于此类目的的组件，它允许开发者在C#应用程序中构建动态、交互式的仪表盘界面。这个标题暗示了我们讨论的是一个用于Winform应用的特定类型控件，该控件设计用于显示数据指标，如...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值