Line Connectors

Connectors are objects that are used to create a link between two nodes. Each connector has two ends whose position can be specified as point or directly connected to the Node. One end of the connector can be defined using the ‘Start Point Position’ or ‘Head Node ‘and the other end can be defined using ‘End Point Position’ or ‘Tail Node’.

Connector End Points Illustrated

Properties

Property Description Type of the property Value it accepts Any other dependencies/ sub properties associated
EnableConnection Gets or sets a value indicating whether [enable connection]. Dependency property Boolean (true/ false) No
IsLabelEditable Gets or sets a value indicating whether the line’s label can be edited or not. Default value: True Dependency property Boolean (true/ false) No
Label Gets or sets the line's label. Default value: Empty String Dependency property String No
LabelTemplate Gets or sets a template for the label. Default value: null Dependency property DataTemplate No
LabelVisibility Gets or sets the label visibility. Default value: Visibility.Visible Dependency property Visibility.Hidden
Visibility.Collapsed
Visibility.Visible		 No
LabelHorizontalAlignment Gets or sets the node’s label horizontal Alignment. Default value: HorizontalAlignment.Center Dependency property HorizontalAlignment.Center
HorizontalAlignment.Left
HorizontalAlignment.Right
HorizontalAlignment.Stretch		 No
ConnectionEndSpace Gets or sets the distance between the connector end position and the node. Default Value: 6 CLR Property Double No
ConnectorType Gets or sets the connector type to be used. Three values namely Orthogonal, Straight and Bezier can be specified. Default Value: ConnectorType.Orthogonal Dependency property ConnectorType.Orthogonal
ConnectorType.Bezier
ConnectorType.Straight		 No
HeadNode Gets or sets the head node of the connection. Default value: null Dependency property IShape No
TailNode Gets or sets the tail node of the connection. Default value: null Dependency property IShape No
HeadDecoratorShape Gets or sets the head decorator shape of the connection.Four values namely None, Arrow, Diamond and Circle can be specified.Default value: HeadDecoratorShape.None CLR Property DecoratorShape.None
DecoratorShape.Arrow
DecoratorShape.Diamond
DecoratorShape.Circle		 No
TailDecoratorShape Gets or sets the head decorator shape of the connection.Four values namely None, Arrow, Diamond and Circle can be specified.Default value: TailDecoratorShape.Arrow CLR Property DecoratorShape.None
DecoratorShape.Arrow
DecoratorShape.Diamond
DecoratorShape.Circle		 No
HeadDecoratorStyle Provides customization option for the head decorator shape. CLR Property DecoratorStyle No
TailDecoratorStyle Provides customization option for the tail decorator shape. CLR Property DecoratorStyle No
LineStyle Provides customization option for the line connector. CLR Property LineStyle No
LabelForeground Gets or sets the label foreground. The default value is Black. Dependency property Brush No
LabelBackground Gets or sets the label background. The default value is White. Dependency property Brush No
LabelFontStyle Gets or sets the label background. The default value is White. Dependency property FontStyle No
LabelFontFamily Gets or sets the label font family. The default value is Arial. Dependency property FontFamily No
LabelFontSize Gets or sets the label font size. The default value is 11. Dependency property Double No
LabelFontWeight Gets or sets the label font weight. The default value is SemiBold. Dependency property FontWeight No
LabelTextWrapping Gets or sets the label text wrapping. The default value is NoWrap. Dependency property TextWrapping.NoWrap
TextWrapping.Wrap
TextWrapping.WrapWithOverflow		 No
LabelWidth Gets or sets the label width. The default value is the line’s width. Dependency property Double No
HeadDecoratorAngle Gets or sets the angle at which the head decorator is to be positioned. CLR property Double No
TailDecoratorAngle Gets or sets the angle at which the tail decorator is to be positioned. CLR property Double No
HeadDecoratorPosition Gets or sets the point where the head decorator is to be positioned. CLR property Point No
TailDecoratorPosition Gets or sets the point where the tail decorator is to be positioned. CLR property Point No
FirstSegmentLength Gets or sets the first segment length of the orthogonal line connector. Dependency property Double No
LastSegmentLength Gets or sets the first segment length of the orthogonal line connector. Dependency property Double No
AutoAdjustPoints Gets or sets the auto-adjust points of the orthogonal line connector. Dependency property Boolean (True/False) No
IsGrouped Gets or sets a value indicating whether a line is grouped. Dependency property Boolean (True/False) No
IsSelected Gets or sets a value indicating whether a line is selected. Dependency property Boolean (True/False) No

Methods for Line Connectors:

Method Description Parameters Return Type Reference links
AdjacentNode Given a node with its specified edge, the intersecting node will be returned. AdjacentNode(IShape Node) Node N/A
UpdateConnectorPathGeometry To update the path geometry of a line connector when head node, tail node, or position of node is changed. UpdateConnectorPathGeometry() void N/A

FirstSegmentLength:

FirstSegmentLength defines the distance between StartPointPosition and the first IntermediatePoint. This property is applicable only for an orthogonal line connector whose end points are connected to ports.

LastSegmentLength:

LastSegmentLength defines the distance between the EndPointPosition and the last IntermediatePoint. This property is applicable only for an orthogonal line connector whose end points are connected to ports.

AutoAdjustPoints:

AutoAdjustPoints enables an orthogonal line connector to adjust the intermediate points (add, remove, or modify intermediate points) depending upon the ports to which it is connected. This property is applicable only for an orthogonal line connector whose end points are connected to ports. 

FirstSegmentLength and LastSegmentLength

The following code snippet connects two Nodes with a LineConnector with FirstSegmentLength and LastSegmentLength.

  • c#
    • Node headnode = new Node();

headnode.Shape = Shapes.RoundedRectangle;

headnode.Label = "Head Node";

headnode.Height = 100;

headnode.Width = 100;

headnode.OffsetX = 200;

headnode.OffsetY = 200;

diagramModel.Nodes.Add(headnode);

Node tailnode = new Node();

tailnode.Shape = Shapes.RoundedRectangle;

tailnode.Label = "Tail Node";

tailnode.Height = 100;

tailnode.Width = 100;

tailnode.OffsetX = 400;

tailnode.OffsetY = 500;

diagramModel.Nodes.Add(tailnode);

ConnectionPort port1 = new ConnectionPort(headnode, new Point(50, 100));

port1.Width = 10;

port1.Height = 10;

port1.PortShape = PortShapes.Circle;

headnode.Ports.Add(port1);

ConnectionPort port2 = new ConnectionPort(tailnode, new Point(50, 0));

port2.Width = 10;

port2.Height = 10;

port2.PortShape = PortShapes.Diamond;

tailnode.Ports.Add(port2);

LineConnector line = new LineConnector();

line.ConnectorType = ConnectorType.Orthogonal;

line.HeadNode = headnode;

line.TailNode = tailnode;

line.ConnectionHeadPort = port1;

line.ConnectionTailPort = port2;

line.FirstSegmentLength = 50;

line.LastSegmentLength =100;

line.AutoAdjustPoints = true;

diagramModel.Connections.Add(line);
  • vbnet
    • Dim headnode As New Node()

headnode.Shape = Shapes.RoundedRectangle

headnode.Label = "Head Node"

headnode.Height = 100

headnode.Width = 100

headnode.OffsetX = 200

headnode.OffsetY = 200

diagramModel.Nodes.Add(headnode)

Dim tailnode As New Node()

tailnode.Shape = Shapes.RoundedRectangle

tailnode.Label = "Tail Node"

tailnode.Height = 100

tailnode.Width = 100

tailnode.OffsetX = 400

tailnode.OffsetY = 50

diagramModel.Nodes.Add(tailnode)

Dim port1 As New ConnectionPort(headnode, New Point(50, 100))

port1.Width = 10

port1.Height = 10

port1.PortShape = PortShapes.Circle

headnode.Ports.Add(port1)

Dim port2 As New ConnectionPort(tailnode, New Point(50, 0))

port2.Width = 10

port2.Height = 10

port2.PortShape = PortShapes.Diamond

tailnode.Ports.Add(port2)

Dim line As New LineConnector()

line.ConnectorType = ConnectorType.Orthogonal

line.HeadNode = headnode

line.TailNode = tailnode

line.ConnectionHeadPort = port1

line.ConnectionTailPort = port2

line.FirstSegmentLength = 50

line.LastSegmentLength = 100

line.AutoAdjustPoints = True

diagramModel.Connections.Add(line)

    See Also

    Creating a Line Connector

    Like nodes, connectors can also be added in two ways namely:

    • At run time
    • Through model

    Property:

    Property Description Type of the property Value it accepts Any other dependencies/ sub properties associated
    EnableConnection Gets or sets a value indicating whether connection can be done in the DiagramPage. Dependency property Boolean (true/ false) No

    Steps for adding a connector to a diagram at run time

    1.First set the EnableConnection property of DiagramView to true. This has to be set to true every time the user makes a connection.
    2.Press the left mouse button while the pointer is moved over the node where the connection is to start. This acts as the head node for the connector.
    3.While the left button is pressed, drag the pointer to the node to which you want to create a link. The cursor will change to a cross while dragging.

    NOTE

    If a node is not hit when making a connection, then no connector gets added.

    Connector DragStart

    4.When you click any node in the process, you can see an adorner showing the way the link will look when created.

    HitNode

    5.Release the left button over the target node where you want to connect. This acts as the tail node for the connector and hence the link is created.

    Connection Ended

    The connector’s path geometry is dynamically created based on the start and end points and the connector type.

    It is also possible to drag-and-drop line connectors from the SymbolPalette. Three shapes of the line connectors have been added in a group named “Connectors”. The desired line can be dragged onto the page. Initially, the headnode and the tail node will be null. The steps to be followed to add a line connector from the SymbolPallete are as follows:

    1.Drag the desired line connector onto the page.

    Bezier Line added to the Page

    2.Then drag the head thumb of the line connector to the desired node to make a connection.

    Dragging the Head Thumb

    3.Similarly drag the tail thumb of the line connector to the desired node. Now, this creates a link between the two nodes.

    Dragging the Tail Thumb

    Adding Connectors through a Model

    We can create connections between nodes through a model. The Line Connector class is used to create the connection. We need to specify the head node and the tail node for the connection.

  • c#
    • Node n1 = new Node();

n1.Shape = Shapes.FlowChart_Card;

diagramModel.Nodes.Add(n1);

n1.OffsetX = 50;

n1.OffsetY = 50;


Node n2 = new Node();

n2.Shape = Shapes.FlowChart_Delay;

diagramModel.Nodes.Add(n2);

n2.OffsetX = 150;

n2.OffsetY = 250;


LineConnector l1 = new LineConnector();

l1.HeadNode = n1;

l1.TailNode = n2;

diagramModel.Connections.Add(l1);
  • vbnet
    • Dim n1 As New Node()

n1.Shape = Shapes.FlowChart_Card

diagramModel.Nodes.Add(n1)

n1.OffsetX = 50

n1.OffsetY = 50


Dim n2 As New Node()

n2.Shape = Shapes.FlowChart_Delay

diagramModel.Nodes.Add(n2)

n2.OffsetX = 150

n2.OffsetY = 250


Dim l1 As New LineConnector()

l1.HeadNode = n1

l1.TailNode = n2

diagramModel.Connections.Add(l1)

    This creates a connection between the two specified nodes.

    Line Connector

    NOTE

    For orthogonal and Bezier connectors, the connection always happens at the center of the node’s edge.

    For straight line connectors, the connection happens at the intersection point of the edge and the line connector.

    ConnectorType

    The ConnectorType property specifies the type of connector to be used for connection.

    Property Description Type Data Type Reference Link
    ConnectorType Gets or sets the connector type to be used. There are four values namely Orthogonal, Straight, Bezier and Arc can be specified. Default Value is Orthogonal Dependency property ConnectorType.Orthogonal
    ConnectorType.Bezier
    ConnectorType.Straight
    ConnectorType.Arc    		 NA

    Following types of connectors are supported:

    • Orthogonal - Creates a line in which line segments (if any) are placed at right angles to each other.
    • Bezier - Renders a Bezier curve with two points.
    • Straight - Renders a line with two points.
    • Arc - create a link between two nodes.

    The following code illustrates how to set the connector type:

  • c#
    • LineConnector l1 = new LineConnector();

l1.HeadNode = n1;

l1.TailNode = n2;

l1.ConnectorType = ConnectorType.Bezier;

diagramModel.Connections.Add(l1);
  • vbnet
    • Dim l1 As New LineConnector()

l1.HeadNode = n1

l1.TailNode = n2

l1.ConnectorType = ConnectorType.Bezier

diagramModel.Connections.Add(l1)

    Description: C:/Users/jeganr/Desktop/New Images/New Images/ConnectorTypes.png

    Connector Types

    Arc Line Connector Type

    Arc Line Connector creates link between two nodes. This can act as other line connectors like Bezier, Straight and Orthogonal. You can blend the Arc Line Connector and change its angel. Arc height and direction can be customized.

    Properties

    Property Description Type Data Type Reference Links
    ArcHeight Gets or sets a value for the height of the Arc connector.The default value is 50. Dependency property double NA
    ArcDirection Gets or sets a value for the direction of the Arc connector.The default value is Clockwise Dependency property SweepDirection NA

    Customizing Arc Line Connector type

    Use the ArcHeight and the ArcDirection property of ConnectorBase to customize the hieght and direction fo the Arc.

    • ArcHeight – Gets or sets the height of the Arc.
    • ArcDirection – Gets or sets the direction of the Arc

    Following code illustrates how to customize the hieght and direction fo the Arc:

  • c#
    • LineConnector l = new LineConnector();

          l.ConnectorType = ConnectorType.Arc;

          l.ArcHeight = 100;

          //l.ArcDirection = SweepDirection.Clockwise; // Default

          l.ArcDirection = SweepDirection.Counterclockwise;

          l.StartPointPosition = new Point(50, 150);

          l.EndPointPosition = new Point(150, 150);

          diagramModel1.Connections.Add(l);
  • vbnet
    • Dim l As New LineConnector()

l.ConnectorType = ConnectorType.Arc

l.ArcHeight = 100

'l.ArcDirection = SweepDirection.Clockwise; // Default

l.ArcDirection = SweepDirection.Counterclockwise

l.StartPointPosition = New Point(50, 150)

l.EndPointPosition = New Point(150, 150)



diagramModel1.Connections.Add(l)

    Description: C:/Users/jeganr/Desktop/New Images/New Images/ArcHeight.png

    Description: C:/Users/jeganr/Desktop/New Images/New Images/ArcDirection.png

    Customized Arc Line Chart

    Polyline

    Line connector can be used to draw polylines using IntermediatePoints property. Polylines are drawn using intermediate points for straight lines and orthogonal line connectors. For orthogonal lines, intermediate points are updated so that the adjacent line segments are always perpendicular to each other. These intermediate points are visually represented as vertex.

    Properties, Methods and Events tables

    Property Description Type Value it accepts Reference links
    IntermediatePoints Gets or sets the intermediate points. Dependency property List[Point] No

    Polylines

    Straight line connectors can be used as poly line by using IntermediatePoints property. This can be achieved at run time by holding Ctrl + Shift and Click on the line, or by simply changing the IntermediatePoints collection. This will reflect in the line connector.

    Polyline

    Poly Orthogonal Lines

    Orthogonal lines can have more than two intermediate points. All these Intermediate points are can be dragged. Unlike straight lines, orthogonal lines maintain their perpendicularity even after the intermediate points are dragged.

    Poly Orthogonal Lines

    Intermediate Points

    Adding Intermediate Points

    Intermediate points can be added in two ways:

    • Using Ctrl + Shift Key
    • Through Code Behind

    Intermediate points can be added at run time by holding Ctrl + Shift and clicking on the line. Intermediate points can be added programmatically. The following code snippet illustrates addition of intermediate lines.

  • c#
    • LineConnector lc = new LineConnector();

lc.ConnectorType=ConnectorType.Straight;

lc.StartPointPosition = new Point(100, 100);

lc.EndPointPosition = new Point(300, 300);

lc.IntermediatePoints.Add(new Point(200,100));

lc.IntermediatePoints.Add(new Point(200,300));
  • vbnet
    • Dim lc As New LineConnector()

lc.ConnectorType=ConnectorType.Straight

lc.StartPointPosition = New Point(100, 100)

lc.EndPointPosition = New Point(300, 300)

lc.IntermediatePoints.Add(New Point(200,100))

lc.IntermediatePoints.Add(New Point(200,300))

    Adding Intermediate Points

    Modifying Intermediate Points

    Intermediate Points can be modified in two ways:

    • Dragging the Vertex
    • Through Code Behind

    Intermediate points can be modified at run time by clicking and dragging the vertex of the line connector. Intermediate points can be modified programmatically also. The following code snippet illustrates modification of intermediate lines.

  • c#
    • LineConnector lc = new LineConnector();

lc.ConnectorType=ConnectorType.Straight;

lc.StartPointPosition = new Point(100, 100);

lc.EndPointPosition = new Point(300, 300);

lc.IntermediatePoints.Add(new Point(200,100));

lc.IntermediatePoints.Add(new Point(200,300));

lc.IntermediatePoints[1] = new Point(200,200));
  • vbnet
    • Dim lc As New LineConnector()

lc.ConnectorType=ConnectorType.Straight

lc.StartPointPosition = New Point(100, 100)

lc.EndPointPosition = New Point(300, 300)

lc.IntermediatePoints.Add(New Point(200,100))

lc.IntermediatePoints.Add(New Point(200,300))

lc.IntermediatePoints(1) = New Point(200,200))

    Modifying Intermediate Points

    Delete Intermediate Points

    Intermediate points can be deleted in two ways:

    • Using Ctrl + Shift Key
    • Through Code Behind

    Intermediate points can be deleted by holding Ctrl + Shift and clicking on the vertex that represents intermediate point to be deleted. Intermediate points can be deleted programmatically also. The following code snippet illustrates deletion of intermediate lines.

  • c#
    • LineConnector lc = new LineConnector();

lc.ConnectorType=ConnectorType.Straight;

lc.StartPointPosition = new Point(100, 100);

lc.EndPointPosition = new Point(300, 300);

lc.IntermediatePoints.Add(new Point(200,100));

lc.IntermediatePoints.Add(new Point(200,300));

lc.IntermediatePoints.RemoveAt(1);
  • vbnet
    • Dim lc As New LineConnector()

lc.ConnectorType=ConnectorType.Straight

lc.StartPointPosition = New Point(100, 100)

lc.EndPointPosition = New Point(300, 300)

lc.IntermediatePoints.Add(New Point(200,100))

lc.IntermediatePoints.Add(New Point(200,300))

lc.IntermediatePoints.RemoveAt(1)

    Deleting Intermediate Points

    Vertex Template for Intermediate Points

    Vertex template for intermediate points can be set using ConnectorAdornerVertexStyle property of line connector. Custom styles can be set.

    Property Description Type of the property Value it accepts Any other dependencies/ sub properties associated
    VertexStyle Gets or sets the vertex style. Dependency property Style No
  • xaml
    • <UserControl.Resources>

    <ResourceDictionary>

    <Style x:Key="vertexStyle" TargetType="Thumb">

    <Setter Property="Width" Value="7"/>

    <Setter Property="Height" Value="7"/>

    <Setter Property="RenderTransform">

    <Setter.Value>

        <TranslateTransform X="-3" Y="-3"/>

    </Setter.Value>

    </Setter>

    <Setter Property="Template">

        <Setter.Value>

        <ControlTemplate TargetType="Thumb">

        <Rectangle RenderTransformOrigin="0.5,0.5" Fill="Beige"  Stroke="Black"  

			StrokeThickness="1" RadiusX="0" RadiusY="0"/>

        </ControlTemplate>

        </Setter.Value>

    </Setter>

    </Style>

    </ResourceDictionary>

</UserControl.Resources>
  • c#
    • LineConnector lc = new LineConnector();

lc.ConnectorType = ConnectorType.Straight;

lc.StartPointPosition = new Point(100, 100);

lc.EndPointPosition = new Point(300, 300);

lc.IntermediatePoints.Add(new Point(200, 100));

lc.IntermediatePoints.Add(new Point(200, 300));

lc.VertexStyle = this.Resources["vertexStyle"] as Style;
  • vbnet
    • Dim lc As New LineConnector ()

lc.ConnectorType = ConnectorType.Straight

lc.StartPointPosition = New Point(100, 100)

lc.EndPointPosition = New Point(300, 300)

lc.IntermediatePoints.Add(New Point(200, 100))

lc.IntermediatePoints.Add(New Point(200, 300))

lc.VertexStyle = TryCast(Me.Resources("vertexStyle"), Style)

    _Vertex Style_ss

    Template for End Points

    Vertex template for terminal points can be set using ConnectorAdornerThumbStyle property of line connector. Custom styles can be set.

    Property Description Type of the property Value it accepts Any other dependencies/ sub properties associated
    DecoratorAdornerStyle Gets or sets the decorator adorner style. Dependency property Style No
  • xaml
    • <UserControl.Resources>

    <ResourceDictionary>

    <Style x:Key="decoratorAdornerStyle" TargetType="Thumb">

    <Setter Property="Width" Value="14"/>

    <Setter Property="Height" Value="14"/>

    <Setter Property="Template">

    <Setter.Value>

        <ControlTemplate TargetType="Thumb">

        <Rectangle Fill="#66F5F5DC" Stroke="Black" StrokeThickness="1" 

			RadiusX="0" RadiusY="0"/>

        </ControlTemplate>

    </Setter.Value>

    </Setter>

    </Style>

    </ResourceDictionary>

    </UserControl.Resources>
  • c#
    • LineConnector lc = new LineConnector();

lc.ConnectorType = ConnectorType.Straight;

lc.StartPointPosition = new Point(100, 100);

lc.EndPointPosition = new Point(300, 300);

lc.IntermediatePoints.Add(new Point(200, 100));

lc.IntermediatePoints.Add(new Point(200, 300));

lc.DecoratorAdornerStyle = this.Resources["decoratorAdornerStyle"] as Style;
  • vbnet
    • Dim lc As New LineConnector ()

lc.ConnectorType = ConnectorType.Straight

lc.StartPointPosition = New Point(100, 100)

lc.EndPointPosition = New Point(300, 300)

lc.IntermediatePoints.Add(New Point(200, 100))

lc.IntermediatePoints.Add(New Point(200, 300))

lc.DecoratorAdornerStyle = TryCast(Me.Resources("decoratorAdornerStyle"), Style)

    Template End Points

    NOTE

    Template End Points size cannot be changed, if changed it will alter its position.

    Hide Vertex

    The user can hide the vertex of a line connector by setting the IsVertexVisible property to False.

    Property Description Type of the property Value it accepts Any other dependencies/ sub properties associated
    IsVertexVisible Gets or sets a value indicating whether this instance is vertex visible. Dependency property Bool(true/false) No
  • c#
    • LineConnector lc = new LineConnector();

lc.ConnectorType = ConnectorType.Straight;

lc.StartPointPosition = new Point(100, 100);

lc.EndPointPosition = new Point(300, 300);

lc.IntermediatePoints.Add(new Point(200, 100));

lc.IntermediatePoints.Add(new Point(200, 300));

lc.IsVertexVisible = false;
  • vbnet
    • Dim lc As New LineConnector()

lc.ConnectorType = ConnectorType.Straight

lc.StartPointPosition = New Point(100, 100)

lc.EndPointPosition = New Point(300, 300)

lc.IntermediatePoints.Add(New Point(200, 100))

lc.IntermediatePoints.Add(New Point(200, 300))

lc.IsVertexVisible = False

    Vertex Style not visible

    Hide Decorator Adorner

    The user can hide the decorator adorner of a line connector by setting the IsDecoratorVisible property to False.

    Property Description Type of the property Value it accepts Any other dependencies/ sub properties associated
    IsDecoratorVisible Gets or sets a value indicating whether this instance is decorator adorner visible. Dependency property Boolean (true / false) No
  • c#
    • LineConnector lc = new LineConnector();

lc.ConnectorType = ConnectorType.Straight;

lc.StartPointPosition = new Point(100, 100);

lc.EndPointPosition = new Point(300, 300);

lc.IntermediatePoints.Add(new Point(200, 100));

lc.IntermediatePoints.Add(new Point(200, 300));

lc.IsDecoratorVisible = false;
  • vbnet
    • Dim lc As New LineConnector()

lc.ConnectorType = ConnectorType.Straight

lc.StartPointPosition = New Point(100, 100)

lc.EndPointPosition = New Point(300, 300)

lc.IntermediatePoints.Add(New Point(200, 100))

lc.IntermediatePoints.Add(New Point(200, 300))

lc.IsDecoratorVisible = False

    C:/Users/prakashs/Desktop/UG for Intermediate Points/Screen Shots/9 DecoratorAdorner Style not visible.png

    Decorator Adorner Style not visible

    Arresting Vertex Drag

    The user can disable the drag operation on the vertex of a line connector by setting the IsVertexMovable property to False.

    Property Description Type of the property Value it accepts Any other dependencies/ sub properties associated
    IsVertexMovable Gets or sets a value indicating whether this instance is vertex movable. Dependency property Boolean (true/ false) No
  • c#
    • LineConnector lc = new LineConnector();

lc.ConnectorType = ConnectorType.Straight;

lc.StartPointPosition = new Point(100, 100);

lc.EndPointPosition = new Point(300, 300);

lc.IntermediatePoints.Add(new Point(200, 100));

lc.IntermediatePoints.Add(new Point(200, 300));

lc.IsVertexMovable = false;
  • vbnet
    • Dim lc As New LineConnector()

lc.ConnectorType = ConnectorType.Straight

lc.StartPointPosition = New Point(100, 100)

lc.EndPointPosition = New Point(300, 300)

lc.IntermediatePoints.Add(New Point(200, 100))

lc.IntermediatePoints.Add(New Point(200, 300))

lc.IsVertexMovable = False

    The vertex drag of a line connector is arrested.

    Arresting Decorator Drag

    The user can disable the drag operation on the decorator adorner of a line connector by setting the IsDecoratorMovable property to False.

    Property Description Type of the property Value it accepts Any other dependencies/ sub properties associated
    IsDecoratorMovable Gets or sets a value indicating whether this instance is decorator movable. Dependency property Boolean (true/ false) No
  • c#
    • LineConnector lc = new LineConnector();

lc.ConnectorType = ConnectorType.Straight;

lc.StartPointPosition = new Point(100, 100);

lc.EndPointPosition = new Point(300, 300);

lc.IntermediatePoints.Add(new Point(200, 100));

lc.IntermediatePoints.Add(new Point(200, 300));

lc.IsDecoratorMovable = false;
  • vbnet
    • Dim lc As New LineConnector()

lc.ConnectorType = ConnectorType.Straight

lc.StartPointPosition = New Point(100, 100)

lc.EndPointPosition = New Point(300, 300)

lc.IntermediatePoints.Add(New Point(200, 100))

lc.IntermediatePoints.Add(New Point(200, 300))

lc.IsDecoratorMovable = False

    The decorator adorner drag of a line connector is arrested.

    Decorator Shapes

    Head and tail decorator shape properties provide an option to add arrows and to customize these arrows. End point decorators can be provided for all types of connectors. There are a number of shapes available for head and tail decorators.

    Properties

    Property Description Type of the property Value it accepts Any other dependencies/ sub properties associated
    HeadDecoratorShape Gets or sets the head decorator shape of the connection.Four values namely None, Arrow , Diamond and Circle can be specified.Default value: HeadDecoratorShape.None CLR Property DecoratorShape.None
    DecoratorShape.Arrow
    DecoratorShape.Diamond
    DecoratorShape.Circle    		 No
    TailDecoratorShape Gets or sets the head decorator shape of the connection.Four values namely None, Arrow , Diamond and Circle can be specified.Default value: TailDecoratorShape.Arrow CLR Property
    DecoratorShape.None
    DecoratorShape.Arrow
    DecoratorShape.Diamond
    DecoratorShape.Circle    		 No
    HeadDecoratorStyle Provides customization option for the head decorator shape. CLR Property DecoratorStyle No
    TailDecoratorStyle Provides customization option for the tail decorator shape. CLR Property DecoratorStyle No

    Arrow settings can be changed using HeadDecoratorShape and TailDecoratorShape properties. Both head and tail decorators consist of the same set of properties that allow one to customize the settings as required.

    Types of decorator shapes

    • Arrow
    • Diamond
    • Circle

    The following code shows the setting of these properties.

  • c#
    • LineConnector l1 = new LineConnector();

l1.HeadNode = n1;

l1.TailNode = n2;

l1.ConnectorType = ConnectorType.Bezier;

l1.HeadDecoratorShape = DecoratorShape.Diamond;

l1.TailDecoratorShape = DecoratorShape.Circle;

diagramModel.Connections.Add(l1);
  • vbnet
    • Dim l1 As New LineConnector()

l1.HeadNode = n1

l1.TailNode = n2

l1.ConnectorType = ConnectorType.Bezier

l1.HeadDecoratorShape = DecoratorShape.Diamond

l1.TailDecoratorShape = DecoratorShape.Circle

diagramModel.Connections.Add(l1)

    Decorator Shapes

    Customizing Line Connectors

    This topic describes two properties namely:

    • LineStyle
    • DecoratorStyle

    Line Style

    A connector can be customized by specifying the values under the LineStyle property. The various properties under LineStyle are:

    • Fill - Specifies the color used to fill the connector.
    • StrokeThickness - Specifies the thickness value for the connector’s border.
    • Stroke - Specifies the color used for the border of the connector.
    • StrokeStartLineCap - Specifies the shape to be used at the start of a line or segment.
    • StrokeEndLineCap - Specifies the shape at the end of a line or segment.
    • StrokeLineJoin - Specifies the shape that joins two lines or segments.
    • StrokeDashArray - Specifies a collection of double values that indicate the pattern of dashes and gaps used to outline shapes.

    As an example, the Stroke property can be applied as follows.

  • c#
    • LineConnector l1 = new LineConnector();

l1.HeadNode = n1;

l1.TailNode = n2;

l1.ConnectorType = ConnectorType.Bezier;

l1.LineStyle.Stroke = Brushes.Red;

diagramModel.Connections.Add(l1);
  • vbnet
    • Dim l1 As New LineConnector()

l1.HeadNode = n1

l1.TailNode = n2

l1.ConnectorType = ConnectorType.Bezier

l1.LineStyle.Stroke = Brushes.Red

diagramModel.Connections.Add(l1)

    LineStyle

    DecoratorStyle

    The decorator shapes used for the connector can be customized by specifying the property values under the DecoratorStyle property. To change the decorator style, the HeadDecoratorStyle and TailDecoratorStyle properties are used.

    The various properties under the DecoratorStyle property are as follows:

    • Fill - Specifies the color to be used to fill the decorator.
    • StrokeThickness - Specifies the thickness value for the decorator’s border.
    • Stroke - Specifies the color to be used for the border of the decorator.
    • StrokeStartLineCap - Specifies the shape used at the start of a line or segment.
    • StrokeEndLineCap - Specifies the shape at the end of a line or segment.
    • StrokeLineJoin - Specifies the shape that joins two lines or segments.
    • StrokeDashArray - Specifies a collection of double values that indicate the pattern of dashes and gaps used to outline shapes.

    An example of the Stroke property can be applied to the head decorator as folllows.

  • c#
    • LineConnector l1 = new LineConnector();

l1.HeadNode = n1;

l1.TailNode = n2;

l1.ConnectorType = ConnectorType.Bezier;

l1.HeadDecoratorStyle.Stroke = Brushes.Red;

l1.TailDecoratorStyle.Stroke = Brushes.Red;

diagramModel.Connections.Add(l1);
  • vbnet
    • Dim l1 As New LineConnector()

l1.HeadNode = n1

l1.TailNode = n2

l1.ConnectorType = ConnectorType.Bezier

l1.HeadDecoratorStyle.Stroke = Brushes.Red

l1.TailDecoratorStyle.Stroke = Brushes.Red

diagramModel.Connections.Add(l1)

    Decorator Style

    Line Connector Label

    A Label is a single line or multiline text that is displayed over the Node. This Label is used to textually represent a LineConnector with a string that can be edited in run time. There are many properties used to change the alignment and appearance settings. Label can be represented as multiline text using the TextWrapping property.

    Properties

    Property Description Type of property Value it accepts Any other dependencies / sub-properties associated
    IsLabelEditable Gets or sets a value indicating whether the line’s label can be edited or not. Default value: True Dependency property Boolean (true/ false) No
    Label Gets or sets the line's label. Default value: Empty String Dependency property String No
    LabelTemplate Gets or sets a template for the label. Default value: null Dependency property DataTemplate No
    LabelVisibility Gets or sets the label visibility. Default value: Visibility.Visible Dependency property Visibility.Hidden
    Visibility.Collapsed
    Visibility.Visible    		 No
    LabelHorizontalAlignment Gets or sets the node’s label horizontal Alignment. Default value: HorizontalAlignment.Center Dependency property HorizontalAlignment.Center
    HorizontalAlignment.Left
    HorizontalAlignment.Right
    HorizontalAlignment.Stretch    		 No
    LabelForeground Gets or sets the label foreground. Default value is Black. Dependency property Brush No
    LabelBackground Gets or sets the label background. The default value is White. Dependency property Brush No
    LabelFontStyle Gets or sets the label background. The default value is White. Dependency property FontStyle No
    LabelFontFamily Gets or sets the label font family. The default value is Arial. Dependency property FontFamily No
    LabelFontSize Gets or sets the label font size. The default value is 11. Dependency property Double No
    LabelFontWeight Gets or sets the label font weight. The default value is SemiBold. Dependency property FontWeight No
    LabelTextWrapping Gets or sets the label text wrapping. The default value is NoWrap. Dependency property TextWrapping.NoWrap
    TextWrapping.Wrap
    TextWrapping.WrapWithOverflow    		 No
    LabelWidth Gets or sets the label width. The default value is the line’s width. Dependency property Double No

    A connector can be specified with a label, similar to the node, using the Label property. The default value is an empty string. By default, the label starts at the center point of the connector.

  • c#
    • LineConnector l1 = new LineConnector();

l1.HeadNode = n1;

l1.TailNode = n2;

l1.ConnecorType = ConnectorType.Bezier;

l1.Label = "Connect";

diagramModel.Connections.Add(l1);
  • vbnet
    • Dim l1 As New LineConnector()

l1.HeadNode = n1

l1.TailNode = n2

l1.ConnecorType = ConnectorType.Bezier

l1.Label = "Connect"

diagramModel.Connections.Add(l1)

    Connector’s Label

    Label Template

    You can set a custom template for labels. The following code illustrates on how to set a label template.

    Create a DataTemplate and add the resource “text.png” to your application.

  • xaml
    • <DataTemplate x:Key="LabelCustomTemplate">

   <StackPanel Orientation="Horizontal">

       <Image Source="text.png" Width="20" Height="20"/>

       <Border Background="AliceBlue">

         <TextBlock Text="Hello"/>

       </Border>

   </StackPanel>

</DataTemplate>

    Now, you can apply the template to the connector as follows.

  • c#
    • LineConnector l1 = new LineConnector();

l1.HeadNode = n1;

l1.TailNode = n2;

l1.ConnectorType = ConnectorType.Straight;

l1.HeadDecoratorShape= DecoratorShape.Arrow;

l1.TailDecoratorShape= DecoratorShape.Arrow;

l1.HeadDecoratorStyle.Fill = new SolidColorBrush(Colors.LightGray); 

l1.TailDecoratorStyle.Fill = new SolidColorBrush(Colors.LightGray);

l1.LabelTemplate = this.Resources["LabelCustomTemplate"] as DataTemplate ;

diagramModel.Connections.Add(l1);
  • vbnet
    • Dim l1 As New LineConnector()

l1.HeadNode = n1

l1.TailNode = n2

l1.ConnectorType = ConnectorType.Straight

l1.HeadDecoratorShape= DecoratorShape.Arrow

l1.TailDecoratorShape= DecoratorShape.Arrow

l1.HeadDecoratorStyle.Fill = New SolidColorBrush(Colors.LightGray)

l1.TailDecoratorStyle.Fill = New SolidColorBrush(Colors.LightGray) 

l1.LabelTemplate = CType(Me.Resources("LabelCustomTemplate"), DataTemplate)

diagramModel.Connections.Add(l1)

    The following screenshot illustrates “Hello” text on an Alice Blue background with an image on the left.

    Label template

    Multi line label

    The Label text can be displayed in multiple lines using LabelTextWrapping property set to Wrap,. If there is no enough space for the text to get displayed within the connector in a single line, the text will get wrapped within connector boundaries or LabelWidth and starts to display the label in multiple lines.

  • c#
    • LineConnector l = new LineConnector();

l.Label = "This is a Multiline Label for Connectors";

l.LabelHeight = 110;

l.LabelTextWrapping = TextWrapping.Wrap;

l.IsLabelEditable = true;
  • vbnet
    • Dim l As New LineConnector()

l.Label = "This is a Multiline Label for Connectors"

l.LabelHeight = 110

l.LabelTextWrapping = TextWrapping.Wrap

l.IsLabelEditable = True

    Multiline Label

    Label Editing

    A connector’s label can be edited at run time by setting IsLabelEditable to true. The following code shows how it can be done.

  • c#
    • LineConnector l1 = new LineConnector();

l1.Shape = Shapes.RoundedRectangle;

l1.IsLabelEditable = true;
  • vbnet
    • Dim l1 As New LineConnector()

l1.Shape = Shapes.RoundedRectangle

l1.IsLabelEditable = True

    A user can specify a label at run time by:

    1. Double-click the left mouse button on any part of the connector. A text box will appear with the cursor at the beginning.
    2. Now type the label name and press ENTER. The label will be displayed on the connector. Press ESC key if you do not want to apply the new label value.

    Connector Label

    Label Visibility

    A label’s visibility can be changed using the LabelVisibility property. The default value is visible.

  • c#
    • LineConnector l1 = new LineConnector();

l1.LabelVisibility = Visibility.Hidden;
  • vbnet
    • Dim l1 As New LineConnector()

l1.LabelVisibility = Visibility.Hidden

    The label will not get displayed.

    Custom Label Support for LineConnector

    This feature enables you to customize the Label Position of the LineConnector. The CustomLabelPosition properties for LineConnector are Auto, Drag and Custom.

    • Drag: The label can be dragged
    • Auto: Label position and angle will be updated internally based on the position of the LineConnector. This is the default value.
    • Custom: You can customize the Label position

    We can also set the Label Position using LabelPosition property of the LineConnector.

    Property Description Type Value It Accepts Default Values Any other dependencies/ sub properties associated
    LabelPosition Gets or sets the Position of the LineConnector’s Label from the DiagramPage. Dependency property Point Point(0,0) No
    CustomLabelPosition Gets or sets the Label of LineConnector is Dragging or Not. Dependency property Enum. CustomLabelPositions.Auto
    CustomLabelPositions.Custom
    CustomLabelPositions.Drag    		 CustomLabelPositions.Auto No
    LabelAngle Gets or sets the angle of the Label of LineConnector. Dependency property double 0 No

    Adding Custom Label Enhancements for LineConnector to an Application

    Label Dragging support for LineConnector

    The Label can be dragged from the Line Connector.

  • c#
    • (line as LineConnector).CustomLabelPosition = CustomLabelPositions.Drag;

    Set the LabelPosition for LineConnector

    When the values are given the position of the label will be exactly at the point of the specified values.

  • c#
    • (line as LineConnector).LabelPosition = new Point(100,100);

    Set the LabelAngle for LineConnector

    The labels rotate when values are given for the lable angle.

  • c#
    • (line as LineConnector).LabelAngle = 45;

    Label Orientation

    Essential Diagram for Silverlight provides support to orient the line connector label as needed.

    Use Case Scenarios

    When the label overlaps with the nodes or connectors, it will not be legible. In such case you can use this feature to align the label to make it legible.

    Properties

    Property Description Type Data Type Reference links
    LabelOrientation Gets or sets a value to  orient the labelDefault Value is Auto. Dependency property LabelOrientation.Auto
    LabelOrientation.Horizontal
    LabelOrientation.Vertical    		 N/A

    Orienting the Label

    You can orient the label using the LabelOrientation property. You can set this to Horizontal, Vertical or Auto. By default, this is set to Auto.

    The following code illustrates how to set the LabelOrientation to Auto:

  • c#
    •   LineConnector line = new LineConnector();

  line.LabelOrientation = Syncfusion.Windows.Diagram.LabelOrientation.Auto;
  • vbnet
    • Dim line As New LineConnector()

        line.LabelOrientation = Syncfusion.Windows.Diagram.LabelOrientation.Auto

    NOTE

    when this property is set to Auto, the label will be positioned along the angle of the line drawn.

    LabelOrientation is Auto

    The following code illustrates how to set the LabelOrientation to Horizontal:

  • c#
    • LineConnector line = new LineConnector();

line.LabelOrientation = Syncfusion.Windows.Diagram.LabelOrientation.Horizontal;
  • vbnet
    • LineConnector line = new LineConnector();

line.LabelOrientation = Syncfusion.Windows.Diagram.LabelOrientation.Horizontal;

    LabelOrientation is Horizontal

    The following code illustrates how to set the LabelOrientation to Vertical:

  • c#
    • LineConnector line = new LineConnector();

line.LabelOrientation = Syncfusion.Windows.Diagram.LabelOrientation.Vertical;
  • vbnet
    • Dim line As New LineConnector()

line.LabelOrientation = Syncfusion.Windows.Diagram.LabelOrientation.Vertical

    LabelOrientation is Vertical

    Label Template Orientation:

    You can set an orientation for the label template. The following shows how to set label template alignment.

    Properties

    Property Description Type of property Value it Accepts Any other dependencies/ subproperties associated
    LabelTemplateHorizontalAlignment Specifies the horizontal alignment for a label template. Default value is center. Dependency property HorizontalAlignment.Center
    HorizontalAlignment.Left
    HorizontalAlignment.Right
    HorizontalAlignment.Stretch    		 No

    The following code illustrates how to set the LabelTemplateOrientation to Auto:

  • c#
    • LineConnector Line = new DiagramView();

Line.LabelTemplateHorizontalAlignment=Syncfusion.Windows.Diagram.LabelOrientation.Auto
  • vbnet
    • Dim Line As New LineConnector()

Line.LabelTemplateHorizontalAlignment=Syncfusion.Windows.Diagram.LabelOrientation.Auto

    LabelTemplateOrientation is Auto

    The following code illustrates how to set the LabelTemplateOrientation to Horizontal:

  • c#
    • LineConnector Line = new DiagramView();

Line.LabelTemplateHorizontalAlignment=Syncfusion.Windows.Diagram.LabelOrientation.Horizontal
  • vbnet
    • Dim Line As New LineConnector()

Line.LabelTemplateHorizontalAlignment=Syncfusion.Windows.Diagram.LabelOrientation.Horizontal

    LabelTemplateOrientation is Horizontal

    The following code illustrates how to set the LabelTemplateOrientation to Vertical:

  • c#
    • LineConnector Line = new DiagramView();

Line.LabelTemplateHorizontalAlignment=Syncfusion.Windows.Diagram.LabelOrientation.Vertical;
  • vbnet
    • Dim Line As New LineConnector()

Line.LabelTemplateHorizontalAlignment=Syncfusion.Windows.Diagram.LabelOrientation.Vertical

    Label Template Alignment:

    You can set an Alignment for the label template. The following shows how to set a label template alignment. Label template supports horizontal alignment.

    Properties

    Property Description Type of property Value it Accepts Any other dependencies/ sub-properties associated
    LabelTemplateHorizontalAlignment Specifies the horizontal alignment for label template. Default value is center. Dependency property HorizontalAlignment.Center
    HorizontalAlignment.Left
    HorizontalAlignment.Right
    HorizontalAlignment.Stretch    		 No

    The following code illustrates how to set the LabelTemplateHorizontalAlignment to Auto:

  • c#
    • LineConnector Line = new DiagramView();

Line.LabelTemplateHorizontalAlignment=Syncfusion.Windows.Diagram.HorizontalAlignment.Auto
  • vbnet
    • Dim Line As New LineConnector()

Line.LabelTemplateHorizontalAlignment=Syncfusion.Windows.Diagram.HorizontalAlignment.Auto

    LabelTemplateHorizontalAlignment is Auto

    The following code illustrates how to set the LabelTemplateHorizontalAlignment to Left:

  • c#
    • LineConnector Line = new DiagramView();

Line.LabelTemplateHorizontalAlignment=Syncfusion.Windows.Diagram.HorizontalAlignment.Left;
  • vbnet
    • Dim Line As New LineConnector()

Line.LabelTemplateHorizontalAlignment=Syncfusion.Windows.Diagram.HorizontalAlignment.Left

    LabelTemplateHorizontalAlignment is Left

    The following code illustrates how to set the LabelTemplateHorizontalAlignment to Right:

  • c#
    • LineConnector Line = new DiagramView();

Line.LabelTemplateHorizontalAlignment=Syncfusion.Windows.Diagram.HorizontalAlignment.Right;
  • vbnet
    • Dim Line As New LineConnector()

Line.LabelTemplateHorizontalAlignment=Syncfusion.Windows.Diagram.HorizontalAlignment.Right

    LabelTemplateHorizontalAlignment is Right

    The following code illustrates how to set the LabelTemplateHorizontalAlignment to Stretch:

  • c#
    • LineConnector Line = new DiagramView();

Line.LabelTemplateHorizontalAlignment=Syncfusion.Windows.Diagram.HorizontalAlignment.Stretch;
  • vbnet
    • Dim Line As New LineConnector()

Line.LabelTemplateHorizontalAlignment=Syncfusion.Windows.Diagram.HorizontalAlignment.Stretch

    LabelTemplateHorizontalAlignment is Stretch

    Line bridging support for Diagram Silverlight

    Line Bridging creates a bridge for lines to smartly cross over other line at points of intersection. When two line connectors meets each other, line with higher z-order will draw an arc over the line with lower z-order. Only Straight and Orthogonal Connector type supports line bridging.

    Properties

    Property Description Type Data Type Reference Links
    LineBridgingEnabled Gets or sets a value indicating whether line bridging is enabled.The default value is false. Dependency property Boolean No

    Enabling Line Bridging for a Line connector

    To enable line bridging for a line connector, set the LineBridgingEnabled property of ConnectorBase to true. To disable line bridging, set this to false. Default value is false.

    Following code illustrates how to enable line bridging for a line connector:

  • c#
    • LineConnector l = new LineConnector();

      l.LineBridgingEnabled = true;
  • vbnet
    • Dim l As New LineConnector()

l.LineBridgingEnabled = True

    Enabling Line Bridging for Diagram View

    To enable line bridging for the Diagram View, set the LineBridgingEnabled property of DiagramView to true. To disable line bridging, set this to false. Default value is false.

    Following code illustrates how to enable line bridging for the Diagram View:

  • c#
    • DiagramView diagramView1 = new DiagramView ();

      diagramView1.LineBridgingEnabled = true;
  • vbnet
    • Dim diagramView1 As New DiagramView ()

diagramView1.LineBridgingEnabled = True

    NOTE

    When LineBridging for DiagramView is enabled or disabled, LineBridging for all the lines will also be enabled or disabled respectively. You can change this binding by specifying a value for an individual LineConnector.

    Connectors with Line Bridging

    Selecting, Moving, Deleting a LineConnector

    As this is a general topic to be shared between the Node and LineConnector, refer the general topics under Concepts and features using the following links:

    Select Node and Connectors

    Move Node and Connectors

    Customizing the Label for LineConnector

    As this is a general topic to be shared between the Node and LineConnector, refer the general topics under Concepts and features using the following links:

    Customize Label

    Line Routing

    When a link is drawn between two nodes, by enabling the LineRoutingEnabled property of that link and the diagram view, and if any other node is found in between them, the line will be automatically re-routed around those nodes.

    Line Routing

    Properties

    Property Description Type Datatype Reference links
    LineRoutingEnabled Specifies whether the links must be re-routed when nodes are found in the path. Default value is True. Dependency Boolean NA

    Disable Line Routing for LineConnector

    Line Routing for a line connector can be disabled using the LineRoutingEnabled property.

    By default this property will be set to True.

  • c#
    • LineConnector lc = new LineConnector();

lc.ConnectorType = ConnectorType.Orthogonal;

lc.LineBridgingEnabled = false;
  • vbnet
    • Dim lc As New LineConnector()

lc.ConnectorType = ConnectorType.Orthogonal

lc.LineBridgingEnabled = False

    The Line Routing is disabled.

    Enable LineRouting from DiagramView

    When LineRouting for DiagramView is enabled, LineRouting for all the lines will be enabled. You can change this binding by specifying a value for an individual LineConnector.

  • c#
    • DiagramView view = new DiagramView ();

view.LineRoutingEnabled = true
  • vbnet
    • Dim view As New DiagramView ()

view.LineRoutingEnabled = True

    The Line Routing is enabled completely.

    NOTE

    Only Orthogonal Connector type supports Line Routing.

    Node settings

    By default, TreatAsObstacle property of the Node is set to true to avoid the lines overlapping them. If not set for a Node, then it will not be considered as an obstacle and the line might overlap on them.

    Property Description Type Datatype Reference links
    TreatAsObstacle Gets or sets a value indicating whether the node treats as Obstacle.Default value is True. Dependency Boolean NA

    Customization of LineRouting

    This feature defines when the connectors have to be routed by setting the RoutingMode property of DiagramView.

    Properties

    Property Description Type Data Type
    RoutingMode Decides when the connectors should to be routed. Dependency property Enum

    Adding Customization of LineRouting in an Application

    Enabling the LineRouting

    To enable LineRouting, use the following code snippet:

  • c#
    • LineConnector line = new LineConnector();

line.LineRoutingEnabled = true;
  • vbnet
    • Dim line As New LineConnector()

line.LineRoutingEnabled = True

    RoutingMode

    RoutingMode property defines when the connectors have to be routed.

    It can be set to:

    1. DragEnd
    2. Immediate

    If this property is set to DragEnd, the connectors are routed only when the DiagramPage is stable. If the elements in the DiagramPage are moving or being dragged, the connectors are not routed. Only after the completion of the change, the connectors are routed.

  • c#
    • DiagramView View1 = new DiagramView();

View1.RoutingMode = RoutingMode.DragEnd;
  • vbnet
    • Dim view As New DiagramView()

view.RoutingMode = RoutingMode.DragEnd

    If this property is set to Immediate, the connectors are routed whenever the DiagramPage is getting changed.

  • c#
    • DiagramView View1 = new DiagramView();

View1.RoutingMode = RoutingMode.Immediate;
  • vbnet
    • Dim view As New DiagramView()

view.RoutingMode = RoutingMode.Immediate