（四十四）c#Winform自定义控件-水波

前提

入行已经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 }

 

最后的话

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