ndf,象洞白水寨,张清华
入行已经7,8年了，一直想做一套漂亮点的自定义控件，于是就有了本系列文章。
github：https://github.com/kwwwvagaa/netwinformcontrol
码云：
如果觉得写的还行，请点个 star 支持一下吧
欢迎前来交流探讨： 企鹅群568015492
麻烦博客下方点个【推荐】，谢谢
install-package hzh_controls
依然是gdi+ 不了解请先百度一下
添加一个类ucbottle，继承usercontrol
添加几个控制属性
我要评论 1 //瓶身区域
2 /// <summary>
3 /// the m working rect
4 /// </summary>
5 rectangle m_workingrect;
6
7 /// <summary>
8 /// the title
9 /// </summary>
10 string title = "瓶子1";
11
12 /// <summary>
13 /// gets or sets the title.
14 /// </summary>
15 /// <value>the title.</value>
16 [description("标题"), category("自定义")]
17 public string title
18 {
19 get { return title; }
20 set
21 {
22 title = value;
23 resetworkingrect();
24 refresh();
25 }
26 }
27
28 /// <summary>
29 /// the bottle color
30 /// </summary>
31 private color bottlecolor = color.fromargb(255, 77, 59);
32
33 /// <summary>
34 /// gets or sets the color of the bottle.
35 /// </summary>
36 /// <value>the color of the bottle.</value>
37 [description("瓶子颜色"), category("自定义")]
38 public color bottlecolor
39 {
40 get { return bottlecolor; }
41 set
42 {
43 bottlecolor = value;
44 refresh();
45 }
46 }
47
48 /// <summary>
49 /// the bottle mouth color
50 /// </summary>
51 private color bottlemouthcolor = color.fromargb(105, 105, 105);
52
53 /// <summary>
54 /// gets or sets the color of the bottle mouth.
55 /// </summary>
56 /// <value>the color of the bottle mouth.</value>
57 [description("瓶口颜色"), category("自定义")]
58 public color bottlemouthcolor
59 {
60 get { return bottlemouthcolor; }
61 set { bottlemouthcolor = value; }
62 }
63
64 /// <summary>
65 /// the liquid color
66 /// </summary>
67 private color liquidcolor = color.fromargb(3, 169, 243);
68
69 /// <summary>
70 /// gets or sets the color of the liquid.
71 /// </summary>
72 /// <value>the color of the liquid.</value>
73 [description("液体颜色"), category("自定义")]
74 public color liquidcolor
75 {
76 get { return liquidcolor; }
77 set
78 {
79 liquidcolor = value;
80 refresh();
81 }
82 }
83
84
85 /// <summary>
86 /// 获取或设置控件显示的文字的字体。
87 /// </summary>
88 /// <value>the font.</value>
89 /// <permissionset>
90 /// <ipermission class="system.security.permissions.environmentpermission, mscorlib, version=2.0.3600.0, culture=neutral, publickeytoken=b77a5c561934e089" version="1" unrestricted="true" />
91 /// <ipermission class="system.security.permissions.fileiopermission, mscorlib, version=2.0.3600.0, culture=neutral, publickeytoken=b77a5c561934e089" version="1" unrestricted="true" />
92 /// <ipermission class="system.security.permissions.securitypermission, mscorlib, version=2.0.3600.0, culture=neutral, publickeytoken=b77a5c561934e089" version="1" flags="unmanagedcode, controlevidence" />
93 /// <ipermission class="system.diagnostics.performancecounterpermission, system, version=2.0.3600.0, culture=neutral, publickeytoken=b77a5c561934e089" version="1" unrestricted="true" />
94 /// </permissionset>
95 [description("文字字体"), category("自定义")]
96 public override font font
97 {
98 get
99 {
100 return base.font;
101 }
102 set
103 {
104 base.font = value;
105 resetworkingrect();
106 refresh();
107 }
108 }
109
110 /// <summary>
111 /// 获取或设置控件的前景色。
112 /// </summary>
113 /// <value>the color of the fore.</value>
114 /// <permissionset>
115 /// <ipermission class="system.security.permissions.fileiopermission, mscorlib, version=2.0.3600.0, culture=neutral, publickeytoken=b77a5c561934e089" version="1" unrestricted="true" />
116 /// </permissionset>
117 [description("文字颜色"), category("自定义")]
118 public override system.drawing.color forecolor
119 {
120 get
121 {
122 return base.forecolor;
123 }
124 set
125 {
126 base.forecolor = value;
127 refresh();
128 }
129 }
130
131 /// <summary>
132 /// the maximum value
133 /// </summary>
134 private decimal maxvalue = 100;
135
136 /// <summary>
137 /// gets or sets the maximum value.
138 /// </summary>
139 /// <value>the maximum value.</value>
140 [description("最大值"), category("自定义")]
141 public decimal maxvalue
142 {
143 get { return maxvalue; }
144 set
145 {
146 if (value < m_value)
147 return;
148 maxvalue = value;
149 refresh();
150 }
151 }
152
153 /// <summary>
154 /// the m value
155 /// </summary>
156 private decimal m_value = 50;
157
158 /// <summary>
159 /// gets or sets the value.
160 /// </summary>
161 /// <value>the value.</value>
162 [description("值"), category("自定义")]
163 public decimal value
164 {
165 get { return m_value; }
166 set
167 {
168 if (value <= 0 || value > maxvalue)
169 return;
170 m_value = value;
171 refresh();
172 }
173 }
174
175 /// <summary>
176 /// the m no
177 /// </summary>
178 private string m_no;
179 /// <summary>
180 /// gets or sets the no.
181 /// </summary>
182 /// <value>the no.</value>
183 [description("编号"), category("自定义")]
184 public string no
185 {
186 get { return m_no; }
187 set
188 {
189 m_no = value;
190 refresh();
191 }
192 }
重绘
1 protected override void onpaint(painteventargs e)
2 {
3 base.onpaint(e);
4 var g = e.graphics;
5 g.setgdihigh();
6 //写文字
7 var size = g.measurestring(title, font);
8 g.drawstring(title, font, new solidbrush(forecolor), new pointf((this.width - size.width) / 2, 2));
9
10 //画空瓶子
11 graphicspath pathps = new graphicspath();
12 point[] psps = new point[]
13 {
14 new point(m_workingrect.left, m_workingrect.top),
15 new point(m_workingrect.right - 1, m_workingrect.top),
16 new point(m_workingrect.right - 1, m_workingrect.bottom - 15),
17 new point(m_workingrect.right - 1 - m_workingrect.width / 4, m_workingrect.bottom),
18 new point(m_workingrect.left + m_workingrect.width / 4, m_workingrect.bottom),
19 new point(m_workingrect.left, m_workingrect.bottom - 15),
20 };
21 pathps.addlines(psps);
22 pathps.closeallfigures();
23 g.fillpath(new solidbrush(bottlecolor), pathps);
24 //画液体
25 decimal decytheight = (m_value / maxvalue) * m_workingrect.height;
26 graphicspath pathyt = new graphicspath();
27 rectangle rectyt = rectangle.empty;
28 if (decytheight < 15)
29 {
30 pointf[] psyt = new pointf[]
31 {
32 new pointf((float)(m_workingrect.left+(15-decytheight))+3,(float)(m_workingrect.bottom-decytheight)),
33 new pointf((float)(m_workingrect.right-(15-decytheight))-3,(float)(m_workingrect.bottom-decytheight)),
34 new pointf(m_workingrect.right-1-m_workingrect.width/4, m_workingrect.bottom),
35 new pointf(m_workingrect.left+m_workingrect.width/4, m_workingrect.bottom),
36 };
37 pathyt.addlines(psyt);
38 pathyt.closeallfigures();
39 rectyt = new rectangle((m_workingrect.left + (15 - (int)decytheight)) + 3, m_workingrect.bottom - (int)decytheight - 5, m_workingrect.width - (int)(15 - decytheight) * 2 - 8, 10);
40 }
41 else
42 {
43 pointf[] psyt = new pointf[]
44 {
45 new pointf(m_workingrect.left,(float)(m_workingrect.bottom-decytheight)),
46 new pointf(m_workingrect.right-1,(float)(m_workingrect.bottom-decytheight)),
47 new pointf(m_workingrect.right-1,m_workingrect.bottom-15),
48 new pointf(m_workingrect.right-1-m_workingrect.width/4, m_workingrect.bottom),
49 new pointf(m_workingrect.left+m_workingrect.width/4, m_workingrect.bottom),
50 new pointf(m_workingrect.left,m_workingrect.bottom-15),
51 };
52 pathyt.addlines(psyt);
53 pathyt.closeallfigures();
54 rectyt = new rectangle(m_workingrect.left, m_workingrect.bottom - (int)decytheight - 5, m_workingrect.width, 10);
55 }
56
57 g.fillpath(new solidbrush(liquidcolor), pathyt);
58 g.fillpath(new solidbrush(color.fromargb(50, bottlemouthcolor)), pathyt);
59 //画液体面
60 g.fillellipse(new solidbrush(liquidcolor), rectyt);
61 g.fillellipse(new solidbrush(color.fromargb(50, color.white)), rectyt);
62
63 //画高亮
64 int intcount = m_workingrect.width / 2 / 4;
65 int intsplit = (255 - 100) / intcount;
66 for (int i = 0; i < intcount; i++)
67 {
68 int _penwidth = m_workingrect.width / 2 - 4 * i;
69 if (_penwidth <= 0)
70 _penwidth = 1;
71 g.drawline(new pen(new solidbrush(color.fromargb(10, color.white)), _penwidth), new point(m_workingrect.width / 2, m_workingrect.top), new point(m_workingrect.width / 2, m_workingrect.bottom - 15));
72 if (_penwidth == 1)
73 break;
74 }
75
76 //画瓶底
77 g.fillellipse(new solidbrush(bottlecolor), new rectanglef(m_workingrect.left, m_workingrect.top - 5, m_workingrect.width - 2, 10));
78 g.fillellipse(new solidbrush(color.fromargb(50, color.white)), new rectanglef(m_workingrect.left, m_workingrect.top - 5, m_workingrect.width - 2, 10));
79 //画瓶口
80 g.fillrectangle(new solidbrush(bottlemouthcolor), new rectangle(m_workingrect.left + m_workingrect.width / 4, m_workingrect.bottom, m_workingrect.width / 2, 15));
81 //画瓶颈阴影
82 graphicspath pathpj = new graphicspath();
83 point[] pspj = new point[]
84 {
85 new point(m_workingrect.left, m_workingrect.bottom-15),
86 new point(m_workingrect.right-1, m_workingrect.bottom-15),
87 new point(m_workingrect.right-1-m_workingrect.width/4, m_workingrect.bottom),
88 new point(m_workingrect.left+m_workingrect.width/4, m_workingrect.bottom)
89 };
90 pathpj.addlines(pspj);
91 pathpj.closeallfigures();
92 g.fillpath(new solidbrush(color.fromargb(50, bottlemouthcolor)), pathpj);
93
94 //写编号
95 if (!string.isnullorempty(m_no))
96 {
97 var nosize = g.measurestring(m_no, font);
98 g.drawstring(m_no, font, new solidbrush(forecolor), new pointf((this.width - nosize.width) / 2, m_workingrect.top + 10));
99 }
100 }
代码就这么多
完整代码
1 // ***********************************************************************
2 // assembly : hzh_controls
3 // created : 2019-09-05
4 //
5 // ***********************************************************************
6 // <copyright file="ucbottle.cs">
7 // copyright by huang zhenghui(黄正辉) all, qq group:568015492 qq:623128629 email:623128629@qq.com
8 // </copyright>
9 //
10 // blog: https://www.cnblogs.com/bfyx
11 // github：https://github.com/kwwwvagaa/netwinformcontrol
12 // gitee：https://gitee.com/kwwwvagaa/net_winform_custom_control.git
13 //
14 // if you use this code, please keep this note.
15 // ***********************************************************************
16 using system;
17 using system.collections.generic;
18 using system.linq;
19 using system.text;
20 using system.windows.forms;
21 using system.drawing;
22 using system.drawing.drawing2d;
23 using system.componentmodel;
24
25 namespace hzh_controls.controls
26 {
27 /// <summary>
28 /// class ucbottle.
29 /// implements the <see cref="system.windows.forms.usercontrol" />
30 /// </summary>
31 /// <seealso cref="system.windows.forms.usercontrol" />
32 public class ucbottle : usercontrol
33 {
34 //瓶身区域
35 /// <summary>
36 /// the m working rect
37 /// </summary>
38 rectangle m_workingrect;
39
40 /// <summary>
41 /// the title
42 /// </summary>
43 string title = "瓶子1";
44
45 /// <summary>
46 /// gets or sets the title.
47 /// </summary>
48 /// <value>the title.</value>
49 [description("标题"), category("自定义")]
50 public string title
51 {
52 get { return title; }
53 set
54 {
55 title = value;
56 resetworkingrect();
57 refresh();
58 }
59 }
60
61 /// <summary>
62 /// the bottle color
63 /// </summary>
64 private color bottlecolor = color.fromargb(255, 77, 59);
65
66 /// <summary>
67 /// gets or sets the color of the bottle.
68 /// </summary>
69 /// <value>the color of the bottle.</value>
70 [description("瓶子颜色"), category("自定义")]
71 public color bottlecolor
72 {
73 get { return bottlecolor; }
74 set
75 {
76 bottlecolor = value;
77 refresh();
78 }
79 }
80
81 /// <summary>
82 /// the bottle mouth color
83 /// </summary>
84 private color bottlemouthcolor = color.fromargb(105, 105, 105);
85
86 /// <summary>
87 /// gets or sets the color of the bottle mouth.
88 /// </summary>
89 /// <value>the color of the bottle mouth.</value>
90 [description("瓶口颜色"), category("自定义")]
91 public color bottlemouthcolor
92 {
93 get { return bottlemouthcolor; }
94 set { bottlemouthcolor = value; }
95 }
96
97 /// <summary>
98 /// the liquid color
99 /// </summary>
100 private color liquidcolor = color.fromargb(3, 169, 243);
101
102 /// <summary>
103 /// gets or sets the color of the liquid.
104 /// </summary>
105 /// <value>the color of the liquid.</value>
106 [description("液体颜色"), category("自定义")]
107 public color liquidcolor
108 {
109 get { return liquidcolor; }
110 set
111 {
112 liquidcolor = value;
113 refresh();
114 }
115 }
116
117
118 /// <summary>
119 /// 获取或设置控件显示的文字的字体。
120 /// </summary>
121 /// <value>the font.</value>
122 /// <permissionset>
123 /// <ipermission class="system.security.permissions.environmentpermission, mscorlib, version=2.0.3600.0, culture=neutral, publickeytoken=b77a5c561934e089" version="1" unrestricted="true" />
124 /// <ipermission class="system.security.permissions.fileiopermission, mscorlib, version=2.0.3600.0, culture=neutral, publickeytoken=b77a5c561934e089" version="1" unrestricted="true" />
125 /// <ipermission class="system.security.permissions.securitypermission, mscorlib, version=2.0.3600.0, culture=neutral, publickeytoken=b77a5c561934e089" version="1" flags="unmanagedcode, controlevidence" />
126 /// <ipermission class="system.diagnostics.performancecounterpermission, system, version=2.0.3600.0, culture=neutral, publickeytoken=b77a5c561934e089" version="1" unrestricted="true" />
127 /// </permissionset>
128 [description("文字字体"), category("自定义")]
129 public override font font
130 {
131 get
132 {
133 return base.font;
134 }
135 set
136 {
137 base.font = value;
138 resetworkingrect();
139 refresh();
140 }
141 }
142
143 /// <summary>
144 /// 获取或设置控件的前景色。
145 /// </summary>
146 /// <value>the color of the fore.</value>
147 /// <permissionset>
148 /// <ipermission class="system.security.permissions.fileiopermission, mscorlib, version=2.0.3600.0, culture=neutral, publickeytoken=b77a5c561934e089" version="1" unrestricted="true" />
149 /// </permissionset>
150 [description("文字颜色"), category("自定义")]
151 public override system.drawing.color forecolor
152 {
153 get
154 {
155 return base.forecolor;
156 }
157 set
158 {
159 base.forecolor = value;
160 refresh();
161 }
162 }
163
164 /// <summary>
165 /// the maximum value
166 /// </summary>
167 private decimal maxvalue = 100;
168
169 /// <summary>
170 /// gets or sets the maximum value.
171 /// </summary>
172 /// <value>the maximum value.</value>
173 [description("最大值"), category("自定义")]
174 public decimal maxvalue
175 {
176 get { return maxvalue; }
177 set
178 {
179 if (value < m_value)
180 return;
181 maxvalue = value;
182 refresh();
183 }
184 }
185
186 /// <summary>
187 /// the m value
188 /// </summary>
189 private decimal m_value = 50;
190
191 /// <summary>
192 /// gets or sets the value.
193 /// </summary>
194 /// <value>the value.</value>
195 [description("值"), category("自定义")]
196 public decimal value
197 {
198 get { return m_value; }
199 set
200 {
201 if (value <= 0 || value > maxvalue)
202 return;
203 m_value = value;
204 refresh();
205 }
206 }
207
208 /// <summary>
209 /// the m no
210 /// </summary>
211 private string m_no;
212 /// <summary>
213 /// gets or sets the no.
214 /// </summary>
215 /// <value>the no.</value>
216 [description("编号"), category("自定义")]
217 public string no
218 {
219 get { return m_no; }
220 set
221 {
222 m_no = value;
223 refresh();
224 }
225 }
226
227 /// <summary>
228 /// initializes a new instance of the <see cref="ucbottle" /> class.
229 /// </summary>
230 public ucbottle()
231 {
232 this.setstyle(controlstyles.allpaintinginwmpaint, true);
233 this.setstyle(controlstyles.doublebuffer, true);
234 this.setstyle(controlstyles.resizeredraw, true);
235 this.setstyle(controlstyles.selectable, true);
236 this.setstyle(controlstyles.supportstransparentbackcolor, true);
237 this.setstyle(controlstyles.userpaint, true);
238 this.autoscalemode = system.windows.forms.autoscalemode.none;
239 this.sizechanged += ucbottle_sizechanged;
240 this.size = new size(100, 150);
241 }
242
243 /// <summary>
244 /// handles the sizechanged event of the ucbottle control.
245 /// </summary>
246 /// <param name="sender">the source of the event.</param>
247 /// <param name="e">the <see cref="eventargs"/> instance containing the event data.</param>
248 void ucbottle_sizechanged(object sender, eventargs e)
249 {
250 resetworkingrect();
251 }
252
253 /// <summary>
254 /// resets the working rect.
255 /// </summary>
256 private void resetworkingrect()
257 {
258 var g = this.creategraphics();
259 var size = g.measurestring(title, font);
260 m_workingrect = new rectangle(0, (int)size.height + 10, this.width, this.height - ((int)size.height + 10) - 15);
261 }
262
263 /// <summary>
264 /// 引发 <see cref="e:system.windows.forms.control.paint" /> 事件。
265 /// </summary>
266 /// <param name="e">包含事件数据的 <see cref="t:system.windows.forms.painteventargs" />。</param>
267 protected override void onpaint(painteventargs e)
268 {
269 base.onpaint(e);
270 var g = e.graphics;
271 g.setgdihigh();
272 //写文字
273 var size = g.measurestring(title, font);
274 g.drawstring(title, font, new solidbrush(forecolor), new pointf((this.width - size.width) / 2, 2));
275
276 //画空瓶子
277 graphicspath pathps = new graphicspath();
278 point[] psps = new point[]
279 {
280 new point(m_workingrect.left, m_workingrect.top),
281 new point(m_workingrect.right - 1, m_workingrect.top),
282 new point(m_workingrect.right - 1, m_workingrect.bottom - 15),
283 new point(m_workingrect.right - 1 - m_workingrect.width / 4, m_workingrect.bottom),
284 new point(m_workingrect.left + m_workingrect.width / 4, m_workingrect.bottom),
285 new point(m_workingrect.left, m_workingrect.bottom - 15),
286 };
287 pathps.addlines(psps);
288 pathps.closeallfigures();
289 g.fillpath(new solidbrush(bottlecolor), pathps);
290 //画液体
291 decimal decytheight = (m_value / maxvalue) * m_workingrect.height;
292 graphicspath pathyt = new graphicspath();
293 rectangle rectyt = rectangle.empty;
294 if (decytheight < 15)
295 {
296 pointf[] psyt = new pointf[]
297 {
298 new pointf((float)(m_workingrect.left+(15-decytheight))+3,(float)(m_workingrect.bottom-decytheight)),
299 new pointf((float)(m_workingrect.right-(15-decytheight))-3,(float)(m_workingrect.bottom-decytheight)),
300 new pointf(m_workingrect.right-1-m_workingrect.width/4, m_workingrect.bottom),
301 new pointf(m_workingrect.left+m_workingrect.width/4, m_workingrect.bottom),
302 };
303 pathyt.addlines(psyt);
304 pathyt.closeallfigures();
305 rectyt = new rectangle((m_workingrect.left + (15 - (int)decytheight)) + 3, m_workingrect.bottom - (int)decytheight - 5, m_workingrect.width - (int)(15 - decytheight) * 2 - 8, 10);
306 }
307 else
308 {
309 pointf[] psyt = new pointf[]
310 {
311 new pointf(m_workingrect.left,(float)(m_workingrect.bottom-decytheight)),
312 new pointf(m_workingrect.right-1,(float)(m_workingrect.bottom-decytheight)),
313 new pointf(m_workingrect.right-1,m_workingrect.bottom-15),
314 new pointf(m_workingrect.right-1-m_workingrect.width/4, m_workingrect.bottom),
315 new pointf(m_workingrect.left+m_workingrect.width/4, m_workingrect.bottom),
316 new pointf(m_workingrect.left,m_workingrect.bottom-15),
317 };
318 pathyt.addlines(psyt);
319 pathyt.closeallfigures();
320 rectyt = new rectangle(m_workingrect.left, m_workingrect.bottom - (int)decytheight - 5, m_workingrect.width, 10);
321 }
322
323 g.fillpath(new solidbrush(liquidcolor), pathyt);
324 g.fillpath(new solidbrush(color.fromargb(50, bottlemouthcolor)), pathyt);
325 //画液体面
326 g.fillellipse(new solidbrush(liquidcolor), rectyt);
327 g.fillellipse(new solidbrush(color.fromargb(50, color.white)), rectyt);
328
329 //画高亮
330 int intcount = m_workingrect.width / 2 / 4;
331 int intsplit = (255 - 100) / intcount;
332 for (int i = 0; i < intcount; i++)
333 {
334 int _penwidth = m_workingrect.width / 2 - 4 * i;
335 if (_penwidth <= 0)
336 _penwidth = 1;
337 g.drawline(new pen(new solidbrush(color.fromargb(10, color.white)), _penwidth), new point(m_workingrect.width / 2, m_workingrect.top), new point(m_workingrect.width / 2, m_workingrect.bottom - 15));
338 if (_penwidth == 1)
339 break;
340 }
341
342 //画瓶底
343 g.fillellipse(new solidbrush(bottlecolor), new rectanglef(m_workingrect.left, m_workingrect.top - 5, m_workingrect.width - 2, 10));
344 g.fillellipse(new solidbrush(color.fromargb(50, color.white)), new rectanglef(m_workingrect.left, m_workingrect.top - 5, m_workingrect.width - 2, 10));
345 //画瓶口
346 g.fillrectangle(new solidbrush(bottlemouthcolor), new rectangle(m_workingrect.left + m_workingrect.width / 4, m_workingrect.bottom, m_workingrect.width / 2, 15));
347 //画瓶颈阴影
348 graphicspath pathpj = new graphicspath();
349 point[] pspj = new point[]
350 {
351 new point(m_workingrect.left, m_workingrect.bottom-15),
352 new point(m_workingrect.right-1, m_workingrect.bottom-15),
353 new point(m_workingrect.right-1-m_workingrect.width/4, m_workingrect.bottom),
354 new point(m_workingrect.left+m_workingrect.width/4, m_workingrect.bottom)
355 };
356 pathpj.addlines(pspj);
357 pathpj.closeallfigures();
358 g.fillpath(new solidbrush(color.fromargb(50, bottlemouthcolor)), pathpj);
359
360 //写编号
361 if (!string.isnullorempty(m_no))
362 {
363 var nosize = g.measurestring(m_no, font);
364 g.drawstring(m_no, font, new solidbrush(forecolor), new pointf((this.width - nosize.width) / 2, m_workingrect.top + 10));
365 }
366 }
367 }
368 }
如果你喜欢的话，请到 点个星星吧
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
asp.net搭建博客，使用BlogEngine.NET+MySql搭建博客
网友评论