C# 开发step步骤条控件详解

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

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！