This topic covers the alternative approaches used to configure the start and end points of diagram connections in xamDiagram™, either by specifying the nodes to connect to or by specifying the coordinates of the connection’s start and end points on the diagram space.
The following topics are prerequisites to understanding this topic:
This topic contains the following sections:
The position of a diagram item (node or connection) is determined relative to the coordinate system of the diagram; in this coordinate system, the top-left corner is considered the point of origin and has coordinates of 0, 0. The coordinate numbers represent an offset from the point of origin in pixels. The first number represents the horizontal offset to the right and the second number – the vertical offset in downward direction. The coordinates of a node represent the placement of its top-left corner. For connections, the coordinates are managed by separate properties for their start and end points or are determined by the positions of their snap points) . The following picture represents the coordinate system of a diagram and a node positioned in it at coordinates of 100,100.
The two possible methods for configuring the start and end points of diagram connections in the xamDiagram control are:
Relative – by specifying the nodes to connect to – the start and the end node, respectively.
This approach requires associating the connection with a start and end node. In this case, the start and end points of the connection are controlled by these nodes automatically adjusting the connection whenever the node moves. * Absolute – by specifying the coordinates of the connection’s start and end points on the diagram space.
A mixed approach, specifying a node at one of the connection ends of and coordinates for the other end, is also allowed.
The configuration is managed in either approach, through the connection properties. With each using a different set of properties (See the Connections start/end points configuration summary chart). The latest property configuration overrides the previous setting.
The following table briefly explains the start/end related configurable aspects of diagram connections and maps them to the properties that configure them.
Associating any of a connection’s endpoints with a DiagramNode, positions that endpoint with respect to the node’s position. In order to associate a connection with a node, set either its StartNodeKey/ EndNodeKey property to the value set to the DiagramNode.Key property of the target node or its StartNode/ EndNode property to the target node.
In addition to specifying a node for a connection’s end, a specific DiagramConnectionPoint from the node’s ConnectionPoints collection can be assigned to the connection through the StartNodeConnectionPointName/ EndNodeConnectionPointName properties.
The connection logic is based on whether there are connection points specified for the node that is being connected and is as follows:
1. If there are connection points on the node and one of them is explicitly selected for the connection, it will be used.
2. If there are connection points on the node, but the connection does not have a specific connection point set, the closest point is used
3. No connection points - the middle of one of the sides of the bounding rectangle is used.
For more information on configuring connection points for a node refer to Configuring the Connection Points of the Diagram Nodes.
The following table maps the desired configuration to the property settings that manage it.
The screenshot below demonstrates how a connection in the xamDiagram would look as a result of the following settings:
Following is the code that implements this example.
In XAML:
<ig:XamDiagram x:Name="Diagram">
<ig:DiagramConnection StartNodeKey="Node1" EndNodeKey="Node2" EndNodeConnectionPointName="Right"/>
<ig:DiagramNode Name="Node1"/>
<ig:DiagramNode Name="Node2" Position="200,200"/>
</ig:XamDiagram>In order to display a standalone connection, specify its start and end point coordinates. Setting the start or end point of a connection will disconnect it from the respective target node, if such exists. Similarly, setting the start/end node will override the absolute points configuration.
The following table maps the desired configuration to the property settings that manage it.
The screenshot below demonstrates how a diagram connection looks as a result of the following settings:
Following is the code that implements this example.
In XAML:
<ig:XamDiagram x:Name="Diagram">
<ig:DiagramConnection StartPosition="20,20" EndPosition="200,200" />
</ig:XamDiagram>The following topics provide additional information related to this topic.