1. WPF流程图三大核心组件解析
第一次用WPF做流程图时，我盯着屏幕上那些会动的连接线发了半天呆——它们怎么能像橡皮筋一样跟着节点移动呢？后来拆解发现，整个系统的核心就是Node（节点）、Port（端口）和Link（连接线）这三个组件的配合。就像搭积木，每个部件都有明确的职责边界，组合起来却能实现复杂的交互。
Node相当于流程图中的功能模块，比如"用户登录"、"数据校验"这样的处理单元。它最聪明的地方在于用X/Y坐标管理位置，配合ZIndex控制图层叠加。我遇到过节点拖拽时被遮挡的问题，就是靠动态调整ZIndex解决的——选中节点时将其ZIndex设为1，其他保持0，这样选中项永远显示在最上层。
Port分为InputPort和OutputPort两种，就像水管接头。OutputPort可以接多个InputPort（像函数返回多个值），但InputPort只能接一个OutputPort（参数输入唯一性）。这里有个设计细节：端口继承自ListBoxItem，这样就能复用选中状态样式。记得有次客户要求端口悬停变色，直接改ControlTemplate就搞定了。
Link最让人头疼的是路径计算。SourcePoint和TargetPoint变化时，UpdatePolyline方法会根据节点相对位置生成不同的折线路径。比如当源节点在左侧时走直线，在右侧时就要绕个"几"字形避免交叉。实测发现15像素的偏移量视觉效果最舒服，这个数值可以按需调整。
提示：所有坐标转换都要用TransformToAncestor方法，确保计算基于画布坐标系而非局部坐标
2. 连接线创建的完整事件链
拖拽创建连接线的过程，就像玩数字接龙游戏。当鼠标在OutputPort按下时，触发链式反应：
- OnMouseLeftButtonDown创建新Link对象，初始化Source为当前端口
- MouseMove事件持续更新Link的TargetPoint为鼠标位置
- IsNear方法实时检测附近端口（距离≤10像素自动吸附）
- MouseUp时若找到合法InputPort，完成连接；否则销毁Link
// OutputPort的鼠标按下事件示例 protected override void OnMouseLeftButtonDown(MouseButtonEventArgs e) { Link link = new Link(); link.Source = this; // 设置源端口 link.TargetPoint = this.Center; GraphControlParent.LinksControl.Items.Add(link); }遇到过最坑的问题是事件冒泡。有次拖动节点时莫名创建了新连接线，原来是没设置e.Handled=true导致事件向上传递。建议在所有鼠标事件最后都加上这行代码，就像给代码上保险。
端口吸附的算法其实很简单：计算鼠标位置与端口中心的欧式距离。我优化过三次判断逻辑：
- 第一版用矩形区域检测，会有误判
- 第二版加上了同节点端口过滤
- 最终版引入类型校验，确保输入输出端口不会错接
3. 动态连接线的数学魔术
Link类的UpdatePolyline方法是个宝藏函数，它用初中几何知识解决了连接线走向问题。来看两种典型场景：
场景1：源节点在左
// 插入两个中间点形成直角折线 Point p1 = new Point(SourcePoint.X + vX/2, SourcePoint.Y); Point p2 = new Point(SourcePoint.X + vX/2, TargetPoint.Y); Points = [SourcePoint, p1, p2, TargetPoint];场景2：源节点在右
// 添加Y轴偏移量形成阶梯路径 Point p1 = new Point(SourcePoint.X, SourcePoint.Y + offsetY); Point p2 = new Point(TargetPoint.X - offsetX, p1.Y); Point p3 = new Point(p2.X, TargetPoint.Y); Points = [SourcePoint, p1, p2, p3, TargetPoint];实际项目中我扩展了智能避让功能：当检测到连接线可能穿过其他节点时，自动增加转折点。这需要遍历所有节点做碰撞检测，对性能有些影响，建议在布局稳定后再启用。
箭头绘制也有讲究。Polygon对象根据TargetPoint动态生成三角形：
Polygon.Points = new PointCollection() { TargetPoint, new Point(TargetPoint.X - 15, TargetPoint.Y - 5), new Point(TargetPoint.X - 15, TargetPoint.Y + 5) };4. 数据流与UI的同步艺术
最精妙的部分是数据绑定的连锁反应。当OutputPort的OutputValue变化时：
- 通过DependencyProperty自动通知
- 遍历AttachedLinks集合
- 更新每个Link的Target端InputValue
- 触发InputPort的Validation检查
// OutputPort的值变更处理 private static void OnOutputValueChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { foreach (var link in OutputPort.AttachedLinks) { link.Target.InputValue = e.NewValue; } }在金融项目里，我给端口加了类型校验功能。比如"金额计算"节点的输出端口只能连接"数字类型"输入端口，这通过ExpectationType属性实现。当类型不匹配时，连接线会变红色报警，这个视觉反馈对用户非常友好。
性能优化的小技巧：批量更新时临时设置CanNotifyOutputChanged=false，避免频繁触发绑定。等所有数据准备好再一次性通知UI更新，这招让我们的流程图在渲染100+节点时依然流畅。
