Learn how to add connector functionality to a designer from WPF Diagram Designer Part 3

Learn about control templates, move, resize, and rotate from WPF Diagram Designer Part 1, and from the WPF Diagram Designer Part 2 Learning panel, thumbnails, border selection, and toolbox, we learned how to build basic movement of the graphics designer. , selection, size, rotation, thumbnail, box selection and other basic functions. For modeling support, flowcharts are an essential form of graphics, so how do we get the graphics designer to support drawing arrows between design objects? This article describes the connections in the graphics designer.

WPF Diagram Designer-part 3

There are several ways to do this, one is to provide a connection element in the toolbox, it is then dragged by the designer in two components, and one that provides the connection point by the component itself, and the user clicks on the connection point and drags it over to the other component's connection point, which is the second option. Because there may be many different relationships in modeling, the graphical designer in Openexpressapp's Metamodelengine takes the first approach, but provides a shortcut to the second way.

How to connect

With the following connection instructions, we can know that there are two concepts of connection connection and connection point connector, which are respectively supported by two decorative objects to display and manipulate.

If the mouse is released at the connection point, a Connection object is generated, which acts as a Designercanvas child object.

Connection, like Desingeritem, also implements the Iselectable selection interface, when a connection is selected, the Connectionadorner above connection displays two rectangles each rectangle is a thumb control, You can drag to change a connection point

	Move the mouse over an element, and there will be four connector around the element, which is defined in Connectordecoratortemplate, where the Designeritem template also defines part of the content. When the mouse is moved to one of the connector, the mouse pointer becomes a cross shape
	When the left mouse button is clicked on the connector, connector generates a connectoradorner that shows the current mouse position connected to the source connection point, and when the mouse moves, Designercanvas will be constantly checking to see if the mouse is on a potential target connection.