利用XtraDiagram.DiagramControl进行流程图形的绘制和控制

DevExpress提供了一个比较强大的图形绘制工具，可以用于绘制各种图形，如流程图、组织机构图等等，本篇随笔介绍XtraDiagram.DiagramControl的使用，以及利用代码对其属性进行控制，以及利用图形模具的自定义操作，实现一些简单流程图形的绘制和处理。
DiagramControl是类似Visio的绘图控件，以前我2006年的就接触使用Visio的二次开发，当时开始还是利用VB6 + VIsio2003进行二次开发的，后来把它改良为C# + Visio进行二次开发，DiagramControl的对象模型很类似Visio的相关对象模型，如对于工具栏的形状，称之为模具（Stencil），Visio也是称之为Stencil, DiagramControl里面的很多接口名称依旧采用Stencil进行命名，因此估计也是借鉴了很多Visio的对象设计知识，如果您对Visio二次开发感兴趣，可以参考我的随笔文章《Visio二次开发》，里面有很多相关的内容。
而如果想了解这个控件的相关知识和使用，参考官网的案例和说明应该是比较好的教程（https://docs.devexpress.com/WindowsForms/118290/controls-and-libraries/diagrams/getting-started ）。
1、DiagramControl控件的使用

DiagramControl是一个界面控件，类似Visio SDK里面的DrawingControl的存在，可以通过它进行图形的绘制，各种窗口的显示和隐藏，以及跟踪各种事件的处理。
DiagramControl控件拖动到窗体中后，会自动增加一些属性窗口，上排的绘图工具中的按钮是我添加的，用来测试该控件的一些属性的控制。

 
1）属性窗口的显示和隐藏（折叠）
这个通过控制diagramControl1.OptionsView.PropertiesPanelVisibility 属性就可以实现对这个属性窗口的控制了。

 里面显示一些系统位置和内容信息，以及一些自定义信息的窗口，后面我会介绍如何自定义处理这些模具的属性。
通过按钮处理的代码，我们可以实现对这个窗口的显示或者隐藏处理。

1. //切换属性窗口的显示或关闭
2. var status = diagramControl1.OptionsView.PropertiesPanelVisibility;
3. diagramControl1.OptionsView.PropertiesPanelVisibility = (status == PropertiesPanelVisibility.Visible ? PropertiesPanelVisibility.Collapsed : PropertiesPanelVisibility.Visible);

复制代码

2）模具形状窗口的显示或隐藏
模具形状的窗口，它是放在一个面板里面，我们只需要通过控制该面板的显示或者隐藏就可以了，如下代码所示。
 

1. //切换模具形状窗口的显示或关闭
2. var status = diagramToolboxDockPanel1.Visibility;
3. diagramToolboxDockPanel1.Visibility = (status == DevExpress.XtraBars.Docking.DockVisibility.Visible ? DevExpress.XtraBars.Docking.DockVisibility.Hidden : DevExpress.XtraBars.Docking.DockVisibility.Visible);

复制代码

或者通过控件的Toolbar属性进行控制，一样的效果。

1. //切换模具形状窗口的显示或关闭
2. var status = this.diagramControl1.OptionsView.ToolboxVisibility;
3. this.diagramControl1.OptionsView.ToolboxVisibility = status == ToolboxVisibility.Closed ? ToolboxVisibility.Full : ToolboxVisibility.Closed;

复制代码

 
3）放大缩小窗口的显示或者隐藏
同样我们也可以控制放大缩小窗口的显示或者隐藏，它也是图形绘制的一个常见的窗口。我们只需要判断或者设置diagramControl1.OptionsView.ShowPanAndZoomPanel 属性就可以了，如下代码所示。

1. //切换放大缩小窗口的显示或关闭
2. var status = diagramControl1.OptionsView.ShowPanAndZoomPanel;
3. diagramControl1.OptionsView.ShowPanAndZoomPanel = !status;

复制代码

4）其他属性的处理
另外，我们可以通过控制一些属性，实现对标尺、网格、只读视图等模式进行控制。

1. //是否显示标尺
2. this.diagramControl1.OptionsView.ShowRulers = this.chkRuler.Checked;
3. //是否显示网格
4. this.diagramControl1.OptionsView.ShowGrid = this.chkGrid.Checked;
5. //是否只读视图
6. this.diagramControl1.OptionsProtection.IsReadOnly = this.chkReadOnly.Checked;

复制代码

 
2、绘图的处理事件

在绘制图形的时候，一般来说我们可能需要切换点选模式或者连接线模式，因此可以通过它的属性ActiveTool进行设置。在点选模式下，可以对图形进行拖动、放大缩小、旋转等处理，连接线模式下，则会加亮连接点，便于自动绘制连接线。

1. private void btnPointerMode_Click(object sender, EventArgs e)
2. {
3.     diagramControl1.OptionsBehavior.ActiveTool = diagramControl1.OptionsBehavior.PointerTool;
4. }
6. private void btnConnectorMode_Click(object sender, EventArgs e)
7. {
8.     diagramControl1.OptionsBehavior.ActiveTool = diagramControl1.OptionsBehavior.ConnectorTool;
9. }

复制代码

当然，我们也可以通过对鼠标行为的分析来进行控制，如果鼠标悬停或者放置在图形上，就自动切换模式为连接线模式，否则为点选模式，那么只需要判断鼠标的移动行为即可自动处理，如下代码所示。

1.         /// <summary>
2.         /// 实现对图形自动切换到连接点模式
3.         /// </summary>
4.         private void diagramControl1_MouseMove(object sender, MouseEventArgs e)
5.         {
6.             if (e.Button == MouseButtons.Left)
7.                 return;
9.             DiagramItem item = diagramControl1.CalcHitItem(e.Location);
10.             if (item == null)
11.             {
12.                 diagramControl1.OptionsBehavior.ActiveTool = diagramControl1.OptionsBehavior.PointerTool;
13.                 return;
14.             }
15.             else if (item is DiagramConnector)
16.             {
17.                 diagramControl1.OptionsBehavior.ActiveTool = diagramControl1.OptionsBehavior.ConnectorTool;
18.                 return;
19.             }
21.             Rect itemBounds = new Rect(new Point(item.Position.X, item.Position.Y), new Size(item.Width, item.Height));
22.             PointFloat documentPoint = diagramControl1.PointToDocument(new PointFloat(e.Location));
23.             DiagramHitInfo[] hitInfo = diagramControl1.CalcHitInfo(documentPoint);
24.             if (itemBounds.Contains(new Point(documentPoint.X, documentPoint.Y)))
25.             {
26.                 itemBounds.Inflate(-5, -5);
27.                 if (!itemBounds.Contains(new Point(documentPoint.X, documentPoint.Y)))
28.                 {
29.                     diagramControl1.OptionsBehavior.ActiveTool = diagramControl1.OptionsBehavior.ConnectorTool;
30.                     return;
31.                 }
32.             }
33.             diagramControl1.OptionsBehavior.ActiveTool = diagramControl1.OptionsBehavior.PointerTool;
34.         }

复制代码

另外图形的保存xml、PNG、PDF处理和加载代码如下所示。

1. /// <summary>
2. /// 保存XML和图片文件
3. /// </summary>
4. private void SaveXml()
5. {
6.     var xml = Path.Combine(Application.StartupPath, "MyFlowShapes.xml");
7.     diagramControl1.SaveDocument(xml);
9.     var pngFile = Path.Combine(Application.StartupPath, "MyFlowShapes.png");
10.     diagramControl1.ExportDiagram(pngFile);
11. }

复制代码

1. private void btnLoadXml_Click(object sender, EventArgs e)
2. {
3.     var xml = FileDialogHelper.OpenXml();
4.     if(!string.IsNullOrEmpty(xml))
5.     {
6.         diagramControl1.LoadDocument(xml);
7.     }
8. }

复制代码

最终案例的效果如下所示。

3、注册自定义的形状

在实际的图形绘制开发中，我们可以需要创建一些指定的形状模具，那么我们弄好后一般可以存放在XML中，然后进行加载到控件上来，如下代码就是注册自定义的形状的处理。

1. /// <summary>
2. /// 注册自定义的形状。
3. /// 自定义图形是以XML文件形式进行保存，图形需要按照规定XML格式进行绘制
4. /// </summary>
5. private void LoadShapes2()
6. {
7.     var projectName = "SmallExampleDemo.Examples.XtraDiagram";
8.     using (var stream = Assembly.GetExecutingAssembly().GetManifestResourceStream(projectName + ".CustomContainers.xml"))
9.     {
10.         var stencil = DiagramStencil.Create(MyStencilId, MyStencilName, stream, shapeName => shapeName);
11.         DiagramToolboxRegistrator.RegisterStencil(stencil);
12.     }
13.     diagramControl1.SelectedStencils = new StencilCollection(MyStencilId);//(MyStencilId, BasicShapes.StencilId);
14. }

复制代码

 我们只需要设置选中的图形就可以了，其他有需要的可以从More Shapes中选择即可。
我们如果需要在属性窗口中显示自定义的属性，那么我们需要一些代码开发才能实现。

 我们首先需要继承一个DiagramShape的子类，然后实现自己自定义的属性定义，如下代码所示。

对自定义属性的处理，需要在事件中实现
diagramControl1.CustomGetEditableItemProperties += DiagramControl_CustomGetEditableItemProperties;
通过对它进行判断可以实现自定义属性的显示处理

1. void DiagramControl_CustomGetEditableItemProperties(object sender, DiagramCustomGetEditableItemPropertiesEventArgs e)
2. {
3.     if (e.Item is DiagramShapeEx)
4.     {
5.         e.Properties.Add(TypeDescriptor.GetProperties(typeof(DiagramShapeEx))["Status"]);
6.         e.Properties.Add(TypeDescriptor.GetProperties(typeof(DiagramShapeEx))["TypeName"]);
7.     }
8. }

复制代码

 然后我们可以注册创建自己的模具形状集合，如下代码所示。

1. /// <summary>
2. /// 创建自定义的模具
3. /// </summary>
4. /// <returns></returns>
5. DiagramStencil CreateCustomDrawShapesStencil()
6. {
7.     var stencilId = "CustomedFlowShape";
8.     var stencilName = "流程图";
9.     var shapeSizeSmall = new Size(100, 37.5);
10.     var shapeSize = new Size(100, 75);
12.     DiagramControl.ItemTypeRegistrator.Register(typeof(DiagramShapeEx));
13.     var stencil = new DiagramStencil(stencilId, stencilName);            
15.     //流程类型
16.     stencil.RegisterTool(new FactoryItemTool("StartEnd", () => "流程开始", diagram => {
17.         var shape = new DiagramShapeEx(BasicFlowchartShapes.StartEnd, "流程开始");
18.         shape.Appearance.BackColor = Color.Red;
19.         return shape;
20.     }, shapeSizeSmall));
21.     stencil.RegisterTool(new FactoryItemTool("Decision", () => "流程条件", diagram => {
22.         var shape = new DiagramShapeEx(BasicFlowchartShapes.Decision, "流程条件");
23.         shape.Appearance.BackColor = Color.FromArgb(199, 115, 1);//Color.Red;
24.         return shape;
25.     }, shapeSize));

复制代码

这两个流程开始，流程条件，我们直接是从 BasicFlowchartShapes 集合中借用过来，构建自己的自定义对象的，默认创建的对象是方形的。
如果我们需要动态构建其他自定义类型，我们可以指定它的颜色等样式，从而构建不同类型的图形。

1. //循环添加相关流程节点
2. var procNames = new List<string> { "审批", "归档", "阅办", "会签", "领导批示分阅"};
3. //定义几个初始化颜色顺序
4. var colors = new List<Color> { Color.DeepSkyBlue, Color.ForestGreen, Color.Violet, Color.Yellow, Color.Blue, Color.Orange, Color.Indigo, Color.Purple, Color.Black, Color.Brown, Color.Pink };
5. int i = 0;
6. foreach (string name in procNames)
7. {
8.     var shapeId = string.Format("Process_{0}", i++);
10.     stencil.RegisterTool(new FactoryItemTool(shapeId, () => name, diagram =>
11.     {
12.         var shape = new DiagramShapeEx(name, Status.Inactive);
13.         var index = procNames.IndexOf(name);
14.         var color = colors[index % 10];//Color.Red;
15.         var fontColor =  (color == Color.Yellow) ? Color.Black : Color.White;
17.         //没什么作用
18.         //shape.ThemeStyleId = GetStyle(index); //从Accent1样式开始  DiagramShapeStyleId.Styles[index];//                  
19.         shape.Appearance.BackColor = color;
20.         shape.Appearance.BorderSize = 3;
21.         shape.Appearance.Font = new Font("宋体", 12f, FontStyle.Bold);
22.         shape.Appearance.ForeColor = fontColor;
23.         return shape;
24.     }, shapeSize));
25. }

复制代码

这样就有不同颜色的图形对象了。

 根据这些我们就可以绘制出自己的各种流程图了，并且也可以根据数据库的信息，进行动态绘制展示。

 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！