Window Form步骤条控件实现-阿里云开发者社区

在当前的不少电商或者物流等应用程序中，为了清晰的表明某些事件的当前状态，以及历史时序记录情况，经常可以看到一个步骤条控件，它分成几个节点，每个节点代表一个核心状态，每个状态之间通过线条进行连接，以经过的节点高亮显示，未经过的线条灰度显示。其中，每个节点下可以通过文字进行简要的描述。本文将利用C#中的GDI+技术，自动绘制相关的UI元素，实现Window Form的步骤条控件。

1 项目结构

利用Visual Studio 社区版，创建一个Window应用程序项目WinControls，其中在资源文件中添加一个图形，用于绘制经过步骤条节点的✔ 状态。并添加几个类，具体项目结构如下图所示：

其中的check_lightblue.png图片代表的是✔ 状态。可以通过Properties.Resources.check_lightblue进行访问。eumStepState.cs是一个枚举类型，表示节点的状态信息，核心代码如下：

namespaceWinControls{
publicenumeumStepState    {
Waiting,
Completed,
OutTime    }
}

而 StepEntity.cs 文件是代表一个步骤条节点的实体对象，其中具备的属性有节点ID，节点名称，节点状态，节点顺序，节点描述等，核心代码如下：

usingSystem;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.Text;
usingSystem.Threading.Tasks;
namespaceWinControls{
publicclassStepEntity    {
publicstringId { get; set; }
publicstringStepName { get; set; }
publicintStepOrder { get; set; }
publiceumStepStateStepState { get; set; }
publicstringStepDesc { get; set; }
publicobjectStepTag { get; set; }
publicStepEntity(stringid, stringstepname, intsteporder, 
stringstepdesc, eumStepStatestepstate, objecttag)
        {
this.Id=id;
this.StepName=stepname;
this.StepOrder=steporder;
this.StepDesc=stepdesc;
this.StepTag=tag;
this.StepState=stepstate;
        }
    }
}

2 步骤条实现

在项目WinControls中添加一个名为StepViewer的用户控件，具体如下图所示：

核心代码如下：

usingSystem;
usingSystem.Collections.Generic;
usingSystem.ComponentModel;
usingSystem.Data;
usingSystem.Drawing;
usingSystem.Linq;
usingSystem.Text;
usingSystem.Threading.Tasks;
usingSystem.Windows.Forms;
namespaceWinControls{
publicpartialclassStepViewer : UserControl    {
publicStepViewer()
        {
InitializeComponent();
this.Height=68;
this.Paint+=StepViewer_Paint;
        }
privateList<StepEntity>_dataSourceList=null;
privateColor_Gray=Color.FromArgb(189, 195, 199);
privateColor_DarkGray=Color.FromArgb(149, 165, 166);
privateColor_Blue=Color.FromArgb(52, 152, 219);
privateColor_Red=Color.FromArgb(231, 76, 60);
        [Browsable(true), Category("StepViewer")]
publicList<StepEntity>ListDataSource        {
get            {
return_dataSourceList;
            }
set            {
if (_dataSourceList!=value)
                {
_dataSourceList=value;
Invalidate();
                }
            }
        }
privateint_currentStep=0;
publicintCurrentStep {
get            {
return_currentStep;
            }
set            {
if (_currentStep!=value)
                {
_currentStep=value;
Invalidate();
                }
            }
        }
privatevoidStepViewer_Paint(objectsender, PaintEventArgse)
        {
if (this.ListDataSource!=null)
            {
intCenterY=this.Height/2;
intindex=1;
intcount=ListDataSource.Count;
intlineWidth=120;
intStepNodeWH=28;
//this.Width = 32 * count + lineWidth * (count - 1) + 6+300;//defalut pen & brushe.Graphics.SmoothingMode=System.Drawing.Drawing2D.SmoothingMode.HighQuality;
Brushbrush=newSolidBrush(_Gray);
Penp=newPen(brush, 1f);
BrushbrushNode=newSolidBrush(_DarkGray);
PenpenNode=newPen(brushNode, 1f);
BrushbrushNodeCompleted=newSolidBrush(_Blue);
PenpenNodeCompleted=newPen(brushNodeCompleted, 1f);
intinitX=6;
//stringFontnFont=newFont("微软雅黑", 12);
FontstepFont=newFont("微软雅黑", 11, FontStyle.Bold);
intNodeNameWidth=0;
foreach (variteminListDataSource)
                {
//roundRectanglerec=newRectangle(initX, CenterY-StepNodeWH/2, StepNodeWH, StepNodeWH);
if (CurrentStep==item.StepOrder)
                    {
if (item.StepState==eumStepState.OutTime)
                        {
e.Graphics.DrawEllipse(newPen(_Red, 1f), rec);
e.Graphics.FillEllipse(newSolidBrush(_Red), rec);
                        }
else                        {
e.Graphics.DrawEllipse(penNodeCompleted, rec);
e.Graphics.FillEllipse(brushNodeCompleted, rec);
                        }
//白色字体SizeFfTitle=e.Graphics.MeasureString(index.ToString(), stepFont);
PointpTitle=newPoint(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);
//nodeNameSizeFsNode=e.Graphics.MeasureString(item.StepName, nFont);
PointpNode=newPoint(initX+StepNodeWH, CenterY- (int)Math.Round(sNode.Height/2) +2);
e.Graphics.DrawString(item.StepName, newFont(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);
                        }
                    }
elseif (item.StepOrder<CurrentStep)
                    {
//completede.Graphics.DrawEllipse(penNodeCompleted, rec);
//imageRectangleFrecRF=newRectangleF(rec.X+6, rec.Y+6, rec.Width-12, rec.Height-12);
e.Graphics.DrawImage(Properties.Resources.check_lightblue, recRF);
//nodeNameSizeFsNode=e.Graphics.MeasureString(item.StepName, nFont);
PointpNode=newPoint(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);
//SizeFfTitle=e.Graphics.MeasureString(index.ToString(), stepFont);
PointpTitle=newPoint(initX+StepNodeWH/2- (int)Math.Round(fTitle.Width) /2, CenterY- (int)Math.Round(fTitle.Height/2));
e.Graphics.DrawString(index.ToString(), stepFont, brush, pTitle);
//nodeNameSizeFsNode=e.Graphics.MeasureString(item.StepName, nFont);
PointpNode=newPoint(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)
                        {
//linee.Graphics.DrawLine(p, initX+StepNodeWH+NodeNameWidth, CenterY, initX+StepNodeWH+NodeNameWidth+lineWidth, CenterY);
                        }
                    }
//描述信息if (item.StepDesc!="")
                    {
PointpNode=newPoint(initX+StepNodeWH, CenterY+10);
e.Graphics.DrawString(item.StepDesc, newFont(nFont.FontFamily, 10), brush, pNode);
                    }
index++;
//8 is space widthinitX=initX+lineWidth+StepNodeWH+NodeNameWidth+8;
                }
            }
        }
    }
}

其中，首先定义了一组颜色，代码如下：

privateColor_Gray=Color.FromArgb(189, 195, 199); 
privateColor_DarkGray=Color.FromArgb(149, 165, 166);
privateColor_Blue=Color.FromArgb(52, 152, 219);
privateColor_Red=Color.FromArgb(231, 76, 60);

其次，由于步骤条的节点有多个，是一个列表，因此这里用private List<StepEntity> _dataSourceList = null;进行定义一个数据源。[Browsable(true), Category("StepViewer")]则表示ListDataSource属性在控件的属性列表中可见。在赋值后会调用 Invalidate()方法进行UI重绘。

再次，此控件初始化时，执行如下代码：

publicStepViewer()
 {
InitializeComponent();
this.Height=68;
this.Paint+=StepViewer_Paint;
 }

即限定控件的高度为68，同时绑定绘制事件Paint，实现绘制的方法为 StepViewer_Paint，这是控件的核心，其中使用了 e.Graphics下的API可以绘制圆形，线条和图片，以及文本信息。

3 步骤条效果

将控件添加到Form1窗口上并在初始化方法中维护数据源信息，核心代码如下：

usingSystem;
usingSystem.Collections.Generic;
usingSystem.ComponentModel;
usingSystem.Data;
usingSystem.Drawing;
usingSystem.Linq;
usingSystem.Text;
usingSystem.Threading.Tasks;
usingSystem.Windows.Forms;
namespaceWinControls{
publicpartialclassForm1 : Form    {
publicForm1()
        {
InitializeComponent();
this.BackColor=Color.White;
        }
privatevoidForm1_Load(objectsender, EventArgse)
        {
List<StepEntity>list=newList<StepEntity>();
list.Add(newStepEntity("1", "新开单", 1, "这里是该步骤的描述信息", eumStepState.Completed, null));
list.Add(newStepEntity("2", "主管审批", 2, "这里是该步骤的描述信息", eumStepState.Waiting, null));
list.Add(newStepEntity("3", "总经理审批", 3, "这里是该步骤的描述信息", eumStepState.OutTime, null));
list.Add(newStepEntity("2", "完成", 4, "这里是该步骤的描述信息", eumStepState.Waiting, null));
this.stepViewer1.CurrentStep=3;
this.stepViewer1.ListDataSource=list;
        }
privatevoidbutton1_Click(objectsender, EventArgse)
        {
this.stepViewer1.CurrentStep--;
        }
privatevoidbutton2_Click(objectsender, EventArgse)
        {
this.stepViewer1.CurrentStep++;
        }
    }
}

执行项目，Form1界面具体如下图所示：

Window Form步骤条控件实现

1 项目结构

2 步骤条实现

3 步骤条效果

热门文章

最新文章

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

Window Form步骤条控件实现

1 项目结构

2 步骤条实现

3 步骤条效果

热门文章

最新文章

相关电子书