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

 更新时间:2017年03月05日 10:17:02   作者:JackWang-CUMT  
本篇文章主要介绍了用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控件。

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

相关文章

  • C#使用base64对字符串进行编码和解码的测试

    C#使用base64对字符串进行编码和解码的测试

    今天小编就为大家分享一篇关于C#使用base64对字符串进行编码和解码的测试,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-02-02
  • C#如何使用XmlDocument访问XML文件

    C#如何使用XmlDocument访问XML文件

    本文介绍了XML文件的特点、用途、格式、示例、解析和处理方式,以及在C#中使用XmlDocument类进行增删改查操作的方法,XML文件是一种灵活的数据描述和存储方式,适用于各种应用场景,在C#中,通过XmlDocument类可以方便地对XML文件进行操作
    2024-12-12
  • C#中的Socket编程详解

    C#中的Socket编程详解

    本文详细讲解了C#中的Socket编程,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-01-01
  • 分享WCF文件传输实现方法---WCFFileTransfer

    分享WCF文件传输实现方法---WCFFileTransfer

    这篇文章主要介绍了分享WCF文件传输实现方法---WCFFileTransfer,需要的朋友可以参考下
    2015-11-11
  • Unity基于ShaderLab实现光照系统(着色器代码实现小结)

    Unity基于ShaderLab实现光照系统(着色器代码实现小结)

    这篇文章主要介绍了Unity基于ShaderLab实现光照系统,主要总结unity中shaderlab的着色器代码实现,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-01-01
  • C#实现扑克游戏(21点)的示例代码

    C#实现扑克游戏(21点)的示例代码

    21点又名黑杰克,该游戏由2到6个人玩,使用除大小王之外的52张牌,游戏者的目标是使手中的牌的点数之和不超过21点且尽量大。本文将用C#实现这一经典游戏,需要的可以参考一下
    2022-08-08
  • C#语言MVC框架Aspose.Cells控件导出Excel表数据

    C#语言MVC框架Aspose.Cells控件导出Excel表数据

    这篇文章主要为大家详细介绍了C#语言MVC框架Aspose.Cells控件导出Excel表数据,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12
  • C#泛型的逆变协变之个人理解

    C#泛型的逆变协变之个人理解

    这篇文章主要介绍了C#泛型的逆变协变之个人理解,需要的朋友可以参考下
    2023-04-04
  • Unity3D实现模型淡入淡出效果

    Unity3D实现模型淡入淡出效果

    这篇文章主要为大家详细介绍了Unity3D实现模型淡出效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-02-02
  • C#编程实现动态改变配置文件信息的方法

    C#编程实现动态改变配置文件信息的方法

    这篇文章主要介绍了C#编程实现动态改变配置文件信息的方法,涉及C#针对xml格式文件的相关操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2016-06-06

最新评论