前提
入行已经7,8年了，一直想做一套漂亮点的自定义控件，于是就有了本系列文章。
github：https://github.com/kwwwvagaa/netwinformcontrol
码云：
如果觉得写的还行，请点个 star 支持一下吧
欢迎前来交流探讨： 企鹅群568015492
nuget
install-package hzh_controls
目录
用处及效果
准备工作
这个是基于（四十一）c#winform自定义控件-进度条 扩展的，如果你还没有了解，请先移步了解一下
开始
添加一个用户控件，命名ucprocesslineext
属性
1 [description("值变更事件"), category("自定义")]
2 public event eventhandler valuechanged;
3
4 [description("当前属性"), category("自定义")]
5 public int value
6 {
7 set
8 {
9 ucprocessline1.value = value;
10 refresh();
11 }
12 get
13 {
14 return ucprocessline1.value;
15 }
16 }
17
18
19
20 [description("最大值"), category("自定义")]
21 public int maxvalue
22 {
23 get { return ucprocessline1.maxvalue; }
24 set
25 {
26 ucprocessline1.maxvalue = value;
27 refresh();
28 }
29 }
30
31
32 [description("值进度条颜色"), category("自定义")]
33 public color valuecolor
34 {
35 get { return ucprocessline1.valuecolor; }
36 set
37 {
38 ucprocessline1.valuecolor = value;
39 refresh();
40 }
41 }
42
43
44 [description("值背景色"), category("自定义")]
45 public color valuebgcolor
46 {
47 get { return ucprocessline1.valuebgcolor; }
48 set
49 {
50 ucprocessline1.valuebgcolor = value;
51 refresh();
52 }
53 }
54
55
56 [description("边框颜色"), category("自定义")]
57 public color bordercolor
58 {
59 get { return ucprocessline1.bordercolor; }
60 set
61 {
62 ucprocessline1.bordercolor = value;
63 refresh();
64 }
65 }
66
67 [description("值字体"), category("自定义")]
68 public override font font
69 {
70 get
71 {
72 return ucprocessline1.font;
73 }
74 set
75 {
76 ucprocessline1.font = value;
77 refresh();
78 }
79 }
80
81 [description("值块颜色"), category("自定义")]
82 public override system.drawing.color forecolor
83 {
84 get
85 {
86 return base.forecolor;
87 }
88 set
89 {
90 base.forecolor = value;
91 refresh();
92 }
93 }
重绘
1 protected override void onpaint(painteventargs e)
2 {
3 base.onpaint(e);
4 e.graphics.setgdihigh();
5 float fltindex = (float)this.ucprocessline1.value / (float)this.ucprocessline1.maxvalue;
6
7 int x = (int)(fltindex * this.ucprocessline1.width + this.ucprocessline1.location.x - 15) - 2;
8 graphicspath path = new graphicspath();
9 rectangle rect = new rectangle(x, 1, 30, 20);
10 int cornerradius = 2;
11 path.addarc(rect.x, rect.y, cornerradius * 2, cornerradius * 2, 180, 90);
12 path.addline(rect.x + cornerradius, rect.y, rect.right - cornerradius * 2, rect.y);
13 path.addarc(rect.x + rect.width - cornerradius * 2, rect.y, cornerradius * 2, cornerradius * 2, 270, 90);
14 path.addline(rect.right, rect.y + cornerradius * 2, rect.right, rect.y + rect.height - cornerradius * 2);
15 path.addarc(rect.x + rect.width - cornerradius * 2, rect.y + rect.height - cornerradius * 2, cornerradius * 2, cornerradius * 2, 0, 90);
16 path.addline(rect.right - cornerradius * 2, rect.bottom, rect.right - cornerradius * 2 - 5, rect.bottom);//下
17 path.addline(rect.right - cornerradius * 2 - 5, 21, x + 15, ucprocessline1.location.y);
18 path.addline(x + 15, ucprocessline1.location.y, rect.x + cornerradius * 2 + 5, 21);
19 path.addline(rect.x + cornerradius * 2 + 5, 20, rect.x + cornerradius * 2, rect.bottom);//下
20 path.addarc(rect.x, rect.bottom - cornerradius * 2, cornerradius * 2, cornerradius * 2, 90, 90);
21 path.addline(rect.x, rect.bottom - cornerradius * 2, rect.x, rect.y + cornerradius * 2);//上
22 path.closefigure();
23
24 e.graphics.fillpath(new solidbrush(forecolor), path);
25
26 string strvalue = ((float)value / (float)maxvalue).tostring("0%");
27 system.drawing.sizef sizef = e.graphics.measurestring(strvalue, font);
28 e.graphics.drawstring(strvalue, font, new solidbrush(color.white), new pointf(x + (30 - sizef.width) / 2+1, (20 - sizef.height) / 2 + 1));
29 }
全部代码
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 ucprocesslineext : usercontrol
14 {
15 [description("值变更事件"), category("自定义")]
16 public event eventhandler valuechanged;
17
18 [description("当前属性"), category("自定义")]
19 public int value
20 {
21 set
22 {
23 ucprocessline1.value = value;
24 refresh();
25 }
26 get
27 {
28 return ucprocessline1.value;
29 }
30 }
31
32
33
34 [description("最大值"), category("自定义")]
35 public int maxvalue
36 {
37 get { return ucprocessline1.maxvalue; }
38 set
39 {
40 ucprocessline1.maxvalue = value;
41 refresh();
42 }
43 }
44
45
46 [description("值进度条颜色"), category("自定义")]
47 public color valuecolor
48 {
49 get { return ucprocessline1.valuecolor; }
50 set
51 {
52 ucprocessline1.valuecolor = value;
53 refresh();
54 }
55 }
56
57
58 [description("值背景色"), category("自定义")]
59 public color valuebgcolor
60 {
61 get { return ucprocessline1.valuebgcolor; }
62 set
63 {
64 ucprocessline1.valuebgcolor = value;
65 refresh();
66 }
67 }
68
69
70 [description("边框颜色"), category("自定义")]
71 public color bordercolor
72 {
73 get { return ucprocessline1.bordercolor; }
74 set
75 {
76 ucprocessline1.bordercolor = value;
77 refresh();
78 }
79 }
80
81 [description("值字体"), category("自定义")]
82 public override font font
83 {
84 get
85 {
86 return ucprocessline1.font;
87 }
88 set
89 {
90 ucprocessline1.font = value;
91 refresh();
92 }
93 }
94
95 [description("值块颜色"), category("自定义")]
96 public override system.drawing.color forecolor
97 {
98 get
99 {
100 return base.forecolor;
101 }
102 set
103 {
104 base.forecolor = value;
105 refresh();
106 }
107 }
108
109 public ucprocesslineext()
110 {
111 initializecomponent();
112 this.setstyle(controlstyles.allpaintinginwmpaint, true);
113 this.setstyle(controlstyles.doublebuffer, true);
114 this.setstyle(controlstyles.resizeredraw, true);
115 this.setstyle(controlstyles.selectable, true);
116 this.setstyle(controlstyles.supportstransparentbackcolor, true);
117 this.setstyle(controlstyles.userpaint, true);
118 ucprocessline1.valuechanged += ucprocessline1_valuechanged;
119 }
120
121 void ucprocessline1_valuechanged(object sender, eventargs e)
122 {
123 if (valuechanged != null)
124 {
125 valuechanged(this, e);
126 }
127 }
128
129 protected override void onpaint(painteventargs e)
130 {
131 base.onpaint(e);
132 e.graphics.setgdihigh();
133 float fltindex = (float)this.ucprocessline1.value / (float)this.ucprocessline1.maxvalue;
134
135 int x = (int)(fltindex * this.ucprocessline1.width + this.ucprocessline1.location.x - 15) - 2;
136 graphicspath path = new graphicspath();
137 rectangle rect = new rectangle(x, 1, 30, 20);
138 int cornerradius = 2;
139 path.addarc(rect.x, rect.y, cornerradius * 2, cornerradius * 2, 180, 90);
140 path.addline(rect.x + cornerradius, rect.y, rect.right - cornerradius * 2, rect.y);
141 path.addarc(rect.x + rect.width - cornerradius * 2, rect.y, cornerradius * 2, cornerradius * 2, 270, 90);
142 path.addline(rect.right, rect.y + cornerradius * 2, rect.right, rect.y + rect.height - cornerradius * 2);
143 path.addarc(rect.x + rect.width - cornerradius * 2, rect.y + rect.height - cornerradius * 2, cornerradius * 2, cornerradius * 2, 0, 90);
144 path.addline(rect.right - cornerradius * 2, rect.bottom, rect.right - cornerradius * 2 - 5, rect.bottom);//下
145 path.addline(rect.right - cornerradius * 2 - 5, 21, x + 15, ucprocessline1.location.y);
146 path.addline(x + 15, ucprocessline1.location.y, rect.x + cornerradius * 2 + 5, 21);
147 path.addline(rect.x + cornerradius * 2 + 5, 20, rect.x + cornerradius * 2, rect.bottom);//下
148 path.addarc(rect.x, rect.bottom - cornerradius * 2, cornerradius * 2, cornerradius * 2, 90, 90);
149 path.addline(rect.x, rect.bottom - cornerradius * 2, rect.x, rect.y + cornerradius * 2);//上
150 path.closefigure();
151
152 e.graphics.fillpath(new solidbrush(forecolor), path);
153
154 string strvalue = ((float)value / (float)maxvalue).tostring("0%");
155 system.drawing.sizef sizef = e.graphics.measurestring(strvalue, font);
156 e.graphics.drawstring(strvalue, font, new solidbrush(color.white), new pointf(x + (30 - sizef.width) / 2+1, (20 - sizef.height) / 2 + 1));
157 }
158 }
159 }
1 namespace hzh_controls.controls
2 {
3 partial class ucprocesslineext
4 {
5 /// <summary>
6 /// 必需的设计器变量。
7 /// </summary>
8 private system.componentmodel.icontainer components = null;
9
10 /// <summary>
11 /// 清理所有正在使用的资源。
12 /// </summary>
13 /// <param name="disposing">如果应释放托管资源，为 true；否则为 false。</param>
14 protected override void dispose(bool disposing)
15 {
16 if (disposing && (components != null))
17 {
18 components.dispose();
19 }
20 base.dispose(disposing);
21 }
22
23 #region 组件设计器生成的代码
24
25 /// <summary>
26 /// 设计器支持所需的方法 - 不要
27 /// 使用代码编辑器修改此方法的内容。
28 /// </summary>
29 private void initializecomponent()
30 {
31 this.ucprocessline1 = new hzh_controls.controls.ucprocessline();
32 this.suspendlayout();
33 //
34 // ucprocessline1
35 //
36 this.ucprocessline1.anchor = ((system.windows.forms.anchorstyles)((((system.windows.forms.anchorstyles.top | system.windows.forms.anchorstyles.bottom)
37 | system.windows.forms.anchorstyles.left)
38 | system.windows.forms.anchorstyles.right)));
39 this.ucprocessline1.bordercolor = system.drawing.color.fromargb(((int)(((byte)(192)))), ((int)(((byte)(192)))), ((int)(((byte)(192)))));
40 this.ucprocessline1.font = new system.drawing.font("arial unicode ms", 10f);
41 this.ucprocessline1.forecolor = system.drawing.color.fromargb(((int)(((byte)(255)))), ((int)(((byte)(77)))), ((int)(((byte)(59)))));
42 this.ucprocessline1.location = new system.drawing.point(18, 33);
43 this.ucprocessline1.maxvalue = 100;
44 this.ucprocessline1.name = "ucprocessline1";
45 this.ucprocessline1.size = new system.drawing.size(399, 16);
46 this.ucprocessline1.tabindex = 0;
47 this.ucprocessline1.text = "ucprocessline1";
48 this.ucprocessline1.value = 0;
49 this.ucprocessline1.valuebgcolor = system.drawing.color.white;
50 this.ucprocessline1.valuecolor = system.drawing.color.fromargb(((int)(((byte)(73)))), ((int)(((byte)(119)))), ((int)(((byte)(232)))));
51 this.ucprocessline1.valuetexttype = hzh_controls.controls.valuetexttype.none;
52 //
53 // ucprocesslineext
54 //
55 this.autoscalemode = system.windows.forms.autoscalemode.none;
56 this.backcolor = system.drawing.color.transparent;
57 this.controls.add(this.ucprocessline1);
58 this.name = "ucprocesslineext";
59 this.size = new system.drawing.size(434, 50);
60 this.resumelayout(false);
61
62 }
63
64 #endregion
65
66 private ucprocessline ucprocessline1;
67 }
68 }
最后的话
如果你喜欢的话，请到 点个星星吧
黄山市民网：https://www.huangshanshimin.com/
