（五十）c#Winform自定义控件-滑块
程序员文章站
2022-07-02 13:14:07
前提 入行已经7,8年了，一直想做一套漂亮点的自定义控件，于是就有了本系列文章。 GitHub：https://github.com/kwwwvagaa/NetWinformControl 码云：https://gitee.com/kwwwvagaa/net_winform_custom_contr ......
前提
入行已经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 }
最后的话
如果你喜欢的话，请到 点个星星吧