现在很多的javascript控件，非常的不错，其中step就是一个，如下图所示：
那么如何用c#来实现一个step控件呢?
先定义一个stepentity类来存储步骤条节点的信息：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
public class stepentity { public string id { get; set; } public string stepname { get; set; } public int steporder { get; set; } public eumstepstate stepstate { get; set; } public string stepdesc { get; set; } public object steptag { get; set; } //public image stepcompletedimage { get; set; } //public image stepdoingimage { get; set; } public stepentity(string id,string stepname,int steporder,string stepdesc, eumstepstate stepstate,object tag) { this.id = id; this.stepname = stepname; this.steporder = steporder; this.stepdesc = stepdesc; this.steptag = tag; this.stepstate = stepstate; } } |
定义一个名为stepviewer 的用户控件。
|
1
2
3
4
5
6
7
8
|
public partial class stepviewer : usercontrol { public stepviewer() { initializecomponent(); this.height = 68; }} |
在stepviewer 的用户控件中定义一个listdatasource的属性，如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
private list<stepentity> _datasourcelist = null; [browsable(true), category("stepviewer")] public list<stepentity> listdatasource { get { return _datasourcelist; } set { if (_datasourcelist != value) { _datasourcelist = value; invalidate(); } } } |
在此控件的paint方法中，进行步骤条的绘制：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
|
private void stepviewer_paint(object sender, painteventargs e) { if(this.listdatasource!=null) { int centery = this.height / 2; int index = 1; int count = listdatasource.count; int linewidth = 120; int stepnodewh = 28; //this.width = 32 * count + linewidth * (count - 1) + 6+300; //defalut pen & brush e.graphics.smoothingmode = system.drawing.drawing2d.smoothingmode.highquality; brush brush = new solidbrush(_gray); pen p = new pen(brush, 1f); brush brushnode = new solidbrush(_darkgray); pen pennode = new pen(brushnode, 1f); brush brushnodecompleted = new solidbrush(_blue); pen pennodecompleted = new pen(brushnodecompleted, 1f); int initx = 6; //string font nfont = new font("微软雅黑", 12); font stepfont = new font("微软雅黑", 11,fontstyle.bold); int nodenamewidth = 0; foreach (var item in listdatasource) { //round rectangle rec = new rectangle(initx, centery - stepnodewh / 2, stepnodewh, stepnodewh); if (currentstep == item.steporder) { if (item.stepstate == eumstepstate.outtime) { e.graphics.drawellipse(new pen(_red,1f), rec); e.graphics.fillellipse(new solidbrush(_red), rec); } else { e.graphics.drawellipse(pennodecompleted, rec); e.graphics.fillellipse(brushnodecompleted, rec); } //白色字体 sizef ftitle = e.graphics.measurestring(index.tostring(), stepfont); point ptitle = new point(initx + stepnodewh / 2 - (int)math.round(ftitle.width) / 2, centery - (int)math.round(ftitle.height / 2)); e.graphics.drawstring(index.tostring(), stepfont, brushes.white, ptitle); //nodename sizef snode = e.graphics.measurestring(item.stepname, nfont); point pnode = new point(initx + stepnodewh, centery - (int)math.round(snode.height / 2) + 2); e.graphics.drawstring(item.stepname,new font( nfont,fontstyle.bold), brushnode, pnode); nodenamewidth = (int)math.round(snode.width); if (index < count) { e.graphics.drawline(p, initx + stepnodewh + nodenamewidth, centery, initx + stepnodewh + nodenamewidth + linewidth, centery); } } else if (item.steporder < currentstep) { //completed e.graphics.drawellipse(pennodecompleted, rec); //image rectanglef recrf = new rectanglef(rec.x + 6, rec.y + 6, rec.width - 12, rec.height - 12); e.graphics.drawimage(controlsresource.check_lightblue, recrf); //nodename sizef snode = e.graphics.measurestring(item.stepname, nfont); point pnode = new point(initx + stepnodewh, centery - (int)math.round(snode.height / 2) + 2); e.graphics.drawstring(item.stepname, nfont, brushnode, pnode); nodenamewidth = (int)math.round(snode.width); if (index < count) { e.graphics.drawline(pennodecompleted, initx + stepnodewh + nodenamewidth, centery, initx + stepnodewh + nodenamewidth + linewidth, centery); } } else { e.graphics.drawellipse(p, rec); // sizef ftitle = e.graphics.measurestring(index.tostring(), stepfont); point ptitle = new point(initx + stepnodewh / 2 - (int)math.round(ftitle.width) / 2, centery - (int)math.round(ftitle.height / 2)); e.graphics.drawstring(index.tostring(), stepfont, brush, ptitle); //nodename sizef snode = e.graphics.measurestring(item.stepname, nfont); point pnode = new point(initx + stepnodewh, centery - (int)math.round(snode.height / 2) + 2); e.graphics.drawstring(item.stepname, nfont, brushnode, pnode); nodenamewidth = (int)math.round(snode.width); if (index < count) { //line e.graphics.drawline(p, initx + stepnodewh + nodenamewidth, centery, initx + stepnodewh + nodenamewidth + linewidth, centery); } } //描述信息 if (item.stepdesc != "") { point pnode = new point(initx + stepnodewh, centery+10); e.graphics.drawstring(item.stepdesc,new font(nfont.fontfamily,10),brush, pnode); } index++; //8 is space width initx = initx + linewidth + stepnodewh+ nodenamewidth+8; } } } |
控件的使用：
|
1
2
3
4
5
6
7
|
list<stepentity> list = new list<stepentity>(); list.add(new stepentity("1", "新开单", 1, "这里是该步骤的描述信息", eumstepstate.completed, null)); list.add(new stepentity("2", "主管审批", 2, "这里是该步骤的描述信息", eumstepstate.waiting, null)); list.add(new stepentity("3", "总经理审批", 3, "这里是该步骤的描述信息", eumstepstate.outtime, null)); list.add(new stepentity("2", "完成", 4, "这里是该步骤的描述信息", eumstepstate.waiting, null)); this.stepviewer1.currentstep = 3; this.stepviewer1.listdatasource = list; |
同样的，我们可以实现如下的timeline控件。
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持服务器之家！
原文链接：http://www.cnblogs.com/isaboy/p/winform_step_control.html
