前提

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

github：https://github.com/kwwwvagaa/netwinformcontrol

码云：

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

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

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

nuget

install-package hzh_controls

目录

用处及效果

准备工作

依然是gdi+画的，不了解自行百度学习下

开始

添加一个类uctrackbar，继承control

添加属性

 1  [description("值改变事件"), category("自定义")]
 2         public event eventhandler valuechanged;
 3 
 4         private int dcimaldigits = 0;
 5 
 6         [description("值小数精确位数"), category("自定义")]
 7         public int dcimaldigits
 8         {
 9             get { return dcimaldigits; }
10             set { dcimaldigits = value; }
11         }
12 
13         private float linewidth = 10;
14 
15         [description("线宽度"), category("自定义")]
16         public float linewidth
17         {
18             get { return linewidth; }
19             set { linewidth = value; }
20         }
21 
22         private float minvalue = 0;
23 
24         [description("最小值"), category("自定义")]
25         public float minvalue
26         {
27             get { return minvalue; }
28             set
29             {
30                 if (minvalue > m_value)
31                     return;
32                 minvalue = value;
33                 this.refresh();
34             }
35         }
36 
37         private float maxvalue = 100;
38 
39         [description("最大值"), category("自定义")]
40         public float maxvalue
41         {
42             get { return maxvalue; }
43             set
44             {
45                 if (value < m_value)
46                     return;
47                 maxvalue = value;
48                 this.refresh();
49             }
50         }
51 
52         private float m_value = 0;
53 
54         [description("值"), category("自定义")]
55         public float value
56         {
57             get { return this.m_value; }
58             set
59             {
60                 if (value > maxvalue || value < minvalue)
61                     return;
62                 var v = (float)math.round((double)value, dcimaldigits);
63                 if (value == v)
64                     return;
65                 this.m_value = v;
66                 this.refresh();
67                 if (valuechanged != null)
68                 {
69                     valuechanged(this, null);
70                 }
71             }
72         }
73 
74         private color m_linecolor = color.fromargb(255, 77, 59);
75 
76         [description("线颜色"), category("自定义")]
77         public color linecolor
78         {
79             get { return m_linecolor; }
80             set
81             {
82                 m_linecolor = value;
83                 this.refresh();
84             }
85         }
86         rectanglef m_linerectangle;
87         rectanglef m_trackrectangle;

重绘

 1  protected override void onpaint(painteventargs e)
 2         {
 3             base.onpaint(e);
 4             graphics g = e.graphics;
 5             g.setgdihigh();
 6             m_linerectangle = new rectanglef(linewidth, (this.size.height - linewidth) / 2, this.size.width - linewidth * 2, linewidth);
 7             graphicspath pathline = controlhelper.createroundedrectanglepath(m_linerectangle, 5);
 8             g.fillpath(new solidbrush(m_linecolor), pathline);
 9             m_trackrectangle = new rectanglef(m_linerectangle.left - linewidth + (((float)m_value / (float)(maxvalue - minvalue)) * (this.size.width - linewidth * 2)), (this.size.height - linewidth * 2) / 2, linewidth * 2, linewidth * 2);
10             g.fillellipse(new solidbrush(m_linecolor), m_trackrectangle);
11             g.fillellipse(brushes.white, new rectanglef(m_trackrectangle.x + m_trackrectangle.width / 4, m_trackrectangle.y + m_trackrectangle.height / 4, m_trackrectangle.width / 2, m_trackrectangle.height / 2));
12         }

处理拖动

 1  public uctrackbar()
 2         {
 3             this.size = new size(250, 30);
 4             this.setstyle(controlstyles.allpaintinginwmpaint, true);
 5             this.setstyle(controlstyles.doublebuffer, true);
 6             this.setstyle(controlstyles.resizeredraw, true);
 7             this.setstyle(controlstyles.selectable, true);
 8             this.setstyle(controlstyles.supportstransparentbackcolor, true);
 9             this.setstyle(controlstyles.userpaint, true);
10             this.mousedown += uctrackbar_mousedown;
11             this.mousemove += uctrackbar_mousemove;
12             this.mouseup += uctrackbar_mouseup;
13         }
14 
15         bool blndown = false;
16         void uctrackbar_mousedown(object sender, mouseeventargs e)
17         {
18             if (m_linerectangle.contains(e.location) || m_trackrectangle.contains(e.location))
19             {
20                 blndown = true;
21                 value = ((float)e.location.x / (float)this.width) * (maxvalue - minvalue);
22             }
23         }
24         void uctrackbar_mousemove(object sender, mouseeventargs e)
25         {
26             if (blndown)
27             {
28                 value = ((float)e.location.x / (float)this.width) * (maxvalue - minvalue);
29             }
30         }
31         void uctrackbar_mouseup(object sender, mouseeventargs e)
32         {
33             blndown = false;
34         }

完整代码

  1 using system;
  2 using system.collections.generic;
  3 using system.linq;
  4 using system.text;
  5 using system.windows.forms;
  6 using system.drawing;
  7 using system.drawing.drawing2d;
  8 using system.componentmodel;
  9 
 10 namespace hzh_controls.controls
 11 {
 12     public class uctrackbar : control
 13     {
 14         [description("值改变事件"), category("自定义")]
 15         public event eventhandler valuechanged;
 16 
 17         private int dcimaldigits = 0;
 18 
 19         [description("值小数精确位数"), category("自定义")]
 20         public int dcimaldigits
 21         {
 22             get { return dcimaldigits; }
 23             set { dcimaldigits = value; }
 24         }
 25 
 26         private float linewidth = 10;
 27 
 28         [description("线宽度"), category("自定义")]
 29         public float linewidth
 30         {
 31             get { return linewidth; }
 32             set { linewidth = value; }
 33         }
 34 
 35         private float minvalue = 0;
 36 
 37         [description("最小值"), category("自定义")]
 38         public float minvalue
 39         {
 40             get { return minvalue; }
 41             set
 42             {
 43                 if (minvalue > m_value)
 44                     return;
 45                 minvalue = value;
 46                 this.refresh();
 47             }
 48         }
 49 
 50         private float maxvalue = 100;
 51 
 52         [description("最大值"), category("自定义")]
 53         public float maxvalue
 54         {
 55             get { return maxvalue; }
 56             set
 57             {
 58                 if (value < m_value)
 59                     return;
 60                 maxvalue = value;
 61                 this.refresh();
 62             }
 63         }
 64 
 65         private float m_value = 0;
 66 
 67         [description("值"), category("自定义")]
 68         public float value
 69         {
 70             get { return this.m_value; }
 71             set
 72             {
 73                 if (value > maxvalue || value < minvalue)
 74                     return;
 75                 var v = (float)math.round((double)value, dcimaldigits);
 76                 if (value == v)
 77                     return;
 78                 this.m_value = v;
 79                 this.refresh();
 80                 if (valuechanged != null)
 81                 {
 82                     valuechanged(this, null);
 83                 }
 84             }
 85         }
 86 
 87         private color m_linecolor = color.fromargb(255, 77, 59);
 88 
 89         [description("线颜色"), category("自定义")]
 90         public color linecolor
 91         {
 92             get { return m_linecolor; }
 93             set
 94             {
 95                 m_linecolor = value;
 96                 this.refresh();
 97             }
 98         }
 99         rectanglef m_linerectangle;
100         rectanglef m_trackrectangle;
101 
102         public uctrackbar()
103         {
104             this.size = new size(250, 30);
105             this.setstyle(controlstyles.allpaintinginwmpaint, true);
106             this.setstyle(controlstyles.doublebuffer, true);
107             this.setstyle(controlstyles.resizeredraw, true);
108             this.setstyle(controlstyles.selectable, true);
109             this.setstyle(controlstyles.supportstransparentbackcolor, true);
110             this.setstyle(controlstyles.userpaint, true);
111             this.mousedown += uctrackbar_mousedown;
112             this.mousemove += uctrackbar_mousemove;
113             this.mouseup += uctrackbar_mouseup;
114         }
115 
116         bool blndown = false;
117         void uctrackbar_mousedown(object sender, mouseeventargs e)
118         {
119             if (m_linerectangle.contains(e.location) || m_trackrectangle.contains(e.location))
120             {
121                 blndown = true;
122                 value = ((float)e.location.x / (float)this.width) * (maxvalue - minvalue);
123             }
124         }
125         void uctrackbar_mousemove(object sender, mouseeventargs e)
126         {
127             if (blndown)
128             {
129                 value = ((float)e.location.x / (float)this.width) * (maxvalue - minvalue);
130             }
131         }
132         void uctrackbar_mouseup(object sender, mouseeventargs e)
133         {
134             blndown = false;
135         }
136 
137 
138         protected override void onpaint(painteventargs e)
139         {
140             base.onpaint(e);
141             graphics g = e.graphics;
142             g.setgdihigh();
143             m_linerectangle = new rectanglef(linewidth, (this.size.height - linewidth) / 2, this.size.width - linewidth * 2, linewidth);
144             graphicspath pathline = controlhelper.createroundedrectanglepath(m_linerectangle, 5);
145             g.fillpath(new solidbrush(m_linecolor), pathline);
146             m_trackrectangle = new rectanglef(m_linerectangle.left - linewidth + (((float)m_value / (float)(maxvalue - minvalue)) * (this.size.width - linewidth * 2)), (this.size.height - linewidth * 2) / 2, linewidth * 2, linewidth * 2);
147             g.fillellipse(new solidbrush(m_linecolor), m_trackrectangle);
148             g.fillellipse(brushes.white, new rectanglef(m_trackrectangle.x + m_trackrectangle.width / 4, m_trackrectangle.y + m_trackrectangle.height / 4, m_trackrectangle.width / 2, m_trackrectangle.height / 2));
149         }
150     }
151 }

 

最后的话

如果你喜欢的话，请到  点个星星吧