从WPF Diagram Designer Part 3学习如何给设计器增加连接线功能

从WPF Diagram Designer Part 3学习如何给设计器增加连接线功能2012-07-15 博客园周金根通过前面介绍的从WPF Diagram Designer Part 1学习控件模板、移动、改变大小和旋转和从WPF Diagram Designer Part 2学习面板、缩略图、框线选择和工具箱，我们学会了如何建立图形设计器的基本移动、选择、大小、旋转、缩略图、框选等基本功能。对于建模支持来说，流程图是必不可少的一种图形，那么我们如何让图形设计器支持在设计对象之间画上箭头呢？本篇将介绍图形设计器中的连接。

WPF Diagram Designer - Part 3

画连接线存在多种实现方式，一种是在工具箱中提供一个连接元素，然后由设计人员选择后在两个组件中拖拽；还有一种就是由组件自身提供连接点，用户点击这个连接点后拖拽到另一个组件的连接点之上，这篇文章采用的是第二种方案。由于在建模中可能会存在多种不同的关系，所以在OpenExpressApp的MetaModelEngine中的图形设计器将采用第一种方式，但是会提供第二种方式的快捷方式。

如何连接

通过以下连接说明，我们可以知道存在连接Connection和连接点Connector两个概念，这两个概念分别由两个装饰对象来支持显示和操作。

如果在连接点上释放鼠标，则生成一个Connection对象，这个对象作为DesignerCanvas的子对象。

Connection与DesingerItem一样，也实现了ISelectable选择接口，当选择连接时，Connection之上的ConnectionAdorner显示两个矩形每个矩形是一个Thumb控件，可以拖动更改连接点

	将鼠标移到一个元素上面，元素四周会出现四个Connector，这个是在ConnectorDecoratorTemplate中进行定义的，其中在 DesignerItem的模板也定义了一部分内容。当鼠标移动到其中一个 Connector上，鼠标指针会变成会十字形状
	当在connector上点击鼠标左键进行拖动时，connector将生成一个ConnectorAdorner，显示当前鼠标位置与源连接点的连线，当鼠标移动时，DesignerCanvas将在不断检查是否鼠标在潜在的目标连接点上