欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-11-18 20:28:28
现在很多的javascript控件,非常的不错,其中step就是一个,如下图所示: 那么如何用c#来实现一个step控件呢? 先定义一个stepentity...

现在很多的javascript控件,非常的不错,其中step就是一个,如下图所示:

C# 开发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;

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

同样的,我们可以实现如下的timeline控件。

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

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