首页 > 编程 > C# > 正文

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

2019-10-29 21:12:48
字体:
来源:转载
供稿:网友

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

C#,步骤条

那么如何用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#,步骤条

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

C#,步骤条

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

 

注:相关教程知识阅读请移步到c#教程频道。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表