现在很多的javascript控件，非常的不错，其中step就是一个，如下图所示：
那么如何用c#来实现一个step控件呢?
先定义一个stepentity类来存储步骤条节点的信息：
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 的用户控件。
public partial class stepviewer : usercontrol
{
public stepviewer()
{
initializecomponent();
this .height = 68;
}
}
在stepviewer 的用户控件中定义一个listdatasource的属性，如下：
private list<stepentity> _datasourcelist = null ;
[browsable( true ), category( "stepviewer" )]
public list<stepentity> listdatasource
{
get
{
return _datasourcelist;
}
set
{
if (_datasourcelist != value)
{
_datasourcelist = value;
invalidate();
}
}
}
在此控件的paint方法中，进行步骤条的绘制：
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;
}
}
}
控件的使用：
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
dy("nrwz");
查看更多关于C# 开发step步骤条控件详解的详细内容...