现在很多的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