C#步骤控件
C#开发step步骤条控件
现在很多的javascript控件,非常的不错,其中step就是一个,如下图所示:
那么如何用C#来实现一个step控件呢?
先定义一个StepEntity类来存储步骤条节点的信息:

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 }

定义一个名为StepViewer 的用户控件。

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

在StepViewer 的用户控件中定义一个ListDataSource的属性,如下:

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 set
10 {
11 if (_dataSourceList != value)
12 {
13 _dataSourceList = value;
14 Invalidate();
15 }
16 }
17 }

在此控件的paint方法中,进行步骤条的绘制:

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 brushNode = 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(brushNodeCompleted, rec);
45 }
46
47 //白色字体
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, nFont);
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.Graphics.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 pNode = 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 //line
100 e.Graphics.DrawLine(p, initX + StepNodeWH + NodeNameWidth, CenterY, initX + StepNodeWH + NodeNameWidth + lineWidth, CenterY);
101 }
102 }
103
104 //描述信息
105 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
113 index++;
114 //8 is space width
115 initX = initX + lineWidth + StepNodeWH+ NodeNameWidth+8;
116 }
117 }
118 }

控件的使用:

1 List<StepEntity> list = new List<StepEntity>();
2 list.Add(new StepEntity("1", "新开单", 1, "这里是该步骤的描述信息", eumStepState.Completed, null));
3
4 list.Add(new StepEntity("2", "主管审批", 2, "这里是该步骤的描述信息", eumStepState.Waiting, null));
5 list.Add(new StepEntity("3", "总经理审批", 3, "这里是该步骤的描述信息", eumStepState.OutTime, null));
6 list.Add(new StepEntity("2", "完成", 4, "这里是该步骤的描述信息", eumStepState.Waiting, null));
7
8 this.stepViewer1.CurrentStep = 3;
9 this.stepViewer1.ListDataSource = list;

同样的,我们可以实现如下的timeline控件。
出处:http://www.cnblogs.com/isaboy/
C#步骤控件的更多相关文章
- (三十六)c#Winform自定义控件-步骤控件-HZHControls
官网 http://www.hzhcontrols.com 前提 入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章. GitHub:https://github.com/kww ...
- android 步骤控件的使用
有的时候我们做Android开发会用到表示步骤的需求.这时候github给我们提供了一个非常好地表示步骤的组件,使用她仅仅须要4步就能够完毕了. 项目地址https://github.com/anto ...
- 《Dotnet9》系列-开源C# Winform控件库1《HZHControls》强力推荐
大家好,我是Dotnet9小编,一个从事dotnet开发8年+的程序员.我最近在写dotnet分享文章,希望能让更多人看到dotnet的发展,了解更多dotnet技术,帮助dotnet程序员应用dot ...
- UI控件封装一般步骤
封装 如果一个view内部的子控件比较多,一般会考虑自定义一个view,把它内部的子控件的创建屏蔽起来,不让外界关心 外界可以传入对应的模型数据给view,view拿到模型数据后给内部的子控件设置对应 ...
- C#开发step步骤条控件
现在很多的javascript控件,非常的不错,其中step就是一个,如下图所示: 那么如何用C#来实现一个step控件呢? 先定义一个StepEntity类来存储步骤条节点的信息: public c ...
- WPF教程002 - 实现Step步骤条控件
原文:WPF教程002 - 实现Step步骤条控件 在网上看到这么一个效果,刚好在用WPF做控件,就想着用WPF来实现一下 1.实现原理 1.1.该控件分为2个模块,类似ComboBox控件分为Ste ...
- Delphi 编写ActiveX控件(OCX控件)的知识和样例(有详细步骤)
一.ActiveX应用情况简介: ActiveX控件也就是一般所说的OCX控件,它是 ActiveX技术的一部分.ActiveX是微软公司推出的基于组件对象模型COM的技术,包括对Windows 32 ...
- WPF-自定义实现步骤条控件
步骤条实现的效果: 步骤条控件是在listbox的基础上实现的. 一. xaml代码: <Window.Resources> <convert1:StepListBarWidthCo ...
- MSComm控件进行串口编程的基本步骤
Visual C++为我们提供了一种好用的ActiveX控件Microsoft Communications Control(即MSComm)来支持应用程序对串口的访问,在应用程序中插入MSComm控 ...
随机推荐
- windows 控制台下 无法获取完整的回车键值
问题描述: 收集的网友分析: http://bbs.csdn.net/topics/370084904 因为C语言和UNIX的开发者是同事…… C语言里统一用的\n表示另起一行.微软的DOS受到了当时 ...
- Hadoop读书笔记(一)Hadoop介绍
1.Hadoop是什么? 适合大数据的分布式与计算平台. HDFS:Hadoop Distributed File System 分布式文件系统 MapReduce:并行计算框架 2.HDFS的架构 ...
- php课程 10-34 目录遍历中的注意事项是什么
php课程 10-34 目录遍历中的注意事项是什么 一.总结 一句话总结:用scandir,会把目录和文件放到一个数组中. 1.移动文件怎么实现,php里面没有移动文件这个函数? 先复制,再删除 2 ...
- python3中numpy函数tile的用法
tile函数位于python模块 numpy.lib.shape_base中,他的功能是重复某个数组.比如tile(A,n),功能是将数组A重复n次,构成一个新的数组,我们还是使用具体的例子来说明问题 ...
- UVA 11609 - Teams 组合、快速幂取模
看题传送门 题目大意: 有n个人,选一个或者多个人参加比赛,其中一名当队长,如果参赛者相同,队长不同,也算一种方案.求一共有多少种方案. 思路: 排列组合问题. 先选队长有C(n , 1)种 然后从n ...
- 【例题 6-2 UVA - 514】Rails
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 栈模拟一下就好. 每个输出段后面都有一个空行. 包括最后一个. [代码] #include <bits/stdc++.h> ...
- 【习题 3-4 UVA - 455】Periodic Strings
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 枚举 [代码] #include <bits/stdc++.h> using namespace std; const ...
- 部分城市关于.Net招聘数量
2016-12-09更新统计数据 上海 10730 北京 6322 广州 4157 深圳 3548 成都 2291 重庆 706 厦门 285 2015-01-30日,前程无忧搜索".Net ...
- Win7长时间使用占用内存高问题记
工作电脑Win7 64位,8G内存,没设置虚拟内存,连续运行几天,中间只是睡眠,今天在试用时总提示内存不足,看任务管理器已经把占用内存比较多的几个进程都结束掉了,但内存占用依旧是80%以上,eclip ...
- 20、RTC驱动程序
drivers\rtc\rtc-s3c.c s3c_rtc_init platform_driver_register s3c_rtc_probe rtc_device_register(" ...