C # developing code details for the Step step bar control

This article mainly introduces the method steps of using C # to implement a step control, which has a good reference value. Let's take a look at the little series.

Now a lot of JavaScript controls are pretty good, where step is one, as shown in:

So how do you implement a step control in C #?

First define a stepentity class to store the information for the Step bar node:

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;  } }

Defines a user control named Stepviewer.

Public partial class Stepviewer:usercontrol {public  stepviewer ()  {   InitializeComponent ();   This. Height =;  }}

Define a Listdatasource property in the user control of Stepviewer, as follows:

Private list<stepentity> _datasourcelist = null;  [Browsable (True), Category ("Stepviewer")]  Public list<stepentity> listdatasource  {   get   {    return _datasourcelist;   }   Set   {    if (_datasourcelist! = value)    {     _datasourcelist = value;     Invalidate ();}}}  

In the paint method of this control, the step bar is drawn:

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 = * 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 ("Microsoft Jas Black", 12);    Font stepfont = new Font ("Microsoft Jas Black", 11,fontstyle.bold);    int nodenamewidth = 0; foreach (var item in Listdatasource) {//round Rectangle rec = new Rectangle (INITX, CENTERY-STEPNODEWH/2, S     TEPNODEWH, 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); }//White font 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.heig      HT/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, Cen      Tery); }} and 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, Center      Y, 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.heig      HT/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); }}//Description information 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 isSpace width Initx = initx + linewidth + stepnodewh+ nodenamewidth+8; }   }  }

Use of the control:

list<stepentity> list = new list<stepentity> (); List. ADD ("1", "New Open", 1, "Here is the description of the step", eumstepstate.completed, null)); List. ADD (New Stepentity ("2", "Supervisor Approval", 2, "Here is the description of the step", eumstepstate.waiting, null)); List. ADD (New Stepentity ("3", "General manager Approval", 3, "Here is the description of the step", Eumstepstate.outtime, null)); List. ADD (New Stepentity ("2", "Done", 4, "Here is the description of the step", eumstepstate.waiting, null)); This.stepViewer1.CurrentStep = 3; This.stepViewer1.ListDataSource = list;

Similarly, we can implement the following timeline controls.