WPF 如何支撑一个灵活的流程图编辑器？

技术分享 4个月前 (11-12) 0 999+

关注

前言

软件开发领域，流程设计与可视化是提升系统可维护性、增强用户体验的重要手段。无论是工作流管理、业务逻辑编排还是算法流程展示，一个灵活、易用的流程节点编辑框架都能极大地提高开发效率与系统灵活性。

本文将推荐一款基于 WPF 的开源流程节点编辑框架，通过对其核心设计与实现逻辑的解析，带领大家从零开始手写一个具备基础功能的 WPF 流程图编辑器，为实际项目中的可视化流程开发提供有价值的参考。

项目介绍

一款基于WPF的图形化流程节点编辑工具，为大家提供一个直观、高效的流程设计与编辑环境。通过拖拽节点、连接线等操作，可以轻松开发复杂的流程图，实现业务逻辑的可视化表达。

项目功能

1、节点创建与编辑

支持多种类型的节点创建，包括但不限于开始节点、结束节点、处理节点、决策节点等。

通过简单的点击或拖拽操作，在画布上添加、删除或修改节点属性，如节点名称、颜色、形状等。

2、连线管理

节点间通过连线表示流程走向，提供灵活的连线创建与编辑功能。

轻松地在节点间绘制直线、曲线或折线，调整连线的起点与终点，甚至设置连线的条件表达式，实现条件分支。

3、布局调整与边界扩展

满足不同场景下的展示需求，支持画布的缩放、平移以及节点的自动布局功能。

根据需要调整画布大小，通过手势或按钮控制画布的显示范围。同时，框架还提供了边界扩展功能，当节点靠近画布边缘时，自动扩展画布大小，确保所有节点都能完整显示。

4、框选与拖动

支持框选多个节点进行批量操作，如移动、删除等。可以通过鼠标拖拽选择框，选中多个节点后进行统一操作。同时，框架还提供节点的拖动功能，用户可以拖动单个或多个节点到指定位置。

5、数据绑定与交互

支持与后端数据的绑定，将流程图中的节点属性与数据库字段或API接口关联，实现数据的动态展示与交互。

另外，框架还提供了事件处理机制，用户可以自定义节点点击、连线双击等事件的处理逻辑，增强流程图的交互性。

项目特点

1、界面友好

WPF的丰富UI控件与动画效果，提供直观、美观的操作界面。无论是节点的拖拽、连线的绘制还是属性的编辑，都能带来流畅的操作体验。

2、扩展性强

设计遵循模块化原则，各个功能模块相对独立，便于开发者根据需求进行二次开发或功能扩展。同时，框架提供丰富的API接口，方便与其他系统进行集成。

3、交互丰富

支持多种交互方式，如框选、拖动、右键菜单等，可以根据需要选择合适的交互方式，提高操作效率。

项目技术

1、MVVM设计模式

为了实现界面与逻辑的分离，提高代码的可维护性与可测试性，框架采用MVVM（Model-View-ViewModel）设计模式。通过数据绑定与命令机制，实现了视图与模型之间的松耦合。

2、自定义控件开发

针对流程节点编辑的特殊需求，开发一系列自定义控件，如节点控件、连线控件等。控件通过继承WPF的基础控件类，实现了特定的功能与行为。

4、事件处理与委托

通过事件处理与委托机制，实现用户交互的响应与处理。无论是节点的点击、连线的双击还是画布的缩放，都能通过事件处理函数实现相应的逻辑。

项目代码

框选拖动

/// <summary> /// 添加连线更新方法 /// </summary> /// <param name="selectedControls">选中的控件</param> /// <param name="Xoffset">连线位置X轴的偏移量</param> /// <param name="Yoffset">连线位置Y轴的偏移量</param> private void UpdateConnectionsForNode(List<Control> selectedControls, double Xoffset = 0, double Yoffset = 0) {     // 当前不存在连线的话直接结束     if (connections.Count == 0) return;      foreach (XNode node in selectedControls)     {         List<Connection> refConns = connections.FindAll(conn => IsChildOf(conn.FromPort, node) || IsChildOf(conn.ToPort, node));          refConns.ForEach(conn =>         {             Point p1 = PointAdd(GetPortCenter(conn.FromPort), new Point(Xoffset, Yoffset));             Point p2 = PointAdd(GetPortCenter(conn.ToPort), new Point(Xoffset, Yoffset));              var geometry = new PathGeometry();             var figure = new PathFigure { StartPoint = p1 };             var segment = CreateSegment("polyline", p1, p2);             figure.Segments.Add(segment);             geometry.Figures.Add(figure);             conn.Path.Data = geometry;         });     } }  // 点位相加 private Point PointAdd(Point p1, Point p2) {     return new Point(p1.X + p2.X, p1.Y + p2.Y); }  private bool IsChildOf(FrameworkElement child, FrameworkElement parent) {     var current = child;     while (current != null)     {         if (current == parent)             return true;         current = VisualTreeHelper.GetParent(current) as FrameworkElement;     }     return false; }

线条拖动 | 线条类型切换

private void OutputPort_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) {     if (sender is FrameworkElement outputPort)     {         fromPort = outputPort;         startPoint = GetPortCenter(outputPort);          currentPath = new System.Windows.Shapes.Path         {             Stroke = Brushes.MediumPurple,             StrokeThickness = lineThickness,             Data = new PathGeometry()         };         currentPath.MouseLeftButtonDown += Path_MouseLeftButtonDown;         currentPath.MouseEnter += Path_MouseEnter;         currentPath.MouseLeave += Path_MouseLeave;          MainCanvas.Children.Add(currentPath);         isConnecting = true;          e.Handled = true;     } }  private Point GetPortCenter(FrameworkElement port) {     var point = new Point(port.Width / 2, port.Height / 2);     // 将当前点相对于port的坐标转换为当前点相对于Canvas的坐标位置,Canvas会先获取point左上角的位置，然后再偏移point.X,point.Y     var position = port.TranslatePoint(point, MainCanvas);     return position; }  private PathSegment CreateSegment(string type, Point startPoint, Point endPoint) {     if (string.IsNullOrEmpty(type))         throw new Exception("type 类型不能为空");     PathSegment segment;     if (type == "polyline")     {         if (startPoint.X <= endPoint.X - 40) // 两边距离大于40         {             double centerX = (startPoint.X + endPoint.X) / 2;             var polyline = new PolyLineSegment             {                 Points = new PointCollection()                 {                     new Point(centerX,startPoint.Y),                     new Point(centerX,endPoint.Y),                     new Point(endPoint.X,endPoint.Y)    // 终点                 }             };             segment = polyline;         }         else         {             double centerY = (startPoint.Y + endPoint.Y) / 2;             var polyline = new PolyLineSegment             {                 Points = new PointCollection()                 {                     new Point(startPoint.X + 20,startPoint.Y),                     new Point(startPoint.X + 20,centerY),                     new Point(endPoint.X - 20,centerY),                     new Point(endPoint.X - 20,endPoint.Y),                     new Point(endPoint.X,endPoint.Y)    // 终点                 }             };             segment = polyline;         }     }     else     {         var bezier = new BezierSegment         {             Point1 = new Point(startPoint.X + 50, startPoint.Y),             Point2 = new Point(endPoint.X - 50, endPoint.Y),             Point3 = endPoint         };         segment = bezier;     }      return segment; }