简介这是一份基于WPF框架实现的Diagram画板及流程图编辑工具源码适合希望在桌面应用中集成图形化设计、拖拽式节点编辑与连线功能的C#开发者学习。资源共2595个文件涵盖1645个.cs逻辑代码、298个.xaml界面布局及215个.svg矢量图标等压缩包约18.76MB可从中看到完整WPF项目的组织结构。已有1289人学习下载说明其受到较多关注。读者可以了解WPF中自定义画布、节点连线、图形缩放与交互操作的实现思路获得一套可直接运行的画板基础框架并借助配套的SVG/PNG图标与示例代码快速搭建自己的流程图应用。无论是初学WPF数据可视化还是希望快速搭建可视化编辑器原型都能从中获得有价值的参考。1. WPF Diagram 画板为什么值得用数据模板搭而不是直接堆控件如果只是临时画几个方块和箭头WinForms 时代的做法是直接在 Canvas 上 Add 一堆 Rectangle 和 Line事件挂上去、坐标存下来五分钟就能看到效果。但当你把目标定成「包含流程图 FlowChart」的 Diagram 画板这套做法会在第一个需求变更时崩掉连线要跟随节点移动、节点要支持类型扩展、框选和撤销回退要接入业务数据。真正让一个 WPF Diagram 画板具备长期维护价值的不是画布渲染得有多快而是「节点和连线在 ViewModel 层是什么结构」这一层设计。WPF 做 Diagram 画板的核心优势在于它天然适合把可视化对象和业务数据解耦。一个流程图节点在业务上是一条NodeModel记录它有 Id、类型、名称、输入输出端口集合在 UI 上它只是一个DataTemplate渲染出来的控件。ItemsControl Canvas 这种组合几乎成了桌面端流程编辑器的标准骨架后面叠加拖拽、缩放、框选都在这套骨架上进行。这篇文章会把 Diagram 画板拆成布局容器、节点交互、连线模型三个层面来讲最后补上流程图 FlowChart 特有的校验和视图变换技巧适合已经能用 WPF 写普通 CRUD 界面、想往图形交互方向深入的开发者。先讲清楚容器怎么选再给代码你会看到大多数坑其实出在事件坐标和绑定策略上。2. 用 ItemsControl Canvas 搭 Diagram 画板的最小容器骨架2.1 为什么 ItemsControl 比直接操作 Canvas.Children 更适合画板常见做法是用一个 Canvas 作为根元素然后在代码里向canvas.Children.Add(rect)添加节点控件。这样做在节点少于二十个时问题不大一旦节点多了以后会暴露三个问题第一节点的位置坐标散落在每次 Add 时的Canvas.SetLeft调用里无法集中管理第二节点的选中状态、类型切换、属性编辑都需要额外写事件和查找逻辑第三无法利用 WPF 的 ItemsControl 数据绑定机制对节点集合做统一操作比如删除节点后界面的同步更新要手动处理。我一般会把画板搭成 ItemsControl 的结构ItemsPanel 替换为 Canvas让数据集合驱动界面。这样的好处是节点增删只需要操作ObservableCollectionNodeModel界面会自动刷新节点位置通过Canvas.Left和Canvas.Top的绑定来维护坐标数据存在 ViewModel 里后续做保存、加载、对齐功能都不需要碰 UI 控件。对于 FlowChart 这种节点数量通常在几十到几百之间的场景ItemsControl 的性能足够不需要引入虚拟化容器去增加复杂度。2.2 最小可运行的 XAML 骨架与绑定策略先看最基础的 XAML 结构这里采用 MVVM 的方式组织画板根节点是一个用户控件里面放置 ItemsControlGrid ItemsControl x:NameDiagramItemsControl ItemsSource{Binding Nodes} ItemsControl.ItemsPanel ItemsPanelTemplate Canvas x:NameDiagramCanvas BackgroundTransparent ClipToBoundsTrue / /ItemsPanelTemplate /ItemsControl.ItemsPanel ItemsControl.ItemContainerStyle Style TargetTypeContentPresenter Setter PropertyCanvas.Left Value{Binding X} / Setter PropertyCanvas.Top Value{Binding Y} / /Style /ItemsControl.ItemContainerStyle ItemsControl.ItemTemplate DataTemplate DataType{x:Type local:NodeModel} ContentControl Template{StaticResource NodeTemplate} / /DataTemplate /ItemsControl.ItemTemplate /ItemsControl /Grid这段 XAML 的关键点是ItemsSource绑定到节点集合ItemsPanel替换成CanvasItemsControl 会把每个容器元素这里是 ContentPresenter放到 Canvas 上ItemContainerStyle中把容器元素的Canvas.Left和Canvas.Top绑定到模型上的 X 和 Y 属性。这样节点在画布上的位置完全由数据驱动后续移动节点时只需更新模型的 X 属性。ContentControl引用的NodeTemplate是节点的外观模板可以在资源字典中定义。一个最简的节点模板要包含一个可以作为拖拽抓取区的边框、一个显示节点名称的 TextBlock 以及若干连接点。这里要注意ItemContainerStyle中绑定的是ContentPresenter的属性而不是节点控件本身的属性因为 ItemsControl 生成的项目容器就是 ContentPresenter。如果你把绑定写到DataTemplate里的控件上位置信息会冗余拖动时容易产生偏差。2.3 连线的容器层级与覆盖顺序处理FlowChart 画板除了节点层还需要一个连线层。连线不能和节点放在同一个 ItemsControl 里否则会出现两个问题连线被节点的背景遮挡或者节点拖动时连线的命中测试被节点抢占。常见做法是把画板分成两个 ItemsControl下层放连线上层放节点两者使用同一个 Canvas 坐标空间Grid ItemsControl ItemsSource{Binding Connections} IsHitTestVisibleFalse ItemsControl.ItemsPanel ItemsPanelTemplate Canvas x:NameConnectionCanvas / /ItemsPanelTemplate /ItemsControl.ItemsPanel ItemsControl.ItemTemplate DataTemplate Path Data{Binding PathGeometry} StrokeGray StrokeThickness2 / /DataTemplate /ItemsControl.ItemTemplate /ItemsControl ItemsControl ItemsSource{Binding Nodes} !-- 同前一个例子Canvas 作为面板 -- /ItemsControl /Grid这里给连线层设置了IsHitTestVisibleFalse让鼠标事件能够穿透连线命中下面的节点。否则当你框选节点时鼠标落到一条连线上会选不中任何东西。但这里有个细节如果你需要在画布空白处拖拽进行多选Rubberband 框选Canvas 本身必须是可命中测试的。所以通常会在外层套一个透明背景的 Canvas 专门处理鼠标框选事件连线层和节点层都作为它的子级。这样既不让连线干扰节点操作又能让画布本身的框选逻辑正常工作。分层设计要配合Canvas.ZIndex使用确保节点层在上、连线层在下、框选层在最上层。3. FlowChart 节点的拖拽交互从 Mouse 事件到 MVVM 属性同步3.1 节点拖拽不能用控件自身的 MouseMove根因在坐标和容器很多人实现节点拖拽时会直接在节点模板的根元素上挂MouseLeftButtonDown事件然后在事件处理器里用e.GetPosition(节点自身)计算位移再更新Canvas.SetLeft。这种做法在固定坐标的画板上能跑通一旦引入缩放或者节点容器层级变多位置偏差就会累积。更深层的问题在于拖拽移动的是「节点在画布上的坐标」而事件源是「节点内部的某个子元素」两者的坐标空间不一致必须转换到同一个参考系下。我常用的方案是在节点模板根元素上挂三件套事件MouseLeftButtonDown、MouseMove、MouseLeftButtonUp。拖拽开始时记录鼠标相对节点的初始偏移移动时把鼠标当前坐标转换到画布坐标系减去偏移就是新坐标。具体实现如下public class NodeDragBehavior { private Point _dragStartOffset; private bool _isDragging; private FrameworkElement _draggedElement; private Canvas _canvas; public void Attach(FrameworkElement element, Canvas canvas) { _draggedElement element; _canvas canvas; element.MouseLeftButtonDown OnDragStart; element.MouseMove OnDragMove; element.MouseLeftButtonUp OnDragEnd; } private void OnDragStart(object sender, MouseButtonEventArgs e) { var node (sender as FrameworkElement).DataContext as NodeModel; if (node null) return; var mousePos e.GetPosition(_canvas); _dragStartOffset new Point(mousePos.X - node.X, mousePos.Y - node.Y); _isDragging true; (sender as FrameworkElement).CaptureMouse(); e.Handled true; } private void OnDragMove(object sender, MouseEventArgs e) { if (!_isDragging) return; var node (sender as FrameworkElement).DataContext as NodeModel; var mousePos e.GetPosition(_canvas); node.X Math.Max(0, mousePos.X - _dragStartOffset.X); node.Y Math.Max(0, mousePos.Y - _dragStartOffset.Y); } private void OnDragEnd(object sender, MouseButtonEventArgs e) { _isDragging false; (sender as FrameworkElement).ReleaseMouseCapture(); } }3.2 为什么直接更新 DataContext.X 能自动改变 Canvas.Left这段代码里没有出现一句Canvas.SetLeft你可能会问位置是怎么同步的。答案来自于 XAML 中ItemContainerStyle里的绑定Canvas.Left绑定到了XCanvas.Top绑定到了Y。当node.X被赋值后绑定系统会把新值推送给ContentPresenter的Canvas.Left附加属性WPF 布局系统检测到位置变化后重新排列。因此拖拽的核心逻辑只是更新 ViewModel 属性UI 的刷新交给绑定机制完成。这里有个需要注意的类型问题Canvas.Left是double类型NodeModel.X也必须是double如果定义成int会频繁触发类型转换性能会有轻微损耗更重要的是小数坐标会被截断缩放画布时节点会产生抖动。e.Handled true在这段代码里很关键。它表示该鼠标事件已被处理不会继续向上冒泡。如果省略了这句鼠标事件会穿透到外层画布的框选逻辑上导致拖拽节点的同时框选矩形也被拉了出来。此外CaptureMouse()的作用是防止鼠标移出节点控件后事件中断不捕获的话快速拖拽会把节点丢在半路。这两个细节是在实际项目中反复踩过的坑代码里顺手注释一下并不过分。3.3 节点坐标小数精度问题和吸附网格的取舍直接往node.X写鼠标坐标会得到大量小数位例如math.Round后是487.3372801。如果不做处理节点位置会在一系列微小位移中不停触发属性变更通知虽然对几十个节点的画板不成问题但对 FlowChart 这种节点通常会连接很多连线的场景每次坐标变更都会引起连线重绘性能损失会叠加到让拖拽变得卡顿。常见解法和吸附网格结合node.X Math.Round((mousePos.X - _dragStartOffset.X) / GridSize) * GridSize; node.Y Math.Round((mousePos.Y - _dragStartOffset.Y) / GridSize) * GridSize;其中GridSize是网格间距通常取 10 或 20。取整后再乘回去等效于让节点吸附到最近的网格交叉点。这样做有两个收益拖拽时连线的重绘频率从每像素一次降为每网格一次流程图画出来天然对齐省去后续的对齐功能。如果业务上有自由布局需求可以把GridSize设为 1不影响这套设计。流程图 FlowChart 一般建议开启吸附因为流程节点之间的连线要求视觉规整这在评审演示时观感差别非常大。连线的更新时机也依赖节点坐标的PropertyChanged通知。当NodeModel.X改变时需要联动通知所有与该节点相连的连线的路径几何体重新生成public class NodeModel : INotifyPropertyChanged { private double _x; public double X { get _x; set { if (_x.Equals(value)) return; _x value; OnPropertyChanged(nameof(X)); OnPropertyChanged(nameof(CenterX)); foreach (var connection in RelatedConnections) { connection.RefreshGeometry(); } } } }这就是为什么RefreshGeometry()方法存在于ConnectionModel中并且由NodeModel主动调用而不是靠CollectionChanged去遍历全部连线。一个节点连接几十条线的时候这两种做法的效率差距很明显。4. FlowChart 连线模型Port 锚点、Bezier 路径与命中测试4.1 连线不能直接配两个节点必须通过 Port 锚点连接如果 FlowChart 的连线模型只存FromNodeId和ToNodeId会遇到一个典型的流程设计困扰一个「判断」节点需要派生出两个分支两个分支分别连接不同的后续节点这时连线需要区分自己到底是从判断节点的「是」出口出、还是「否」出口出。单纯记录节点 ID 无法表达这种语义。因此连线模型需要引入端口Port概念每个端口属于一个节点并且带方向public enum PortDirection { Input, Output } public class PortModel { public string Id { get; set; } public string NodeId { get; set; } public PortDirection Direction { get; set; } public string Name { get; set; } // True, False, Default 等 public double OffsetX { get; set; } public double OffsetY { get; set; } public Point GetPosition(NodeModel node) { return new Point(node.X OffsetX, node.Y OffsetY); } } public class ConnectionModel { public string FromPortId { get; set; } public string ToPortId { get; set; } public PathGeometry PathGeometry { get; set; } public void RefreshGeometry(NodeModel fromNode, NodeModel toNode) { // 根据端口位置计算贝塞尔曲线 } }OffsetX和OffsetY是端口在节点内部相对左上角的位置通常在节点模板创建时根据端口类型布局自动分配。比如输入端口统一放在节点左侧垂直居中的位置输出端口放在右侧。这套模型天然支持 FlowChart 的多分支场景判断节点上有两个输出端口名称分别为 True 和 False各连一条线出去流程语义清晰界面渲染也能区分。4.2 贝塞尔曲线的控制点计算与拐点控制两条连线如果都是直线当节点被拖动到同一水平线时直线会变得几乎平行难以看清。贝塞尔曲线在这类图形编辑器中几乎是标准选择。计算曲线的控制点是整个连线渲染的核心逻辑public PathGeometry BuildBezierPath(Point from, Point to) { var geometry new PathGeometry(); var figure new PathFigure { StartPoint from }; double dx Math.Abs(to.X - from.X); double offset Math.Min(Math.Max(dx * 0.5, 40), 160); var control1 new Point(from.X offset, from.Y); var control2 new Point(to.X - offset, to.Y); figure.Segments.Add(new BezierSegment(control1, control2, to, true)); geometry.Figures.Add(figure); return geometry; }控制点的 X 坐标在起始点和结束点之间沿水平方向偏移。Math.Max(dx * 0.5, 40)保证两个节点距离很近时控制点依然有一定间距曲线不会压成一条直线Math.Min(..., 160)限制最大偏移量防止节点相距很远时曲线过于扁平。Math.Abs(to.X - from.X)用于兼容两个节点水平方向相对位置不同的场景。如果目标节点在起始节点左侧dx * 0.5依然作为偏移量但控制点会在相反方向自然形成 S 形曲线。需要强调的一点是控制点 Y 坐标始终等于源或目标端口的 Y 坐标这保证了曲线在端口处切线水平视觉上不会出现尖锐的转折。也可以在连线上加一个箭头做法是在目标点附近画一个小三角形并让它旋转到对准目标端口的方向。箭头的位置和角度需要通过计算贝塞尔曲线在终点处的切线来获取比较取巧的做法是在终点处取一小段近似直线来估算方向。如果后续计划支持折线型连线可以在BezierSegment和PolyLineSegment之间做一个枚举切换底层重建就够了。4.3 连线命中测试不要依赖 Path 的默认命中区域用户在 FlowChart 编辑器中点击一条连线通常期望能选中它、删除它或修改它的属性。Path控件默认的命中区域是其填充区域而贝塞尔连线只是描边没有填充。这意味着直接给Path挂MouseLeftButtonDown事件只有精确点到那 2 像素宽的描边上才能触发用户操作精度要求非常高。我用的方案有两种第一种是给渲染连线的Path设置更粗的透明描边作为命中区域Grid Path Data{Binding PathGeometry} StrokeTransparent StrokeThickness12 FocusableFalse Path.Style Style TargetTypePath Setter PropertyStrokeThickness Value12 / Style.Triggers DataTrigger Binding{Binding IsSelected} ValueTrue Setter PropertyStroke ValueSkyBlue / /DataTrigger /Style.Triggers /Style /Path.Style /Path Path Data{Binding PathGeometry} StrokeGray StrokeThickness2 IsHitTestVisibleFalse / /Grid12 像素的透明描边层放在下面接收鼠标事件上面的可见细线禁止命中测试这样用户不需要精确点中线条本身点中连线附近的区域就能选中它。第二种方案是利用PathGeometry.HitTest做自编程命中检测适合需要精确控制命中区域的场景。连线命中后需要把ConnectionModel标记为选中。推荐的做法是在 DataTemplate 的根元素上挂MouseLeftButtonDown事件处理器通过DataContext as ConnectionModel获取连线模型并设置选中状态而不是去遍历查找界面元素。FlowChart 中连线选中通常伴随着颜色变化比如默认灰色变蓝色这个状态直接通过IsSelected绑定到 Path 的颜色变化不需要在事件里操作 UI 元素。5. 画布缩放、框选与 FlowChart 语义校验的三个常用技巧5.1 缩放用 RenderTransform 而不是 LayoutTransform注意坐标转换画布缩放是 Diagram 画板的必备功能常见做法是在 Canvas 外层套一个实现了ScaleTransform的容器。很多新手第一次做会写在LayoutTransform上结果容器尺寸变大导致滚动条和布局错乱。正确做法是用RenderTransform它不占用布局空间也不会改变 Canvas 的实际尺寸视觉上的缩放效果通过变换呈现Grid Grid.RenderTransform ScaleTransform x:NameViewportScale ScaleX{Binding ZoomLevel} ScaleY{Binding ZoomLevel} / /Grid.RenderTransform /Grid缩放后所有鼠标坐标都需要做逆变换把屏幕坐标转换成画布坐标系。这里有个容易出错的地方鼠标事件中拿到的坐标是相对事件源控件的必须先转换到套用了缩放变换的那个 Grid 上再应用逆变换private Point GetCanvasPosition(MouseEventArgs e, FrameworkElement viewport) { var relative e.GetPosition(viewport); var parentCanvas viewport as Grid; var inverse parentCanvas.RenderTransform.Inverse; return inverse.Transform(relative); }如果在拖拽节点时把这段坐标转换写错会出现鼠标和节点不同步的现象缩放超过 1 倍后节点跑得比鼠标快缩到 0.5 倍后节点跟不上鼠标。定位这类问题的方法是在MouseMove中输出原始屏幕坐标和逆变换后的画布坐标对比两者是否符合预期。网格吸附在缩放后依然要画在 Canvas 坐标系中而不是屏幕坐标系否则缩放级别变化时网格间距会变。5.2 Rubberband 框选用透明 Rect 画框按坐标相交筛选节点FlowChart 画板一般需要框选多个节点后统一移动或删除。实现框选的方式很多我用得比较顺手的是在节点层之上叠加一个透明的Rectangle鼠标按下时记录起点移动时实时更新矩形的位置和尺寸鼠标松开后遍历所有节点检查 BoundingBox 是否与该矩形相交private void OnMouseDown(object sender, MouseButtonEventArgs e) { var pos GetCanvasPosition(e, _viewport); _selectionStart pos; _rubberRect.Visibility Visibility.Visible; Canvas.SetLeft(_rubberRect, pos.X); Canvas.SetTop(_rubberRect, pos.Y); _rubberRect.Width 0; _rubberRect.Height 0; } private void OnMouseMove(object sender, MouseEventArgs e) { var pos GetCanvasPosition(e, _viewport); var x Math.Min(pos.X, _selectionStart.X); var y Math.Min(pos.Y, _selectionStart.Y); Canvas.SetLeft(_rubberRect, x); Canvas.SetTop(_rubberRect, y); _rubberRect.Width Math.Abs(pos.X - _selectionStart.X); _rubberRect.Height Math.Abs(pos.Y - _selectionStart.Y); var rect new Rect(x, y, _rubberRect.Width, _rubberRect.Height); _selection.Clear(); foreach (var node in Nodes) { var bounds new Rect(node.X, node.Y, node.Width, node.Height); if (rect.IntersectsWith(bounds)) { _selection.Add(node); } } }_selectionStart是鼠标按下时的画布坐标_selection是当前选中的节点集合。框选矩形要求必须使用IsHitTestVisibleTrue否则收不到 MouseMove。但这个过程有个坑如果 RubberRect 盖住了节点的区域鼠标事件会落在 RubberRect 上面而不是节点上导致节点拖拽失效。所以框选状态的判断要放在外层画布的MouseMove中而不是节点自己的MouseMove中并且在节点开始拖拽时需要忽略框选的后续动作。一个简单的状态机配合布尔变量可以避免这种冲突_isRubberSelecting开启后节点拖拽不再响应。5.3 FlowChart 语义校验端口类型匹配检查和孤立节点提示FlowChart 与普通 Diagram 的差异在于它是有流向语义的。判断节点的 True 出口只能连到合法的后续节点数据节点的输出端口的类型可能与某个处理节点的输入端口不兼容。常见做法是在完成连线操作后实时触发一次校验把非法连线直接拒绝或者把错误信息展示在界面上。端口类型匹配的代码如下private bool ValidateConnection(PortModel fromPort, PortModel toPort) { if (fromPort.Direction toPort.Direction) return false; var source PortTypes[fromPort.Id]; var target PortTypes[toPort.Id]; return source.IsCompatibleWith(target); } private void CheckFlowRules(IEnumerableConnectionModel connections, IEnumerableNodeModel nodes) { foreach (var connection in connections) { var fromPort GetPort(connection.FromPortId); var toPort GetPort(connection.ToPortId); if (!ValidateConnection(fromPort, toPort)) { connection.HasError true; connection.ErrorMessage $类型不匹配: {fromPort.Name} → {toPort.Name}; } } }这里的核心判断是方向不能相同且端口类型需要兼容。流程图还有一个常见的业务规则是「每个节点至少有一个输出端口被使用」除非它是终止节点。可以在校验逻辑中遍历所有输出端口统计被使用次数如果为零则标记警告。这个检查放得越早画图错误越少放到保存文件时才发现用户改起来就很痛苦。最后补一个技巧在节点模板的角落放一个ErrorTip显示区域通过HasError绑定的ToolTip展示具体错误文本不必单独弹出对话框打断用户画流程的节奏。本文还有配套的精品资源点击获取