前提
入行已经7,8年了，一直想做一套漂亮点的自定义控件，于是就有了本系列文章。
github：https://github.com/kwwwvagaa/netwinformcontrol
码云：
如果觉得写的还行，请点个 star 支持一下吧
欢迎前来交流探讨： 企鹅群568015492
麻烦博客下方点个【推荐】，谢谢
nuget
install-package hzh_controls
目录
用处及效果
准备工作
这个用的gdi+画的，如果不了解，可以百度一下。
开始
添加一个类 ucwave ，继承control
定义属性
1 private color m_wavecolor = color.fromargb(73, 119, 232);
2
3 [description("波纹颜色"), category("自定义")]
4 public color wavecolor
5 {
6 get { return m_wavecolor; }
7 set { m_wavecolor = value; }
8 }
9
10 private int m_wavewidth = 200;
11 /// <summary>
12 /// 为方便计算，强制使用10的倍数
13 /// </summary>
14 [description("波纹宽度（为方便计算，强制使用10的倍数）"), category("自定义")]
15 public int wavewidth
16 {
17 get { return m_wavewidth; }
18 set
19 {
20 m_wavewidth = value;
21 m_wavewidth = m_wavewidth / 10 * 10;
22 intleftx = value * -1;
23 }
24 }
25
26 private int m_waveheight = 30;
27 /// <summary>
28 /// 波高
29 /// </summary>
30 [description("波高"), category("自定义")]
31 public int waveheight
32 {
33 get { return m_waveheight; }
34 set { m_waveheight = value; }
35 }
36
37 private int m_wavesleep = 50;
38 /// <summary>
39 /// 波运行速度（运行时间间隔，毫秒）
40 /// </summary>
41 [description("波运行速度（运行时间间隔，毫秒）"), category("自定义")]
42 public int wavesleep
43 {
44 get { return m_wavesleep; }
45 set
46 {
47 if (value <= 0)
48 return;
49 m_wavesleep = value;
50 if (timer != null)
51 {
52 timer.enabled = false;
53 timer.interval = value;
54 timer.enabled = true;
55 }
56 }
57 }
58
59 timer timer = new timer();
60 int intleftx = -200;
重绘
1 protected override void onpaint(painteventargs e)
2 {
3 base.onpaint(e);
4 var g = e.graphics;
5 g.setgdihigh();
6 list<point> lst1 = new list<point>();
7 list<point> lst2 = new list<point>();
8 int m_intx = intleftx;
9 while (true)
10 {
11 lst1.add(new point(m_intx, 1));
12 lst1.add(new point(m_intx + m_wavewidth / 2, m_waveheight));
13
14 lst2.add(new point(m_intx + m_wavewidth / 4, 1));
15 lst2.add(new point(m_intx + m_wavewidth / 4 + m_wavewidth / 2, m_waveheight));
16 m_intx += m_wavewidth;
17 if (m_intx > this.width + m_wavewidth)
18 break;
19 }
20
21 graphicspath path1 = new graphicspath();
22 path1.addcurve(lst1.toarray(), 0.5f);
23 path1.addline(this.width + 1, -1, this.width + 1, this.height);
24 path1.addline(this.width + 1, this.height, -1, this.height);
25 path1.addline(-1, this.height, -1, -1);
26
27 graphicspath path2 = new graphicspath();
28 path2.addcurve(lst2.toarray(), 0.5f);
29 path2.addline(this.width + 1, -1, this.width + 1, this.height);
30 path2.addline(this.width + 1, this.height, -1, this.height);
31 path2.addline(-1, this.height, -1, -1);
32
33 g.fillpath(new solidbrush(color.fromargb(220, m_wavecolor.r, m_wavecolor.g, m_wavecolor.b)), path1);
34 g.fillpath(new solidbrush(color.fromargb(220, m_wavecolor.r, m_wavecolor.g, m_wavecolor.b)), path2);
35 }
为了“波动”，添加定时器，定时器事件如下
1 void timer_tick(object sender, eventargs e)
2 {
3 intleftx -= 10;
4 if (intleftx == m_wavewidth * -2)
5 intleftx = m_wavewidth * -1;
6 this.refresh();
7 }
完整代码
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 ucwave : control
13 {
14 private color m_wavecolor = color.fromargb(73, 119, 232);
15
16 [description("波纹颜色"), category("自定义")]
17 public color wavecolor
18 {
19 get { return m_wavecolor; }
20 set { m_wavecolor = value; }
21 }
22
23 private int m_wavewidth = 200;
24 /// <summary>
25 /// 为方便计算，强制使用10的倍数
26 /// </summary>
27 [description("波纹宽度（为方便计算，强制使用10的倍数）"), category("自定义")]
28 public int wavewidth
29 {
30 get { return m_wavewidth; }
31 set
32 {
33 m_wavewidth = value;
34 m_wavewidth = m_wavewidth / 10 * 10;
35 intleftx = value * -1;
36 }
37 }
38
39 private int m_waveheight = 30;
40 /// <summary>
41 /// 波高
42 /// </summary>
43 [description("波高"), category("自定义")]
44 public int waveheight
45 {
46 get { return m_waveheight; }
47 set { m_waveheight = value; }
48 }
49
50 private int m_wavesleep = 50;
51 /// <summary>
52 /// 波运行速度（运行时间间隔，毫秒）
53 /// </summary>
54 [description("波运行速度（运行时间间隔，毫秒）"), category("自定义")]
55 public int wavesleep
56 {
57 get { return m_wavesleep; }
58 set
59 {
60 if (value <= 0)
61 return;
62 m_wavesleep = value;
63 if (timer != null)
64 {
65 timer.enabled = false;
66 timer.interval = value;
67 timer.enabled = true;
68 }
69 }
70 }
71
72 timer timer = new timer();
73 int intleftx = -200;
74 public ucwave()
75 {
76 this.size = new size(600, 100);
77 this.setstyle(controlstyles.allpaintinginwmpaint, true);
78 this.setstyle(controlstyles.doublebuffer, true);
79 this.setstyle(controlstyles.resizeredraw, true);
80 this.setstyle(controlstyles.selectable, true);
81 this.setstyle(controlstyles.supportstransparentbackcolor, true);
82 this.setstyle(controlstyles.userpaint, true);
83 timer.interval = m_wavesleep;
84 timer.tick += timer_tick;
85 this.visiblechanged += ucwave_visiblechanged;
86 }
87
88 void ucwave_visiblechanged(object sender, eventargs e)
89 {
90 timer.enabled = this.visible;
91 }
92
93 void timer_tick(object sender, eventargs e)
94 {
95 intleftx -= 10;
96 if (intleftx == m_wavewidth * -2)
97 intleftx = m_wavewidth * -1;
98 this.refresh();
99 }
100 protected override void onpaint(painteventargs e)
101 {
102 base.onpaint(e);
103 var g = e.graphics;
104 g.setgdihigh();
105 list<point> lst1 = new list<point>();
106 list<point> lst2 = new list<point>();
107 int m_intx = intleftx;
108 while (true)
109 {
110 lst1.add(new point(m_intx, 1));
111 lst1.add(new point(m_intx + m_wavewidth / 2, m_waveheight));
112
113 lst2.add(new point(m_intx + m_wavewidth / 4, 1));
114 lst2.add(new point(m_intx + m_wavewidth / 4 + m_wavewidth / 2, m_waveheight));
115 m_intx += m_wavewidth;
116 if (m_intx > this.width + m_wavewidth)
117 break;
118 }
119
120 graphicspath path1 = new graphicspath();
121 path1.addcurve(lst1.toarray(), 0.5f);
122 path1.addline(this.width + 1, -1, this.width + 1, this.height);
123 path1.addline(this.width + 1, this.height, -1, this.height);
124 path1.addline(-1, this.height, -1, -1);
125
126 graphicspath path2 = new graphicspath();
127 path2.addcurve(lst2.toarray(), 0.5f);
128 path2.addline(this.width + 1, -1, this.width + 1, this.height);
129 path2.addline(this.width + 1, this.height, -1, this.height);
130 path2.addline(-1, this.height, -1, -1);
131
132 g.fillpath(new solidbrush(color.fromargb(220, m_wavecolor.r, m_wavecolor.g, m_wavecolor.b)), path1);
133 g.fillpath(new solidbrush(color.fromargb(220, m_wavecolor.r, m_wavecolor.g, m_wavecolor.b)), path2);
134 }
135 }
136 }
最后的话
如果你喜欢的话，请到 点个星星吧
黄山市民网：https://www.huangshanshimin.com/
