XDiagram is a flowchart maker and diagram software. This application allows to build any kind of Flowchart or Diagram. Complex business processes and workflows are much easier to understand when presented in diagram form. The shape library of this app includes all the components you need to bu.
This tutorial will walk you through the functionality and the main features of the RadDiagramConnection. It contains the following sections:
- The h-x diagram was developed in 1923 by Richard Mollier. It makes it possible to calculate and graphically illustrate changes in moist air conditions caused by warming, humidification, dehumidification and cooling.
- About Press Copyright Contact us Creators Advertise Developers Terms Privacy Policy & Safety How YouTube works Test new features Press Copyright Contact us Creators.
Before proceeding with this topic, it is recommended to get familiar with the Visual Structure of the Diagramming Framework.
Overview
Please note that the examples in this tutorial are showcasing Telerik Windows8 theme. In the Setting a Theme article you can find more information on how to set an application-wide theme.
The RadDiagramConnection is basically an object that connects zero, one or two shapes:
You can use its extensive API to configure its source and target points or shapes. You can choose from a list of predefined cap types thus customizing the start and end point of the connection to better fit in your application scenario. You can also control the type of a connection using the ConnectionType property, add a custom content and customize the overall look and feel of the items.
Configure the Source and Target of a Connection
You can configure the source and the target of a connection as a point or as a shape. The RadDiagramConnection class exposes the following properties that allow you to control the start and end points of a connection:
StartPoint/EndPoint: These properties are of type Point and they set or get the start/end point of a connection.
Source/Target: These properties get or set the source/target RadDiagramShape of a connection.
SourceConnectorPosition/TargetConnectorPosition: Both properties are of type string and they get or set the source/target connector position.
You can find more information about the RadDiagramShape connectors in the DiagramShapes topic.
There are five predefined strings that you can use to define where to position the connectors of the connection:
Auto: Use it if you want to automatically determine the start/end point of a connection. This option will allow the connection to dynamically determine which shape connector to be used as a start/end point. Based on the end point position, the SourceConnectorPosition will be set to the nearest shape connector. Alternatively, the TargetConnectorPosition will be set to the nearest shape connector, based on the start point position of the connection.
Left: Use it to define the left connector of a shape as the source/target point of the connection
Top: Use it to define the top connector of a shape as the source/target point of the connection
Right: Use it to define the right connector of a shape as the source/target point of the connection
Bottom: Use it to define the bottom connector of a shape as the source/target point of the connection
The Diagramming Framework provides a ConnectorPosition static class, which you can use to define the connector positions from code-behind:
using Telerik.Windows.Diagrams.Core;this.xDiagram.Connections[0].SourceConnectorPosition = ConnectorPosition.Bottom;SourceCapSize/TargetCapSize - these properties are of type Size and they get or set the size of the SourceCap/TargetCap.
SourceCapType/TargetCapType - both properties are an enumeration of type CapType that allow you to choose a cap from a set of predefined Cap types. For more detailed information, please, view the CapTypes section below.
You can also attach a connection to a source and target shape using the RadDiagramConnection.Attach() method. It defines the following parameters:
source of type IConnector: Required parameter that sets the Source of the connection.
target of type IConnector: Required parameter that sets the Target of the connection.
Diagramming Software
Connection Types
You can control the connection type through the ConnectionType property. As an enumeration of type Telerik.Windows.Diagrams.Core.ConnectionType, it exposes the following members:
Polyline: This connection type allows you to define multiple points, a connection has to pass through. By default such a connection have two points it has to pass through - its source connector (or StartPoint) and its target connector (or EndPoint). This is why by default the Polyline ConnectionType visualizes a straight connection.
Example 1:Polyline Connection
Sample of a straight Polyline connection between two shapes:If you want to change the route of the connection, you can add connection points in runtime while pressing the Ctrl key and using the mouse to place points on the connection. You can move each point around the diagramming surface to create a curved connection. You can also explicitly define the connection points in code-behind through the RadDiagramConnection.ConnectionPoints property. You can populate the ConnectionPoints collection with objects of type Point:
Example 2: Add ConnectionPoints
Example 3: Add ConnectionPoints
Sample of a curved Polyline connection:
You can use a default routing algorithm to automatically create connection points and route your connections. This basically ensures that the diagramming framework will use a routing algorithm to make sure that the path of the connection won't collide with any shapes. In order to use this feature, you can set the RadDiagram RouteConnections property to True. Please refer to the Routing tutorial for more information on the routing algorithm. If you want to use a rounded polyline connection, you can set the RadDiagram ConnectionRoundedCorners to True.
Example 4: Add rounded corners
Please note that in the above example the ConnectionPoints of the connections are added in runtime using the Ctrl key and the mouse.
Bezier: This connection type allows you to create a Bézier curve. The Bezier connection is a curve specified by four points: two end points (p1 and p2) - the source/start and target/end of the connection and two handle points (h1 and h2) and a tension parameter. The curve begins at p1 and ends at p2 and it doesn't pass through the handle points, but the handle points act as magnets, pulling the curve in certain directions and influencing the way the curve bends. The following illustration shows a Bézier RadDiagramConnection along with its endpoints and handle points.
Illustration of a Bezier connection definition points:
The RadDiagramConnection.BezierTension parameter defines the curve that will be produced for a given set of end and handle points. The following illustration shows four Bezier connections defined by the same set of end and handle points:
Example 5: Bezier Connection Type
Illustration of a Bezier connection tension parameter:By default when you create a Bezier connection and attach its endpoints to RadDiagramShapes, the position of the handle points of the connection will be calculated based on the connector positions. Both handle points will be added to the RadDiagramConnection.ConnectionPoints collection. The following snapshot illustrates the default direction of the Bezier connection handles based on the position of the connector to which the connection is attached.
Illustration of a Bezier connection default handle points directions:
The offset between a Bezier connection handle point and its corresponding endpoint is controlled thorough the BezierAutoOffset DiagramConstants. Its default value is 30px, but you can change it to better fit your needs:
Example 6: Set Bezier Offset
When attaching a Bezier connection to a RadDiagramShape you need to consider if it is attached to a built-in connector or to a custom connector. If the connection is attached to a custom connector, then you will have to manually set the position of the Bezier handle points. You can change the position of the points after you access them from the RadDiagramConnection.ConnectionPoints collection, but you will also have to set the RadDiagramConnection.IsModified property to True to apply the changes:
Example 7: Add ConnectionPoints to Bezier connection type
If you don't want to manually traverse the ConnectionPoints collection and then set the IsModified property, you can use the RadDiagramConnection.SetBezierHandles(Point,Point) method. It facilitates the definition of custom coordinates for the two handle points of a Bezier connection:
Example 8: Using SetBezierHandles() method
Please note that if you create custom connectors which names include any of the following strings:
- „right“
- “left”
- “bottom”
- “up”the Bezier Connection handle points will point at the direction indicated by the respective string.
On the other hand, if you attach a Bezier Connection to a custom connector which name doesn't indicate a direction, the handle points of the connection will match the start and end point of the connection.
Spline: This connection type represents a cardinal spline. The connection is specified by an array of points - the connection passes smoothly through each point in the array; there are no sharp corners and no abrupt changes in the tightness of the curve. The following illustration shows a set of points and a spline connection that passes through each point in the set.
Sample of a Spline connection:In order to set the array of points, you will have to populate the RadDiagram.ConnectionPoints collection. You can do that manually in code-behind:
Example 9: Spline Connection Type
Example 10: Add ConnectionPoints to Spline Connection
CapTypes
Diagram Of The Heart
CapTypes enumeration members:
None:
Example 11: None Cap Type
Arrow1:Example 12: Arrow1 Cap Type
Arrow1Filled_Example 13: Arrow1Filled Cap Type
Arrow2Example 14: Arrow2 Cap Type
Arrow2FilledExample 15: Arrow2Filled Cap Type
Arrow3Example 16: Arrow3 Cap Type
Arrow4Example 17: Arrow4 Cap Type
Arrow4FilledExample 18: Arrow4Filled Cap Type
Arrow5Example 19: Arrow5 Cap Type
Arrow5FilledExample 20: Arrow5Filled Cap Type
Arrow6Example 21: Arrow6 Cap Type
Arrow6FilledExample 22: Arrow6Filled Cap Type
Set Content
You can label a connection by setting its Content property. The Content property can define a string, a UIElement or it can be bound to a business property.
Label a connection with a sample string:
Example 23: Set Connection Content
Define UIElements in the Content of the connection:
Example 24: Custom elements inside Connection Content
Bind the Content to a business property: For the purpose of this tutorial, let's define a sample business class and set it as the DataContext of the Window.
Example 25: Create business object
Example 25: Bind Connection Content property
If you want to customize the visual representation of the bound property, you can take advantage of the RadDiagramConnection ContentTemplate property:
Example 26: Set ContentTemplate
Customize the Connection Appearance
You can easily customize the visual appearance of the RadDiagramConnection by using the following properties:
Diagram
Stroke: Gets or sets the brush that specifies how the RadDiagramConnection is painted.
StrokeDashArray: Gets or sets a collection of Double values that indicate the pattern of dashes and gaps that is used to outline the RadDiagramConnection.
StrokeThickness: Gets or sets the width of the RadDiagramConnection outline.
Background: Gets or sets the brush that specifies the SourceCap and TargetCap inner background.
You can use the RadDiagram.ConnectionStyle property to explicitely apply a style on all RadDiagramConnections in a RadDiagram instance. Read more.
Connection Edit Mode
You can set the RadDiagramConnection in edit mode using the IsInEditMode property. By default when an item enters edit mode, the RadDiagramConnection.Content is displayed inside a TextBox control so that you can change its value.
If the RadDiagramConnection.Content property is bound to a business item, you can set the connection EditTemplate to define how the business item will be edited. For example if we use the DataItem class, defined above, as a DataContext of the RadDiagram, we can set up the following connection:
Example 27: Set EditTemplate
Apart from setting the IsInEditMode property to True, you can also enter edit mode by pressing F2 or double-clicking on the shape. For more information please refer to the Items Editing tutorial.
Diagramming Sentences
Connection Bridge
The Connection Bridge is essentially what you see when two connections collide. The RadDiagram allows you to define what kind of bridge to display through the ConnectionBridge property. It is an enumeration of type BridgeType that exposes the following members:
None: There is no bridge to visualize the intersection of the connections
Bow: A half circle is displayed to indicate the intersection of the connections
Gap: A gap is displayed to indicate the intersection of the connections
Connection Selection State
The following properties allow you to track and control the selection state of a connection:
IsSelected: Gets or sets whether the connection is selected.
IsSelectedInGroup: Gets a value indicating whether this connection is selected in a group.
Connection ZIndex
You can get or set the z-order rendering behavior of the RadDiagramConnection through the ZIndex property.
Connection Bounds
You can get the bounds of a RadDiagramConnection through the Bounds property. It is of type Rect and it describes the width, height and location of the connection's bounds.
Use Free Connectors
With the R1 2019 version of our controls RadDiagramConnection now expose a UseFreeConnectors property. This Boolean property gets or sets whether the connection will choose free connectors when attaching to a shape. In the definition of free connectors means that no connections are outgoing or incoming for this connector of the shape.
The UseFreeConnectors property require the SourceConnectorPosition or TargetConnectorPosition to be set to Auto in order have effect.
Custom Connection
The RadDiagramConnection element exposes the CreateGeometry() method, which can be overridden to create a custom connection. In this section we will demonstrate how to use CreateGeometry() method to create our own connection.
Example 28: Create Custom Connection
Example 29: Declare Custom Connection
See Also