C # develop step-by-step controls,

C # develop step-by-step controls,

Currently, many javascript controls are very good, and step is one, as shown in:

 

So how to use C # To implement a step control?

First, define a StepEntity class to store the information of step nodes:

 1     public class StepEntity 2     { 3         public string Id { get; set; } 4         public string StepName { get; set; } 5         public int StepOrder { get; set; } 6         public eumStepState StepState { get; set; } 7         public string StepDesc { get; set; } 8         public object StepTag { get; set; } 9         //public Image StepCompletedImage { get; set; }10         //public Image StepDoingImage { get; set; }11         public StepEntity(string id,string stepname,int steporder,string stepdesc, eumStepState stepstate,object tag)12         {13             this.Id = id;14             this.StepName = stepname;15             this.StepOrder = steporder;16             this.StepDesc = stepdesc;17             this.StepTag = tag;18             this.StepState = stepstate;19         }20     }

 

Define a user control named StepViewer.

1 public partial class StepViewer : UserControl2  {3         public StepViewer()4         {5             InitializeComponent();6             this.Height = 68;7         }8 }

Define a ListDataSource attribute in the StepViewer user control, as shown below:

 1   private List<StepEntity> _dataSourceList = null; 2         [Browsable(true), Category("StepViewer")] 3         public List<StepEntity> ListDataSource 4         { 5             get 6             { 7                 return _dataSourceList; 8             } 9             set10             {11                 if (_dataSourceList != value)12                 {13                     _dataSourceList = value;14                     Invalidate();15                 }16             }17         }

 

In the paint method of this control, draw the step bar:

1 private void StepViewer_Paint (object sender, PaintEventArgs e) 2 {3 if (this. ListDataSource! = Null) 4 {5 int CenterY = this. height/2; 6 int index = 1; 7 int count = ListDataSource. count; 8 int lineWidth = 120; 9 int StepNodeWH = 28; 10 // this. width = 32 * count + lineWidth * (count-1) + 6 + 300; 11 // defalut pen & brush 12 e. graphics. smoothingMode = System. drawing. drawing2D. smoothingMode. highQuality; 13 Brush brush = new SolidBrush (_ Gray); 14 Pen p = new Pen (brush, 1f); 15 Brush brushNo De = new SolidBrush (_ DarkGray); 16 Pen penNode = new Pen (brushNode, 1f); 17 18 Brush brushNodeCompleted = new SolidBrush (_ Blue ); 19 Pen penNodeCompleted = new Pen (brushNodeCompleted, 1f); 20 21 22 int initX = 6; 23 // string 24 Font nFont = new Font ("", 12 ); 25 Font stepFont = new Font ("", 11, FontStyle. bold); 26 int NodeNameWidth = 0; 27 28 foreach (var item in ListDataSource) 29 {30 31 // Round 32 33 Rectangle rec = new Rectangle (initX, CenterY-StepNodeWH/2, StepNodeWH, StepNodeWH); 34 if (CurrentStep = item. stepOrder) 35 {36 if (item. stepState = eumStepState. outTime) 37 {38 e. graphics. drawEllipse (new Pen (_ Red, 1f), rec); 39 e. graphics. fillEllipse (new SolidBrush (_ Red), rec); 40} 41 else 42 {43 e. graphics. drawEllipse (penNodeCompleted, rec); 44 e. graphics. fillEllipse (brushNo DeCompleted, rec); 45} 46 47 // white font 48 SizeF fTitle = e. graphics. measureString (index. toString (), stepFont); 49 Point pTitle = new Point (initX + StepNodeWH/2-(int) Math. round (fTitle. width)/2, CenterY-(int) Math. round (fTitle. height/2); 50 e. graphics. drawString (index. toString (), stepFont, Brushes. white, pTitle); 51 52 53 // nodeName 54 SizeF sNode = e. graphics. measureString (item. stepName, nF Ont); 55 Point pNode = new Point (initX + StepNodeWH, CenterY-(int) Math. round (sNode. height/2) + 2); 56 57 e. graphics. drawString (item. stepName, new Font (nFont, FontStyle. bold), brushNode, pNode); 58 NodeNameWidth = (int) Math. round (sNode. width); 59 if (index <count) 60 {61 e. graphics. drawLine (p, initX + StepNodeWH + NodeNameWidth, CenterY, initX + StepNodeWH + NodeNameWidth + lineWidth, CenterY); 62} 63 64} 65 else if (item. stepOrder <CurrentStep) 66 {67 // completed 68 e. graphics. drawEllipse (penNodeCompleted, rec); 69 // image 70 RectangleF recRF = new RectangleF (rec. X + 6, rec. Y + 6, rec. width-12, rec. height-12); 71 e. graphics. drawImage (ControlsResource. check_lightblue, recRF); 72 73 // nodeName 74 SizeF sNode = e. graphics. measureString (item. stepName, nFont); 75 Point pNode = new Point (initX + StepNodeWH, CenterY-(int) Math. round (sNode. height/2) + 2); 76 e. graphics. drawString (item. stepName, nFont, brushNode, pNode); 77 NodeNameWidth = (int) Math. round (sNode. width); 78 79 if (index <count) 80 {81 e. graphics. drawLine (penNodeCompleted, initX + StepNodeWH + NodeNameWidth, CenterY, initX + StepNodeWH + NodeNameWidth + lineWidth, CenterY); 82} 83 84} 85 else 86 {87 e. grap Hics. drawEllipse (p, rec); 88 // 89 SizeF fTitle = e. graphics. measureString (index. toString (), stepFont); 90 Point pTitle = new Point (initX + StepNodeWH/2-(int) Math. round (fTitle. width)/2, CenterY-(int) Math. round (fTitle. height/2); 91 e. graphics. drawString (index. toString (), stepFont, brush, pTitle); 92 // nodeName 93 SizeF sNode = e. graphics. measureString (item. stepName, nFont); 94 Point pNod E = new Point (initX + StepNodeWH, CenterY-(int) Math. round (sNode. height/2) + 2); 95 e. graphics. drawString (item. stepName, nFont, brushNode, pNode); 96 NodeNameWidth = (int) Math. round (sNode. width); 97 if (index <count) 98 {99 // line100 e. graphics. drawLine (p, initX + StepNodeWH + NodeNameWidth, CenterY, initX + StepNodeWH + NodeNameWidth + lineWidth, CenterY); 101} 102 103 // description information 104 if (item. StepDesc! = "") 106 {107 Point pNode = new Point (initX + StepNodeWH, CenterY + 10); 108 e. graphics. drawString (item. stepDesc, new Font (nFont. fontFamily, 10), brush, pNode); 109} 110 111 112 index ++; 113 // 8 is space width115 initX = initX + lineWidth + StepNodeWH + NodeNameWidth + 8; 116} 117} 118}

 

Use of controls:

1 List <StepEntity> list = new List <StepEntity> (); 2 list. add (new StepEntity ("1", "new Order", 1, "Here is the description of this step", eumStepState. completed, null); 3 4 list. add (new StepEntity ("2", "supervisor approval", 2, "Here is the description of this step", eumStepState. waiting, null); 5 list. add (new StepEntity ("3", "General Manager approval", 3, "Here is the description of this step", eumStepState. outTime, null); 6 list. add (new StepEntity ("2", "finished", 4, "Here is the description of this step", eumStepState. waiting, null); 7 8 this. stepViewer1.CurrentStep = 3; 9 this. stepViewer1.ListDataSource = list;

 

Similarly, we can implement the following timeline control.