General

This section illustrates the general features pertaining to both Node and LineConnector.

Selecting Nodes and Connectors

By moving the mouse pointer to the desired node or connector, and clicking the left mouse
button, the corresponding node or connector is selected; this is indicated by an adorner
being displayed. It also displays a RotateThumb on the top left corner of the node.

Items on the drawing area are selected automatically if they fall within the bounds of the drag adorner.
The drag adorner is displayed when the user clicks anywhere on the page and starts dragging the mouse pointer.
A rectangle is formed with a drag start-point as one of its points, and the point where the mouse button is released as its second point, defines the drag adorner’s bounds.

Node Selection

Moving Nodes and Connectors

For moving nodes from one position to another, just click and drag the desired node. Connections can also be moved to other nodes and a new node will start acting as the head node or the tail node, depending where the connector was moved from.

To move the connector:

Click on the connector to be moved.
An adorner will be displayed on the head and the tail decorators, indicating the selection of the connector.
Now click and drag the desired decorator shape and drop it on the node to which you want to connect.

Moving Connector

As seen in the figure, the connector will then be removed from the old node and added to the node that is currently hit.

Customizing the Label of Nodes and Line Connectors

The labels of the nodes and connectors are equipped with Multiline support i.e. the user can specify the labels to span multiple lines by setting the LabelTextWrapping property to wrap the text and by specifying the width of the label. Also, several other customization properties have been added for the labels. These are tabulated below:

Properties

Property	Description	Type of the property	Value it accepts	Any other dependencies/ sub properties associated
LabelForeground	Gets or sets the foreground of the label. The default value is Black.	Dependency property	Brush	No
LabelBakground	Gets or sets the background of the label. The default value is White.	Dependency property	Brush	No
LabelFontStyle	Gets or sets the background of the label. The default value is White.	Dependency property	FontStyles.Oblique FontStyles.Italic FontStyles.Normal	No
LabelFontFamily	Gets or sets the font family of the label. The default value is Arial.	Dependency property	FontFamily	No
LabelFontSize	Gets or sets the font size of the label. The default value is 11.	Dependency property	Double	No
LabelFontWeight	Gets or sets the font weight of the label. The default value is SemiBold.	Dependency property	FontWeights	No
LabelTextWrapping	Gets or sets the text wrapping of the label. The default value is NoWrap.	Dependency property	TextWrapping.NoWrap TextWrapping.Wrap TextWrapping.WrapWithOverflow	No
LabelWidth	Gets or sets the width of the label. The default value is node’s width.	Dependency property	Double	No

The following code snippet illustrates the implementation of the properties mentioned in the table above.

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

node1.Shape = Shapes.RoundedSquare;

node1.Width = 150;

node1.Height = 50;

node1.OffsetX = 250;

node1.OffsetY = 100;

node1.Label = "This is a Multiline Label ";

node1.LabelWidth = 70;

node1.LabelHeight = 150;

node1.LabelTextWrapping = TextWrapping.Wrap;

node1.LabelForeground = new SolidColorBrush(Colors.Red);

node1.LabelFontSize = 14;

node1.LabelFontStyle = FontStyles.Italic;



Node node2 = new Node(Guid.NewGuid(), "ClientAccountInfo");

node2.Shape = Shapes.FlowChart_Card;

node2.Width = 150;

node2.Height = 60;

node2.OffsetX = 450;

node2.OffsetY = 100;

node2.LabelWidth = 75;

node2.LabelHeight = 150;

node2.LabelTextWrapping = TextWrapping.Wrap;

node2.LabelForeground = new SolidColorBrush(Colors.Yellow);

node2.LabelFontSize = 16;

node2.LabelHorizontalAlignment = HorizontalAlignment.Center;

node2.Label = "Here text is aligned to left";



LineConnector line = new LineConnector();

line.ConnectorType = ConnectorType.Straight;

line.TailNode = node1;

line.HeadNode = node2;

line.HeadDecoratorShape = DecoratorShape.None;

line.Label = "Connected";

line.LabelWidth = 44;

line.LabelHeight = 100;

line.LabelTextWrapping = TextWrapping.Wrap;

line.LabelForeground = new SolidColorBrush(Colors.Green);

line.LabelFontSize = 12;

line.LabelFontStyle = FontStyles.Normal;

line.LabelBackground = new SolidColorBrush(Colors.Yellow);

diagramControl.Model.Nodes.Add(node1);

diagramControl.Model.Nodes.Add(node2);

diagramControl.Model.Connections.Add(line);

vbnet

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

node1.Shape = Shapes.RoundedSquare

node1.Width = 150

node1.Height = 50

node1.OffsetX = 250

node1.OffsetY = 100

node1.Label = "This is a Multiline Label "

node1.LabelWidth = 70

node1.LabelHeight = 150

node1.LabelTextWrapping = TextWrapping.Wrap

node1.LabelForeground = New SolidColorBrush(Colors.Red)

node1.LabelFontSize = 14

node1.LabelFontStyle = FontStyles.Italic



Dim node2 As New Node(Guid.NewGuid(), "ClientAccountInfo")

node2.Shape = Shapes.FlowChart_Card

node2.Width = 150

node2.Height = 60

node2.OffsetX = 450

node2.OffsetY = 100

node2.LabelWidth = 75

node2.LabelHeight = 150

node2.LabelTextWrapping = TextWrapping.Wrap

node2.LabelForeground = New SolidColorBrush(Colors.Yellow)

node2.LabelFontSize = 16

node2.LabelHorizontalAlignment = HorizontalAlignment.Center

node2.Label = "Here text is aligned to left"



Dim line As New LineConnector()

line.ConnectorType = ConnectorType.Straight

line.TailNode = node1

line.HeadNode = node2

line.HeadDecoratorShape = DecoratorShape.None

line.Label = "Connected"

line.LabelWidth = 44

line.LabelHeight = 100

line.LabelTextWrapping = TextWrapping.Wrap

line.LabelForeground = New SolidColorBrush(Colors.Green)

line.LabelFontSize = 12

line.LabelFontStyle = FontStyles.Normal

line.LabelBackground = New SolidColorBrush(Colors.Yellow)

diagramControl.Model.Nodes.Add(node1)

diagramControl.Model.Nodes.Add(node2)

diagramControl.Model.Connections.Add(line)

The following output is generated using the code snippets above:

Customized Multiline Label

Context Menu

Essential Diagram for Silverlight provides support for displaying the context menu for nodes and connectors by right-clicking the node or connector. The context menu contains some commands by default, namely Order (BringToFront, SendToBack, MoveForward, and SendBackward), Grouping (Group and Ungroup), and Delete. The context menu can be customized so that users can add ContextMenuControlItem by using the ContextMenu property of the nodes and line connectors.

Use Case Scenarios

The context menu is used to hold frequently used operations, namely Grouping and Order commands as ContextMenuItems. These operations can be performed by clicking the respective ContextMenuItem.

Context Menu

The context menu of the nodes can be customized by adding ContextMenuControlItem, as shown in the following code snippets.

xaml

<syncfusion:Node Shape="Ellipse" Width="100" Height="100">

    <syncfusion:Node.ContextMenu>

        <syncfusion:ContextMenuControl>

            <syncfusion:ContextMenuControl.Items>

                <syncfusion:ContextMenuControlItem Header="Option1"/>

                <syncfusion:ContextMenuControlItem Header="Option2"/>

                <syncfusion:ContextMenuControlItem Header="Option3"/>

            </syncfusion:ContextMenuControl.Items>

        </syncfusion:ContextMenuControl>

    </syncfusion:Node.ContextMenu>

</syncfusion:Node>

ContextMenuControl menu = new ContextMenuControl();

ContextMenuControlItem item1 = new ContextMenuControlItem();

item1.Header = "Custom Option1";

ContextMenuControlItem item2 = new ContextMenuControlItem();

item2.Header = "Custom Option2";

ContextMenuControlItem item3 = new ContextMenuControlItem();

item3.Header = "Custom Option3";

menu.Items.Add(item1);

menu.Items.Add(item2);

menu.Items.Add(item3);

node1.ContextMenu = menu;

vbnet

Dim menu As New ContextMenuControl()

Dim item1 As New ContextMenuControlItem()

item1.Header = "Custom Option1"

Dim item2 As New ContextMenuControlItem()

item2.Header = "Custom Option2"

Dim item3 As New ContextMenuControlItem()

item3.Header = "Custom Option3"

menu.Items.Add(item1)

menu.Items.Add(item2)

menu.Items.Add(item3)

node1.ContextMenu = menu

Similarly, the context menu of the connectors can be customized by adding ContextMenuControlItem, as shown in the following code snippet.

LineConnector line = new LineConnector();  
     
line.ContextMenu = menu;

vbnet

Dim line As New LineConnector()

line.ContextMenu = menu

Custom Context Menu

The context menu can also be assigned to all the nodes on a page by using the NodeContextMenu property. Similarly, DiagramView’s LineConnectorContextMenu property can be used to assign the customized context menu to all the lines on a page, as shown in the following code snippet.

ContextMenuControl menu1 = new ContextMenuControl();

ContextMenuControlItem item11 = new ContextMenuControlItem();

item11.Header = "Custom Option11";

ContextMenuControlItem item21 = new ContextMenuControlItem();

item21.Header = "Custom Option21";

ContextMenuControlItem item31 = new ContextMenuControlItem();

item31.Header = "Custom Option31";

menu1.Items.Add(item11);

menu1.Items.Add(item21);

menu1.Items.Add(item31);

diagramView.NodeContextMenu = menu1;

diagramView.LineConnectorContextMenu = menu1;

vbnet

Dim menu1 As New ContextMenuControl()

Dim item11 As New ContextMenuControlItem()

item11.Header = "Custom Option11"

Dim item21 As New ContextMenuControlItem()

item21.Header = "Custom Option21"

Dim item31 As New ContextMenuControlItem()

item31.Header = "Custom Option31"

menu1.Items.Add(item11)

menu1.Items.Add(item21)

menu1.Items.Add(item31)

diagramView.NodeContextMenu = menu1

diagramView.LineConnectorContextMenu = menu1

NOTE

If a context menu is assigned to all the nodes on a page by using Node’s ContextMenu property and DiagramView’s NodeContextMenu property, then Node’s ContextMenu property will take precedence over DiagramView’s NodeContextMenu property.

Properties

The property of the context menu for the nodes and line connectors is described in the following tabulation:

Property	Description	Type	Data Type	Reference links
ContextMenu	Refers to an instance of ContextMenuControl for the Node and LineConnector.	Dependency property	ContextMenuControl	Not applicable

General

Selecting Nodes and Connectors

Moving Nodes and Connectors

Customizing the Label of Nodes and Line Connectors

Properties

Context Menu

Use Case Scenarios

Customizing the Context Menu

Properties