This topic explains how to configure the connection points of diagram nodes in the xamDiagram™ control. This would be necessary if you use custom nodes or need to customize the pre-set connection points of the standard nodes.
The following topics are prerequisites to understanding this topic:
This topic contains the following sections:
Connection points are the points on a node where diagram connections can start/end. A connection point for a node is specified by a name and coordinates.
Name – used for explicitly specifying a connection point for a connection through the connection’s StartNodeConnectionPointName/ EndNodeConnectionPointName properties; therefore, all names of connection points for a node should be unique.
Coordinates – relative to the node’s rectangle. The coordinates are in the range 0,0 (top-left) to 1,1 (bottom-right).
Each connection point is represented by a DiagramConnectionPoint object exposing Name and Position properties.
When using one of the predefined shape types set through the DiagramNode.ShapeType property, the node’s ConnectionPoints collection is pre-populated with a few points according to the node type. For custom node shapes, no connection points are added by default.
The following table explains briefly the configurable aspects of diagram nodes connection points and maps them to the properties that configure them.
Connection points for a node are specified through the ConnectionPoints property. You can use the Add and Remove methods of the DiagramConnectionPointCollection.
The following table maps the desired configuration to the property settings that manage it.
The following screenshot demonstrates how a node in the xamDiagram would look when its connection point presenters are visible as a result of the code below.
Following is the code that implements this example.
In XAML:
<ig:XamDiagram x:Name="Diagram">
<ig:DiagramNode>
<ig:DiagramNode.ConnectionPoints>
<ig:DiagramConnectionPoint Name="Position1" Position="0,0"/>
<ig:DiagramConnectionPoint Name="Position2" Position="0.25,0.25"/>
<ig:DiagramConnectionPoint Name="Position3" Position="0.5,0.5"/>
<ig:DiagramConnectionPoint Name="Position4" Position="0.75,0.75"/>
<ig:DiagramConnectionPoint Name="Position5" Position="1,1"/>
</ig:DiagramNode.ConnectionPoints>
</ig:DiagramNode>
</ig:XamDiagram>The following topics provide additional information related to this topic.