Connection Port

Essential Diagram Silverlight provides the ability to define custom ports for making connections. The ConnectionPort class can be used for defining custom ports on the nodes. Any number of ports can be defined on a node. By default, every node has a center port.

ConnectionPort has the following properties:

Property Description Type of the property Value it accepts Any other dependencies/ sub properties associated
Left Gets or sets the position of the port in the x coordinate.Default value: 0 Dependency property Double No
Top Gets or sets the position of the port in the y coordinate.Default value: 0 Dependency property Double No
Node The Node property specifies the container of the port CLR Property Node No
PortShape The PortShape property specifies the shape to be used for the port. Three types of shapes are provided: Arrow, Circle, and Diamond.Default Value: PortShapes.Diamond CLR Property PortShapes.None
PortShapes.Arrow
PortShapes.Diamond
PortShapes.Circle		 No
PortStyle The PortStyle property provides option for the customization of the ports. CLR Property PortStyle No
CenterPortReferenceNo Gets or sets a value indicating whether the port is the center port of the node. CLR property int No
PortReferenceNo Gets or sets a value for port reference. CLR property int No

Node properties related to Connection Ports are:

Property Description Type of the property Value it accepts Any other dependencies/ sub properties associated
PortVisibility Gets or sets a value indicating whether all the ports of the node are visible or not.Default value: Visibility.Visible Dependency property Visibility.HiddenVisibility.CollapsedVisibility.Visible No
AllowPortDrag Gets or sets a value indicating whether the ports can be dragged or not.Default value: True Dependency property Boolean (true/ false) No
PortNodeReferenceNo Gets or sets a value for node reference number to which the port belongs. CLR property int No

LineConnector properties related to Connection Port are:

Property Description Type of the property Value it accepts Any other dependencies/ sub properties associated
ConnectionHeadPort Gets or sets the head port of the connection.While specifying the CoonectionHeadPort, the node containing the port should be specified as the HeadNode of the connection.Default value: Null Dependency property ConnectionPort No
ConnectionTailPort Gets or sets the head port of the connection.While specifying the CoonectionTailPort, the node containing the port should be specified as the TailNode of the connection.Default value: Null Dependency property ConnectionPort No

See Also

Creating Connection Port

To add a port to the node, the port’s position has to be specified using the Left and Top properties. The node which hosts the port should then be specified using the Node property. Finally the port should be added to the node’s Ports collection.

The following code shows adding a connection port to the node:

  • c#
    • Node node = new Node(Guid.NewGuid(), "Node1");

node.Shape = Shapes.RoundedSquare;

node.Width = 150;

node.Height = 50;

node.OffsetX = 250;

node.OffsetY = 100;


ConnectionPort port = new ConnectionPort();

port.Left = 50;

port.Top = 0;

port.Node = node;

node.Ports.Add(port);

diagramModel.Nodes.Add(node);
  • vbnet
    • Dim node As New Node(Guid.NewGuid(), "Node1")

node.Shape = Shapes.RoundedSquare

node.Width = 150

node.Height = 50

node.OffsetX = 250

node.OffsetY = 100



Dim port As New ConnectionPort()

port.Left = 50

port.Top = 0

port.Node = node

node.Ports.Add(port)

diagramModel.Nodes.Add(node)

    This adds a port to the node at the location (50,0) with respect to the node.

    Connection Port

    NOTE

    The ports location should always be specified to be within the node’s boundary. Therefore the values of the Left and Top property should always be less than the width and height of the node respectively.

    PortShape

    Several predefined shapes have been provided for the ports. They are:

    • Arrow
    • Circle
    • Diamond

    Property:

    Property Description Type of the property Value it accepts Any other dependencies/ sub properties associated
    PortShape The PortShape property specifies the shape to be used for the port. Three types of shapes are provided: Arrow, Circle, and Diamond.Default Value: PortShapes.Diamond CLR Property PortShapes.None
    PortShapes.Arrow
    PortShapes.Diamond
    PortShapes.Circle    		 No

    The following code shows how a port shape can be selected for the port.

  • c#
    • ConnectionPort port = new ConnectionPort(NewClient);

port.Left = 70;

port.Top = 90;

port.PortShape = PortShapes.Arrow;

NewClient.Ports.Add(port);

ConnectionPort port1 = new ConnectionPort(NewClient);

port1.Left = 10;

port1.Top = 50;

port1.PortShape = PortShapes.Circle;

NewClient.Ports.Add(port1);

ConnectionPort port2 = new ConnectionPort(NewClient);

port2.Left = 120;

port2.Top = 50;

port2.PortShape = PortShapes.Diamond;

NewClient.Ports.Add(port2);
  • vbnet
    • Dim port As New ConnectionPort(NewClient)

port.Left = 70

port.Top = 90

port.PortShape = PortShapes.Arrow

NewClient.Ports.Add(port)

Dim port1 As New ConnectionPort(NewClient)

port1.Left = 10

port1.Top = 50

port1.PortShape = PortShapes.Circle

NewClient.Ports.Add(port1)

Dim port2 As New ConnectionPort(NewClient)

port2.Left = 120

port2.Top = 50

port2.PortShape = PortShapes.Diamond

NewClient.Ports.Add(port2)

    NewClient is the Node of Diagram Page.

    port1

    Port Shapes

    Customizing PortStyle

    The port shapes can be customized by specifying the property values under the PortStyle property.

    Property:

    Property Description Type of the property Value it accepts Any other dependencies/ sub properties associated
    PortStyle The PortStyle property provides option for the customization of the ports. CLR Property PortStyle No

    The various properties under the PortStyle property are,

    • Fill - Specifies the color to be used to fill the port.
    • StrokeThickness - Specifies the thickness value for the port’s border.
    • Stroke - Specifies the color to be used for the border of the port.
    • 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.

    The following code shows the setting of some of these properties:

  • c#
    • Node NewClient = new Node(Guid.NewGuid(), "NewClient");

    NewClient.Shape = Shapes.Rectangle;

    NewClient.Level = 0;

    NewClient.Width = 150;

    NewClient.Height = 100;

    NewClient.OffsetX = 40;

    NewClient.OffsetY = 100;

    NewClient.Label = "NewClient";

    NewClient.NodePathFill = new SolidColorBrush(Colors.Brown);

    NewClient.Level = 0;            

    diagramControl1.Model.Nodes.Add(NewClient);

	ConnectionPort port = new ConnectionPort(NewClient);

    port.Left = 50;

    port.Top = 50;

    port.Node = NewClient;

    port.Height = 20;

    port.Width = 20;

    port.PortShape = PortShapes.Diamond;

    port.PortStyle.Fill = new SolidColorBrush(Colors.Yellow);

    port.PortStyle.Stroke = new SolidColorBrush(Colors.Green);

    NewClient.Ports.Add(port);
  • vbnet
    • Dim NewClient As New Node(Guid.NewGuid(), "NewClient")

NewClient.Shape = Shapes.Rectangle

NewClient.Level = 0

NewClient.Width = 150

NewClient.Height = 100

NewClient.OffsetX = 40

NewClient.OffsetY = 100

NewClient.Label = "NewClient"

NewClient.NodePathFill = New SolidColorBrush(Colors.Brown)

NewClient.Level = 0

diagramControl1.Model.Nodes.Add(NewClient)


Dim port As New ConnectionPort(NewClient)

port.Left = 50

port.Top = 50

port.Node = NewClient

port.Height = 20

port.Width = 20

port.PortShape = PortShapes.Diamond

port.PortStyle.Fill = New SolidColorBrush(Colors.Yellow)

port.PortStyle.Stroke = New SolidColorBrush(Colors.Green)

NewClient.Ports.Add(port)

    port3

    Port Styles

    Port Visibility

    The PortVisibility property is used to make the connection ports visible on nodes in three different ways. This PortVisibility Enum class provides 3 types of Enum properties.

    1. OnMouseOver

    2. AlwaysHidden

    3. AlwaysVisible

    Properties

    Property Description Type Data Type
    PortVisibility Gets and sets on what action the port will be visible or not. Dependency Enum

    Adding PortVisibility to an Application

    OnMouseOver

    When the PortVisibility property of the node is set to OnMouseOver. The connection port will be visible only on mouse-over of the node. This is the default value of this property.

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

node.PortVisibility = PortVisibility.MouseOverNode;
  • vbnet
    • Dim node As New Node()

node.PortVisibility = PortVisibility.MouseOverNode

    AlwaysHidden

    The connection port will always be hidden when the PortVisibility property of the node is set to AlwaysHidden.

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

node.PortVisibility = PortVisibility. AlwaysHidden;
  • vbnet
    • Dim node As New Node()

node.PortVisibility = PortVisibility.AlwaysHidden

    AlwaysVisible

    The connection port will always be visible when the PortVisiblity property of the node is set to AlwaysVisible.

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

node.PortVisibility = PortVisibility.AlwaysVisible;
  • vbnet
    • Dim node As New Node()

node.PortVisibility = PortVisibility.AlwaysVisible
    • Changes: From version 10.2 onwards, the Type of PortVisibility property of the Node has been changed from ‘Visibility’ to ’PortVisibility‘ Enum.

    AllowPortDrag

    It is possible to move the ports on the node to a different location on the node. All that is needed to do is to drag the respective port to the desired location. The connections (if any) which are already connected to the nodes are also updated accordingly. The node drag can be enabled/disabled using the AllowPortDrag property. By default it is set to false.

    The following code shows the setting of the AllowPortDrag property:

  • c#
    • Node nodeObject = new Node(Guid.NewGuid(), "Node1");

diagramModel.Nodes.Add(nodeObject);

nodeObject.AllowPortDrag = true;
  • vbnet
    • Dim nodeObject As New Node(Guid.NewGuid(), "Node1")

diagramModel.Nodes.Add(nodeObject)

nodeObject.AllowPortDrag = True

    Connections to Port

    Make a connection to the port through code behind

    The ConnectionHeadPort and ConnectionTailPort properties can be used to specify the ports to be used for connecting to the nodes. The HeadNode and TailNode should still be specified.

    The following code shows the connection to the ports:

  • c#
    • Node nodeObject = new Node(Guid.NewGuid(), "Node1");

diagramModel.Nodes.Add(nodeObject);

nodeObject.AllowPortDrag = true;Node node = new Node(Guid.NewGuid(), "Node1");

node.Shape = Shapes.RoundedSquare;

node.Width = 150;

node.Height = 50;

node.OffsetX = 250;

node.OffsetY = 100;

ConnectionPort port = new ConnectionPort();

port.Left = 50;

port.Top = 20;

port.Node = node;

node.Ports.Add(port);

diagramModel.Nodes.Add(node);

Node node1 = new Node(Guid.NewGuid(), "Node1");

node1.Shape = Shapes.RoundedSquare;

node1.Width = 150;

node1.Height = 50;

node1.OffsetX = 250;

node1.OffsetY = 200;

ConnectionPort port1 = new ConnectionPort();

port1.Left = 20;

port1.Top = 20;

port1.Node = node1;

node1.Ports.Add(port1);

diagramModel.Nodes.Add(node1);

diagramModel.Nodes.Add(node1);

LineConnector o = new LineConnector();

o.ConnectorType = ConnectorType.Straight;

o.TailNode = node;

o.HeadNode = node1;

o.HeadDecoratorShape = DecoratorShape.None;

o.TailDecoratorShape = DecoratorShape.None;

o.ConnectionTailPort = port;

o.ConnectionHeadPort = port1;

LineConnector o1 = new LineConnector();

o1.ConnectorType = ConnectorType.Straight;

o1.TailNode = node;

o1.HeadNode = node1;

o1.HeadDecoratorShape = DecoratorShape.None;

o1.TailDecoratorShape = DecoratorShape.None;

diagramModel.Connections.Add(o);

diagramModel.Connections.Add(o1);
  • vbnet
    • Dim nodeObject As New Node(Guid.NewGuid(), "Node1")

diagramModel.Nodes.Add(nodeObject)

nodeObject.AllowPortDrag = True

Dim node As New Node(Guid.NewGuid(), "Node1")

node.Shape = Shapes.RoundedSquare

node.Width = 150

node.Height = 50

node.OffsetX = 250

node.OffsetY = 100

Dim port As New ConnectionPort()

port.Left = 50

port.Top = 20

port.Node = node

node.Ports.Add(port)

diagramModel.Nodes.Add(node)

Dim node1 As New Node(Guid.NewGuid(), "Node1")

node1.Shape = Shapes.RoundedSquare

node1.Width = 150

node1.Height = 50

node1.OffsetX = 250

node1.OffsetY = 200

Dim port1 As New ConnectionPort()

port1.Left = 20

port1.Top = 20

port1.Node = node1

node1.Ports.Add(port1)

diagramModel.Nodes.Add(node1)

diagramModel.Nodes.Add(node1)

Dim o As New LineConnector()

o.ConnectorType = ConnectorType.Straight

o.TailNode = node

o.HeadNode = node1

o.HeadDecoratorShape = DecoratorShape.None

o.TailDecoratorShape = DecoratorShape.None

o.ConnectionTailPort = port

o.ConnectionHeadPort = port1

Dim o1 As New LineConnector()

o1.ConnectorType = ConnectorType.Straight

o1.TailNode = node

o1.HeadNode = node1

o1.HeadDecoratorShape = DecoratorShape.None

o1.TailDecoratorShape = DecoratorShape.None

diagramModel.Connections.Add(o)

diagramModel.Connections.Add(o1)

    Connecting to Port

    Make a connection to the port at run time

    The following steps illustrate creating a connection to the port at run time.

    To connect to a port on the node at run time:

    1.Click the desired line icon and start dragging the mouse from the desired port on the node to the target node or port.

    2.As the mouse pointer moves over the ports, a red border will appear on the respective ports indicating that the mouse is over the port.

    3.To make a connection, drop the other end of the line on the desired port or node.

    Connecting to the center port will make the connection to the boundary of the node.If the node does not contain any port other than the default center port and the end of the line connector is dropped on the node, then the connection will take place on the node’s boundary.

    In case the node contains a port, then to connect to the node’s boundary, the line connector should be dropped on the center port. A red border will appear around the node indicating that the connection will be made to the node’s boundary.

    Adding a Connection Port at Run Time

    This feature provides an option to add connection ports at run time through mouse operations. Similarly, connection ports can be removed from a node through mouse operations.

    Properties

    Property Description Type of property Value it Accepts Any other dependencies/ sub properties associated
    AddConnectionPortEnabled Property used to enable or disable dynamically adding a connection port. Dependency property Boolean (true/false) No

    Adding a Connection Port at Run Time

    To allow connection ports to be added to a node dynamically, set the AddConnectionPortEnabled property of the node to true, and then select the node. Hold CTRL+SHIFT and click on the node. The connection port will be added in the position where you clicked on the node.

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

      //Set True value to AddConnectionPortEnabled property.

      node.AddConnectionPortEnabled = true;
  • vbnet
    •       Dim node As New Node()

      'Set True value to AddConnectionPortEnabled property.

      node.AddConnectionPortEnabled = True

    Deleting a Connection Port at Run Time

    A connection port can be deleted from the node dynamically. With the AllowDelete property of a port set to true, hold CTRL+SHIFT and click on the connection port to delete it. The default value of the AllowDelete property is set to true. This can be disabled by setting the AllowDelete property to false.

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

      //Set false value to Connection Port disable Delete a port dynamically.

      (node.Ports[1] as ConnectionPort).AllowDelete = false;
  • vbnet
    •        Dim node As New Node()

      'Set false value to Connection Port disable Delete a port dynamically.

      TryCast(node.Ports(1), ConnectionPort).AllowDelete = False