前提入行已經7,8年了，一直想做一套漂亮點的自定義控制項，於是就有了本系列文章。開源地址：https://gitee.com/kwwwvagaa/net_winform_custom_control 如果覺得寫的還行，請點個 star 支持一下吧歡迎前來交流探討：企鵝群568015492 目錄 ...

前提

入行已經7,8年了，一直想做一套漂亮點的自定義控制項，於是就有了本系列文章。

開源地址：https://gitee.com/kwwwvagaa/net_winform_custom_control

如果覺得寫的還行，請點個 star 支持一下吧

歡迎前來交流探討：企鵝群568015492

準備工作

我們理一下思路，進度條支持圓環或扇形顯示，支持百分比和數值顯示

開始

添加一個用戶控制項，命名UCProcessEllipse

定義2個枚舉

 1  public enum ValueType
 2     {
 3         /// <summary>
 4         /// 百分比
 5         /// </summary>
 6         Percent,
 7         /// <summary>
 8         /// 數值
 9         /// </summary>
10         Absolute
11     }
12 
13     public enum ShowType
14     {
15         /// <summary>
16         /// 圓環
17         /// </summary>
18         Ring,
19         /// <summary>
20         /// 扇形
21         /// </summary>
22         Sector
23     }

添加屬性

  1  [Description("值改變事件"), Category("自定義")]
  2         public event EventHandler ValueChanged;
  3 
  4         private Color m_backEllipseColor = Color.FromArgb(22, 160, 133);
  5         /// <summary>
  6         /// 圓背景色
  7         /// </summary>
  8         [Description("圓背景色"), Category("自定義")]
  9         public Color BackEllipseColor
 10         {
 11             get { return m_backEllipseColor; }
 12             set
 13             {
 14                 m_backEllipseColor = value;
 15                 Refresh();
 16             }
 17         }
 18 
 19         private Color m_coreEllipseColor = Color.FromArgb(180, 180, 180);
 20         /// <summary>
 21         /// 內圓顏色，ShowType=Ring 有效
 22         /// </summary>
 23         [Description("內圓顏色，ShowType=Ring 有效"), Category("自定義")]
 24         public Color CoreEllipseColor
 25         {
 26             get { return m_coreEllipseColor; }
 27             set
 28             {
 29                 m_coreEllipseColor = value;
 30                 Refresh();
 31             }
 32         }
 33 
 34         private Color m_valueColor = Color.FromArgb(255, 77, 59);
 35 
 36         [Description("值圓顏色"), Category("自定義")]
 37         public Color ValueColor
 38         {
 39             get { return m_valueColor; }
 40             set
 41             {
 42                 m_valueColor = value;
 43                 Refresh();
 44             }
 45         }
 46 
 47         private bool m_isShowCoreEllipseBorder = true;
 48         /// <summary>
 49         /// 內圓是否顯示邊框，ShowType=Ring 有效
 50         /// </summary>
 51         [Description("內圓是否顯示邊框，ShowType=Ring 有效"), Category("自定義")]
 52         public bool IsShowCoreEllipseBorder
 53         {
 54             get { return m_isShowCoreEllipseBorder; }
 55             set
 56             {
 57                 m_isShowCoreEllipseBorder = value;
 58                 Refresh();
 59             }
 60         }
 61 
 62         private ValueType m_valueType = ValueType.Percent;
 63         /// <summary>
 64         /// 值文字類型
 65         /// </summary>
 66         [Description("值文字類型"), Category("自定義")]
 67         public ValueType ValueType
 68         {
 69             get { return m_valueType; }
 70             set
 71             {
 72                 m_valueType = value;
 73                 Refresh();
 74             }
 75         }
 76 
 77         private int m_valueWidth = 30;
 78         /// <summary>
 79         /// 外圓值寬度
 80         /// </summary>
 81         [Description("外圓值寬度，ShowType=Ring 有效"), Category("自定義")]
 82         public int ValueWidth
 83         {
 84             get { return m_valueWidth; }
 85             set
 86             {
 87                 if (value <= 0 || value > Math.Min(this.Width, this.Height))
 88                     return;
 89                 m_valueWidth = value;
 90                 Refresh();
 91             }
 92         }
 93 
 94         private int m_valueMargin = 5;
 95         /// <summary>
 96         /// 外圓值間距
 97         /// </summary>
 98         [Description("外圓值間距"), Category("自定義")]
 99         public int ValueMargin
100         {
101             get { return m_valueMargin; }
102             set
103             {
104                 if (value < 0 || m_valueMargin >= m_valueWidth)
105                     return;
106                 m_valueMargin = value;
107                 Refresh();
108             }
109         }
110 
111         private int m_maxValue = 100;
112         /// <summary>
113         /// 最大值
114         /// </summary>
115         [Description("最大值"), Category("自定義")]
116         public int MaxValue
117         {
118             get { return m_maxValue; }
119             set
120             {
121                 if (value > m_value || value <= 0)
122                     return;
123                 m_maxValue = value;
124                 Refresh();
125             }
126         }
127 
128         private int m_value = 0;
129         /// <summary>
130         /// 當前值
131         /// </summary>
132         [Description("當前值"), Category("自定義")]
133         public int Value
134         {
135             get { return m_value; }
136             set
137             {
138                 if (m_maxValue < value || value <= 0)
139                     return;
140                 m_value = value;
141                 if (ValueChanged != null)
142                 {
143                     ValueChanged(this, null);
144                 }
145                 Refresh();
146             }
147         }
148         private Font m_font = new Font("Arial Unicode MS", 20);
149         [Description("文字字體"), Category("自定義")]
150         public override Font Font
151         {
152             get
153             {
154                 return m_font;
155             }
156             set
157             {
158                 m_font = value;
159                 Refresh();
160             }
161         }
162         Color m_foreColor = Color.White;
163         [Description("文字顏色"), Category("自定義")]
164         public override Color ForeColor
165         {
166             get
167             {
168                 return m_foreColor;
169             }
170             set
171             {
172                 m_foreColor = value;
173                 Refresh();
174             }
175         }
176 
177         private ShowType m_showType = ShowType.Ring;
178 
179         [Description("顯示類型"), Category("自定義")]
180         public ShowType ShowType
181         {
182             get { return m_showType; }
183             set
184             {
185                 m_showType = value;
186                 Refresh();
187             }
188         }

重繪

 1   protected override void OnPaint(PaintEventArgs e)
 2         {
 3             base.OnPaint(e);
 4 
 5             var g = e.Graphics;
 6             g.SmoothingMode = SmoothingMode.AntiAlias;  //使繪圖質量最高，即消除鋸齒
 7             g.InterpolationMode = InterpolationMode.HighQualityBicubic;
 8             g.CompositingQuality = CompositingQuality.HighQuality;
 9 
10             int intWidth = Math.Min(this.Size.Width, this.Size.Height);
11             //底圓
12             g.FillEllipse(new SolidBrush(m_backEllipseColor), new Rectangle(new Point(0, 0), new Size(intWidth, intWidth)));
13             if (m_showType == HZH_Controls.Controls.ShowType.Ring)
14             {
15                 //中心圓
16                 int intCore = intWidth - m_valueWidth * 2;
17                 g.FillEllipse(new SolidBrush(m_coreEllipseColor), new Rectangle(new Point(m_valueWidth, m_valueWidth), new Size(intCore, intCore)));
18                 //中心圓邊框
19                 if (m_isShowCoreEllipseBorder)
20                 {
21                     g.DrawEllipse(new Pen(m_valueColor, 2), new Rectangle(new Point(m_valueWidth + 1, m_valueWidth + 1), new Size(intCore - 1, intCore - 1)));
22                 }
23                 if (m_value > 0 && m_maxValue > 0)
24                 {
25                     float fltPercent = (float)m_value / (float)m_maxValue;
26                     if (fltPercent > 1)
27                     {
28                         fltPercent = 1;
29                     }
30 
31                     g.DrawArc(new Pen(m_valueColor, m_valueWidth - m_valueMargin * 2), new RectangleF(new Point(m_valueWidth / 2 + m_valueMargin / 4, m_valueWidth / 2 + m_valueMargin / 4), new SizeF(intWidth - m_valueWidth - m_valueMargin / 2 + (m_valueMargin == 0 ? 0 : 1), intWidth - m_valueWidth - m_valueMargin / 2 + (m_valueMargin == 0 ? 0 : 1))), -90, fltPercent * 360);
32 
33                     string strValueText = m_valueType == HZH_Controls.Controls.ValueType.Percent ? fltPercent.ToString("0%") : m_value.ToString();
34                     System.Drawing.SizeF _txtSize = g.MeasureString(strValueText, this.Font);
35                     g.DrawString(strValueText, this.Font, new SolidBrush(this.ForeColor), new PointF((intWidth - _txtSize.Width) / 2 + 1, (intWidth - _txtSize.Height) / 2 + 1));
36                 }
37             }
38             else
39             {
40                 if (m_value > 0 && m_maxValue > 0)
41                 {
42                     float fltPercent = (float)m_value / (float)m_maxValue;
43                     if (fltPercent > 1)
44                     {
45                         fltPercent = 1;
46                     }
47 
48                     g.FillPie(new SolidBrush(m_valueColor), new Rectangle(m_valueMargin, m_valueMargin, intWidth - m_valueMargin * 2, intWidth - m_valueMargin * 2), -90, fltPercent * 360);
49 
50                     string strValueText = m_valueType == HZH_Controls.Controls.ValueType.Percent ? fltPercent.ToString("0%") : m_value.ToString();
51                     System.Drawing.SizeF _txtSize = g.MeasureString(strValueText, this.Font);
52                     g.DrawString(strValueText, this.Font, new SolidBrush(this.ForeColor), new PointF((intWidth - _txtSize.Width) / 2 + 1, (intWidth - _txtSize.Height) / 2 + 1));
53                 }
54             }
55 
56         }

完整代碼如下

  1 using System;
  2 using System.Collections.Generic;
  3 using System.ComponentModel;
  4 using System.Drawing;
  5 using System.Data;
  6 using System.Linq;
  7 using System.Text;
  8 using System.Windows.Forms;
  9 using System.Drawing.Drawing2D;
 10 
 11 namespace HZH_Controls.Controls
 12 {
 13     public partial class UCProcessEllipse : UserControl
 14     {
 15         [Description("值改變事件"), Category("自定義")]
 16         public event EventHandler ValueChanged;
 17 
 18         private Color m_backEllipseColor = Color.FromArgb(22, 160, 133);
 19         /// <summary>
 20         /// 圓背景色
 21         /// </summary>
 22         [Description("圓背景色"), Category("自定義")]
 23         public Color BackEllipseColor
 24         {
 25             get { return m_backEllipseColor; }
 26             set
 27             {
 28                 m_backEllipseColor = value;
 29                 Refresh();
 30             }
 31         }
 32 
 33         private Color m_coreEllipseColor = Color.FromArgb(180, 180, 180);
 34         /// <summary>
 35         /// 內圓顏色，ShowType=Ring 有效
 36         /// </summary>
 37         [Description("內圓顏色，ShowType=Ring 有效"), Category("自定義")]
 38         public Color CoreEllipseColor
 39         {
 40             get { return m_coreEllipseColor; }
 41             set
 42             {
 43                 m_coreEllipseColor = value;
 44                 Refresh();
 45             }
 46         }
 47 
 48         private Color m_valueColor = Color.FromArgb(255, 77, 59);
 49 
 50         [Description("值圓顏色"), Category("自定義")]
 51         public Color ValueColor
 52         {
 53             get { return m_valueColor; }
 54             set
 55             {
 56                 m_valueColor = value;
 57                 Refresh();
 58             }
 59         }
 60 
 61         private bool m_isShowCoreEllipseBorder = true;
 62         /// <summary>
 63         /// 內圓是否顯示邊框，ShowType=Ring 有效
 64         /// </summary>
 65         [Description("內圓是否顯示邊框，ShowType=Ring 有效"), Category("自定義")]
 66         public bool IsShowCoreEllipseBorder
 67         {
 68             get { return m_isShowCoreEllipseBorder; }
 69             set
 70             {
 71                 m_isShowCoreEllipseBorder = value;
 72                 Refresh();
 73             }
 74         }
 75 
 76         private ValueType m_valueType = ValueType.Percent;
 77         /// <summary>
 78         /// 值文字類型
 79         /// </summary>
 80         [Description("值文字類型"), Category("自定義")]
 81         public ValueType ValueType
 82         {
 83             get { return m_valueType; }
 84             set
 85             {
 86                 m_valueType = value;
 87                 Refresh();
 88             }
 89         }
 90 
 91         private int m_valueWidth = 30;
 92         /// <summary>
 93         /// 外圓值寬度
 94         /// </summary>
 95         [Description("外圓值寬度，ShowType=Ring 有效"), Category("自定義")]
 96         public int ValueWidth
 97         {
 98             get { return m_valueWidth; }
 99             set
100             {
101                 if (value <= 0 || value > Math.Min(this.Width, this.Height))
102                     return;
103                 m_valueWidth = value;
104                 Refresh();
105             }
106         }
107 
108         private int m_valueMargin = 5;
109         /// <summary>
110         /// 外圓值間距
111         /// </summary>
112         [Description("外圓值間距"), Category("自定義")]
113         public int ValueMargin
114         {
115             get { return m_valueMargin; }
116             set
117             {
118                 if (value < 0 || m_valueMargin >= m_valueWidth)
119                     return;
120                 m_valueMargin = value;
121                 Refresh();
122             }
123         }
124 
125         private int m_maxValue = 100;
126         /// <summary>
127         /// 最大值
128         /// </summary>
129         [Description("最大值"), Category("自定義")]
130         public int MaxValue
131         {
132             get { return m_maxValue; }
133             set
134             {
135                 if (value > m_value || value <= 0)
136                     return;
137                 m_maxValue = value;
138                 Refresh();
139             }
140         }
141 
142         private int m_value = 0;
143         /// <summary>
144         /// 當前值
145         /// </summary>
146         [Description("當前值"), Category("自定義")]
147         public int Value
148         {
149             get { return m_value; }
150             set
151             {
152                 if (m_maxValue < value || value <= 0)
153                     return;
154                 m_value = value;
155

（三十八）c#Winform自定義控制項-圓形進度條

前提

目錄

準備工作

開始