前提

入行已经7,8年了，一直想做一套漂亮点的自定义控件，于是就有了本系列文章。

GitHub：https://github.com/kwwwvagaa/NetWinformControl

码云：https://gitee.com/kwwwvagaa/net_winform_custom_control.git

如果觉得写的还行，请点个 star 支持一下吧

欢迎前来交流探讨：企鹅群568015492

麻烦博客下方点个【推荐】，谢谢

NuGet

Install-Package HZH_Controls

用处及效果

准备工作

这个用到GDI+画的，请先了解一下GDI+

还有用到了基类控件UCControlBase来控制圆角和背景色，如果还不了解请移步查看

（一）c#Winform自定义控件-基类控件

开始

添加一个类UCWaveWithSource ，继承UCControlBase

添加属性

  private int m_waveActualWidth = 50;            private int m_waveWidth = 50;            [Description("波形宽度"), Category("自定义")]          public int WaveWidth          {              get { return m_waveWidth; }              set              {                  if (value <= 0)                      return;                  m_waveWidth = value;                  ResetWaveCount();                  Refresh();              }          }            private int m_sleepTime = 1000;          /// <summary>          /// 波运行速度（运行时间间隔，毫秒）          /// </summary>          [Description("运行速度（运行时间间隔，毫秒）"), Category("自定义")]          public int SleepTime          {              get { return m_sleepTime; }              set              {                  if (value <= 0)                      return;                  m_sleepTime = value;                  if (timer != null)                  {                      timer.Enabled = false;                      timer.Interval = value;                      timer.Enabled = true;                  }              }          }            private float m_lineTension = 0.5f;          /// <summary>          /// 线弯曲程度          /// </summary>          [Description("线弯曲程度(0-1）"), Category("自定义")]          public float LineTension          {              get { return m_lineTension; }              set              {                  if (!(value >= 0 && value <= 1))                  {                      return;                  }                  m_lineTension = value;                  Refresh();              }          }            private Color m_lineColor = Color.FromArgb(150, 73, 119, 232);            [Description("曲线颜色"), Category("自定义")]          public Color LineColor          {              get { return m_lineColor; }              set              {                  m_lineColor = value;                  Refresh();                }          }            private Color m_gridLineColor = Color.FromArgb(50, 73, 119, 232);            [Description("网格线颜色"), Category("自定义")]          public Color GridLineColor          {              get { return m_gridLineColor; }              set              {                  m_gridLineColor = value;                  Refresh();              }          }            private Color m_gridLineTextColor = Color.FromArgb(150, 73, 119, 232);            [Description("网格文本颜色"), Category("自定义")]          public Color GridLineTextColor          {              get { return m_gridLineTextColor; }              set              {                  m_gridLineTextColor = value;                  Refresh();              }          }            public override Font Font          {              get              {                  return base.Font;              }              set              {                  base.Font = value;              }          }          /// <summary>          /// 数据源，用以缓存所有需要显示的数据          /// </summary>          List<KeyValuePair<string, double>> m_dataSource = new List<KeyValuePair<string, double>>();          /// <summary>          /// 当前需要显示的数据          /// </summary>          List<KeyValuePair<string, double>> m_currentSource = new List<KeyValuePair<string, double>>();          Timer timer = new Timer();          /// <summary>          /// 画图区域          /// </summary>          Rectangle m_drawRect;            int m_waveCount = 0;

构造函数中初始化一下样式

 1         public UCWaveWithSource()   2         {   3             this.SetStyle(ControlStyles.AllPaintingInWmPaint, true);   4             this.SetStyle(ControlStyles.DoubleBuffer, true);   5             this.SetStyle(ControlStyles.ResizeRedraw, true);   6             this.SetStyle(ControlStyles.Selectable, true);   7             this.SetStyle(ControlStyles.SupportsTransparentBackColor, true);   8             this.SetStyle(ControlStyles.UserPaint, true);   9   10             this.SizeChanged += UCWaveWithSource_SizeChanged;  11             this.IsShowRect = true;  12             this.RectColor = Color.FromArgb(232, 232, 232);  13             this.FillColor = Color.FromArgb(197, 229, 250);  14             this.RectWidth = 1;  15             this.ConerRadius = 10;  16             this.IsRadius = true;  17             this.Size = new Size(300, 200);  18   19             timer.Interval = m_sleepTime;  20             timer.Tick += timer_Tick;  21             this.VisibleChanged += UCWave_VisibleChanged;  22         }

一个数据添加的函数

1  /// <summary>  2         /// 添加需要显示的数据  3         /// </summary>  4         /// <param name="key">名称</param>  5         /// <param name="value">值</param>  6         public void AddSource(string key, double value)  7         {  8             m_dataSource.Add(new KeyValuePair<string, double>(key, value));  9         }

重绘

 1 protected override void OnPaint(PaintEventArgs e)   2         {   3             base.OnPaint(e);   4             var g = e.Graphics;   5             g.SetGDIHigh();   6    7             int intLineSplit = m_drawRect.Height / 4;   8             for (int i = 0; i <= 4; i++)   9             {  10                 var pen = new Pen(new SolidBrush(m_gridLineColor), 1);  11                 // pen.DashStyle = System.Drawing.Drawing2D.DashStyle.Dot;  12                 g.DrawLine(pen, m_drawRect.Left, m_drawRect.Bottom - 1 - i * intLineSplit, m_drawRect.Right, m_drawRect.Bottom - 1 - i * intLineSplit);  13             }  14   15             if (m_currentSource == null || m_currentSource.Count <= 0)  16             {  17                 for (int i = 0; i <= 4; i++)  18                 {  19                     string strText = (100 / 4 * i).ToString();  20                     System.Drawing.SizeF _numSize = g.MeasureString(strText, this.Font);  21                     g.DrawString(strText, Font, new SolidBrush(m_gridLineTextColor), m_drawRect.Left - _numSize.Width - 1, m_drawRect.Bottom - 1 - i * intLineSplit - (_numSize.Height / 2));  22                 }  23                 return;  24             }  25             List<Point> lst1 = new List<Point>();  26             double dblValue = m_currentSource.Max(p => p.Value);  27             int intValue = (int)dblValue;  28             int intDivisor = ("1".PadRight(intValue.ToString().Length - 1, '0')).ToInt();  29             if (intDivisor < 100)  30                 intDivisor = 100;  31             int intTop = intValue;  32             if (intValue % intDivisor != 0)  33             {  34                 intTop = (intValue / intDivisor + 1) * intDivisor;  35             }  36             if (intTop == 0)  37                 intTop = 100;  38   39             for (int i = 0; i <= 4; i++)  40             {  41                 string strText = (intTop / 4 * i).ToString();  42                 System.Drawing.SizeF _numSize = g.MeasureString(strText, this.Font);  43                 g.DrawString(strText, Font, new SolidBrush(m_gridLineTextColor), m_drawRect.Left - _numSize.Width - 1, m_drawRect.Bottom - 1 - i * intLineSplit - (_numSize.Height / 2));  44             }  45   46             int intEndX = 0;  47             int intEndY = 0;  48             for (int i = 0; i < m_currentSource.Count; i++)  49             {  50                 intEndX = i * m_waveActualWidth + m_drawRect.X;  51                 intEndY = m_drawRect.Bottom - 1 - (int)(m_currentSource[i].Value / intTop * m_drawRect.Height);  52                 lst1.Add(new Point(intEndX, intEndY));  53                 if (!string.IsNullOrEmpty(m_currentSource[i].Key))  54                 {  55                     System.Drawing.SizeF _numSize = g.MeasureString(m_currentSource[i].Key, this.Font);  56                     int txtX = intEndX - (int)(_numSize.Width / 2) + 1;  57                     g.DrawString(m_currentSource[i].Key, Font, new SolidBrush(m_gridLineTextColor), new PointF(txtX, m_drawRect.Bottom + 5));  58                 }  59             }  60   61             int intFirstY = m_drawRect.Bottom - 1 - (int)(m_currentSource[0].Value / intTop * m_drawRect.Height);  62   63   64             GraphicsPath path1 = new GraphicsPath();  65             path1.AddCurve(lst1.ToArray(), m_lineTension);  66             g.DrawPath(new Pen(new SolidBrush(m_lineColor), 1), path1);  67   68         }

辅助函数

 1 /// <summary>   2         /// 得到当前需要画图的数据   3         /// </summary>   4         /// <returns></returns>   5         private List<KeyValuePair<string, double>> GetCurrentList()   6         {   7             if (m_dataSource.Count < m_waveCount)   8             {   9                 int intCount = m_waveCount - m_dataSource.Count;  10                 for (int i = 0; i < intCount; i++)  11                 {  12                     m_dataSource.Add(new KeyValuePair<string, double>("", 0));  13                 }  14             }  15   16             var lst = m_dataSource.GetRange(0, m_waveCount);  17             if (lst.Count == 1)  18                 lst.Insert(0, new KeyValuePair<string, double>("", 0));  19             return lst;  20         }  21   22         /// <summary>  23         /// 计算需要显示的个数  24         /// </summary>  25         private void ResetWaveCount()  26         {  27             m_waveCount = m_drawRect.Width / m_waveWidth;  28             m_waveActualWidth = m_waveWidth + (m_drawRect.Width % m_waveWidth) / m_waveCount;  29             m_waveCount++;  30             if (m_dataSource.Count < m_waveCount)  31             {  32                 int intCount = m_waveCount - m_dataSource.Count;  33                 for (int i = 0; i < intCount; i++)  34                 {  35                     m_dataSource.Insert(0, new KeyValuePair<string, double>("", 0));  36                 }  37             }  38         }

完整代码

  1 using System;    2 using System.Collections.Generic;    3 using System.ComponentModel;    4 using System.Drawing;    5 using System.Drawing.Drawing2D;    6 using System.Linq;    7 using System.Text;    8 using System.Windows.Forms;    9    10 namespace HZH_Controls.Controls   11 {   12     public class UCWaveWithSource : UCControlBase   13     {   14         private int m_waveActualWidth = 50;   15    16         private int m_waveWidth = 50;   17    18         [Description("波形宽度"), Category("自定义")]   19         public int WaveWidth   20         {   21             get { return m_waveWidth; }   22             set   23             {   24                 if (value <= 0)   25                     return;   26                 m_waveWidth = value;   27                 ResetWaveCount();   28                 Refresh();   29             }   30         }   31    32         private int m_sleepTime = 1000;   33         /// <summary>   34         /// 波运行速度（运行时间间隔，毫秒）   35         /// </summary>   36         [Description("运行速度（运行时间间隔，毫秒）"), Category("自定义")]   37         public int SleepTime   38         {   39             get { return m_sleepTime; }   40             set   41             {   42                 if (value <= 0)   43                     return;   44                 m_sleepTime = value;   45                 if (timer != null)   46                 {   47                     timer.Enabled = false;   48                     timer.Interval = value;   49                     timer.Enabled = true;   50                 }   51             }   52         }   53    54         private float m_lineTension = 0.5f;   55         /// <summary>   56         /// 线弯曲程度   57         /// </summary>   58         [Description("线弯曲程度(0-1）"), Category("自定义")]   59         public float LineTension   60         {   61             get { return m_lineTension; }   62             set   63             {   64                 if (!(value >= 0 && value <= 1))   65                 {   66                     return;   67                 }   68                 m_lineTension = value;   69                 Refresh();   70             }   71         }   72    73         private Color m_lineColor = Color.FromArgb(150, 73, 119, 232);   74    75         [Description("曲线颜色"), Category("自定义")]   76         public Color LineColor   77         {   78             get { return m_lineColor; }   79             set   80             {   81                 m_lineColor = value;   82                 Refresh();   83    84             }   85         }   86    87         private Color m_gridLineColor = Color.FromArgb(50, 73, 119, 232);   88    89         [Description("网格线颜色"), Category("自定义")]   90         public Color GridLineColor   91         {   92             get { return m_gridLineColor; }   93             set   94             {   95                 m_gridLineColor = value;   96                 Refresh();   97             }   98         }   99   100         private Color m_gridLineTextColor = Color.FromArgb(150, 73, 119, 232);  101   102         [Description("网格文本颜色"), Category("自定义")]  103         public Color GridLineTextColor  104         {  105             get { return m_gridLineTextColor; }  106             set  107             {  108                 m_gridLineTextColor = value;  109                 Refresh();  110             }  111         }  112   113         public override Font Font  114         {  115             get  116             {  117                 return base.Font;  118             }  119             set  120             {  121                 base.Font = value;  122             }  123         }  124         /// <summary>  125         /// 数据源，用以缓存所有需要显示的数据  126         /// </summary>  127         List<KeyValuePair<string, double>> m_dataSource = new List<KeyValuePair<string, double>>();  128         /// <summary>  129         /// 当前需要显示的数据  130         /// </summary>  131         List<KeyValuePair<string, double>> m_currentSource = new List<KeyValuePair<string, double>>();  132         Timer timer = new Timer();  133         /// <summary>  134         /// 画图区域  135         /// </summary>  136         Rectangle m_drawRect;  137   138         int m_waveCount = 0;  139         public UCWaveWithSource()  140         {  141             this.SetStyle(ControlStyles.AllPaintingInWmPaint, true);  142             this.SetStyle(ControlStyles.DoubleBuffer, true);  143             this.SetStyle(ControlStyles.ResizeRedraw, true);  144             this.SetStyle(ControlStyles.Selectable, true);  145             this.SetStyle(ControlStyles.SupportsTransparentBackColor, true);  146             this.SetStyle(ControlStyles.UserPaint, true);  147   148             this.SizeChanged += UCWaveWithSource_SizeChanged;  149             this.IsShowRect = true;  150             this.RectColor = Color.FromArgb(232, 232, 232);  151             this.FillColor = Color.FromArgb(197, 229, 250);  152             this.RectWidth = 1;  153             this.ConerRadius = 10;  154             this.IsRadius = true;  155             this.Size = new Size(300, 200);  156   157             timer.Interval = m_sleepTime;  158             timer.Tick += timer_Tick;  159             this.VisibleChanged += UCWave_VisibleChanged;  160         }  161   162        163         /// <summary>  164         /// 添加需要显示的数据  165         /// </summary>  166         /// <param name="key">名称</param>  167         /// <param name="value">值</param>  168         public void AddSource(string key, double value)  169         {  170             m_dataSource.Add(new KeyValuePair<string, double>(key, value));  171         }  172   173         void UCWave_VisibleChanged(object sender, EventArgs e)  174         {  175             if (!DesignMode)  176             {  177                 timer.Enabled = this.Visible;  178             }  179         }  180   181         void timer_Tick(object sender, EventArgs e)  182         {  183             m_currentSource = GetCurrentList();  184             m_dataSource.RemoveAt(0);  185             this.Refresh();  186         }  187         void UCWaveWithSource_SizeChanged(object sender, EventArgs e)  188         {  189             m_drawRect = new Rectangle(60, 20, this.Width - 80, this.Height - 60);  190             ResetWaveCount();  191         }  192   193         protected override void OnPaint(PaintEventArgs e)  194         {  195             base.OnPaint(e);  196             var g = e.Graphics;  197             g.SetGDIHigh();  198   199             int intLineSplit = m_drawRect.Height / 4;  200             for (int i = 0; i <= 4; i++)  201             {  202                 var pen = new Pen(new SolidBrush(m_gridLineColor), 1);  203                 // pen.DashStyle = System.Drawing.Drawing2D.DashStyle.Dot;  204                 g.DrawLine(pen, m_drawRect.Left, m_drawRect.Bottom - 1 - i * intLineSplit, m_drawRect.Right, m_drawRect.Bottom - 1 - i * intLineSplit);  205             }  206   207             if (m_currentSource == null || m_currentSource.Count <= 0)  208             {  209                 for (int i = 0; i <= 4; i++)  210                 {  211                     string strText = (100 / 4 * i).ToString();  212                     System.Drawing.SizeF _numSize = g.MeasureString(strText, this.Font);  213                     g.DrawString(strText, Font, new SolidBrush(m_gridLineTextColor), m_drawRect.Left - _numSize.Width - 1, m_drawRect.Bottom - 1 - i * intLineSplit - (_numSize.Height / 2));  214                 }  215                 return;  216             }  217             List<Point> lst1 = new List<Point>();  218             double dblValue = m_currentSource.Max(p => p.Value);  219             int intValue = (int)dblValue;  220             int intDivisor = ("1".PadRight(intValue.ToString().Length - 1, '0')).ToInt();  221             if (intDivisor < 100)  222                 intDivisor = 100;  223             int intTop = intValue;  224             if (intValue % intDivisor != 0)  225             {  226                 intTop = (intValue / intDivisor + 1) * intDivisor;  227             }  228             if (intTop == 0)  229                 intTop = 100;  230   231             for (int i = 0; i <= 4; i++)  232             {  233                 string strText = (intTop / 4 * i).ToString();  234                 System.Drawing.SizeF _numSize = g.MeasureString(strText, this.Font);  235                 g.DrawString(strText, Font, new SolidBrush(m_gridLineTextColor), m_drawRect.Left - _numSize.Width - 1, m_drawRect.Bottom - 1 - i * intLineSplit - (_numSize.Height / 2));  236             }  237   238             int intEndX = 0;  239             int intEndY = 0;  240             for (int i = 0; i < m_currentSource.Count; i++)  241             {  242                 intEndX = i * m_waveActualWidth + m_drawRect.X;  243                 intEndY = m_drawRect.Bottom - 1 - (int)(m_currentSource[i].Value / intTop * m_drawRect.Height);  244                 lst1.Add(new Point(intEndX, intEndY));  245                 if (!string.IsNullOrEmpty(m_currentSource[i].Key))  246                 {  247                     System.Drawing.SizeF _numSize = g.MeasureString(m_currentSource[i].Key, this.Font);  248                     int txtX = intEndX - (int)(_numSize.Width / 2) + 1;  249                     g.DrawString(m_currentSource[i].Key, Font, new SolidBrush(m_gridLineTextColor), new PointF(txtX, m_drawRect.Bottom + 5));  250                 }  251             }  252   253             int intFirstY = m_drawRect.Bottom - 1 - (int)(m_currentSource[0].Value / intTop * m_drawRect.Height);  254   255   256             GraphicsPath path1 = new GraphicsPath();  257             path1.AddCurve(lst1.ToArray(), m_lineTension);  258             g.DrawPath(new Pen(new SolidBrush(m_lineColor), 1), path1);  259   260         }  261         /// <summary>  262         /// 得到当前需要画图的数据  263         /// </summary>  264         /// <returns></returns>  265         private List<KeyValuePair<string, double>> GetCurrentList()  266         {  267             if (m_dataSource.Count < m_waveCount)  268             {  269                 int intCount = m_waveCount - m_dataSource.Count;  270                 for (int i = 0; i < intCount; i++)  271                 {  272                     m_dataSource.Add(new KeyValuePair<string, double>("", 0));  273                 }  274             }  275   276             var lst = m_dataSource.GetRange(0, m_waveCount);  277             if (lst.Count == 1)  278                 lst.Insert(0, new KeyValuePair<string, double>("", 0));  279             return lst;  280         }  281   282         /// <summary>  283         /// 计算需要显示的个数  284         /// </summary>  285         private void ResetWaveCount()  286         {  287             m_waveCount = m_drawRect.Width / m_waveWidth;  288             m_waveActualWidth = m_waveWidth + (m_drawRect.Width % m_waveWidth) / m_waveCount;  289             m_waveCount++;  290             if (m_dataSource.Count < m_waveCount)  291             {  292                 int intCount = m_waveCount - m_dataSource.Count;  293                 for (int i = 0; i < intCount; i++)  294                 {  295                     m_dataSource.Insert(0, new KeyValuePair<string, double>("", 0));  296                 }  297             }  298         }  299     }  300 }

View Code