（四十二）c#Winform自定义控件-进度条扩展

前提

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

最后的话

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