Nodes

Nodes are graphical objects that can be placed on the page; it is usually used to represent visual data to be placed on the page.

Properties

Property	Description	Type of the property	Value it Accept	Any other dependencies/ sub properties associated
IsLabelEditable	Gets or sets a value indicating whether the node's label can be edited or not. The default value is set to true.	Dependency property	Boolean(true/ false)	No
Label	Gets or sets the node label	Dependency property	string	No
LabelVisibility	Gets or sets the label visibility	Dependency property	Visibility.Hidden Visibility.Collapsed Visibility.Visible	No
LabelHorizontalAlignment	Specifies the horizontal alignment for the node label	Dependency property	HorizontalAlignment.Center HorizontalAlignment.Left HorizontalAlignment.Right HorizontalAlignment.Stretch	No
LabelVerticalAlignment	Specifies the vertical alignment for the node label	Dependency property	VerticalAlignment.Bottom VerticalAlignment.Center VerticalAlignment.Stretch VerticalAlignment.Top	No
HorizontalContentAlignment	Specifies the horizontal alignment for the node content	Dependency property	HorizontalAlignment.Center HorizontalAlignment.Left HorizontalAlignment.Right HorizontalAlignment.Stretch	No
VerticalContentAlignment	Specifies the vertical alignment for the node content	Dependency property	VerticalAlignment.Bottom VerticalAlignment.Center VerticalAlignment.Stretch VerticalAlignment.Top	No
LabelAngle	Gets or sets the angle of the node label	Dependency property	double	No
Shape	Specifies the shape of the node	Dependency property	Shapes	No
CustomPathStyle	Gets or sets the CustomPathStyle for the node	Dependency property	Style	No
Level	Gets or sets the node level	Dependency property	int	No
OffsetX	Gets or sets the offset x value of the node	CLR Property	double	No
OffsetY	Gets or sets the offset y value of the node	CLR Property	double	No
Content	Gets or sets the node's content	Dependency property	object	No
AllowMove	Gets or sets a value indicating whether the node can be moved or not. The default value is set to true.	Dependency property	Boolean (true/ false)	No
AllowSelect	Gets or sets a value indicating whether the node can be selected or not. The default value is set to true.	Dependency property	Boolean (true/ false)	No
AllowRotate	Gets or sets a value indicating whether the node can be rotated or not. The default value is set to true.	Dependency property	Boolean (true/ false)	No
AllowResize	Gets or sets a value indicating whether the node can be resized or not. The default value is set to true.	Dependency property	Boolean (true/ false)	No
LabelForeground	Gets or sets the foreground of the label. Default value is Black.	Dependency property	Brush	No
LabelBackground	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	FontStyle	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	FontWeight	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
IsLabelDragable	Gets or sets the Label of Node is Dragging or Not.	Dependency property	bool(true/false)	False
LabelDisplacement	Gets or sets the different between the Original position and the Current position of the Node’s Label.	Dependency property	Point	Point(0,0)
OutDegree	Gets the out-degree of the node, the number of edges for which this node is the source.	CLR property	int	No
OutEdges	Gets the collection of all outgoing edges for which this node is the source.	CLR property	CollectionExt	No
OutNeighbours	Gets the collection of adjacent nodes connected to this node by an outgoing edge (i.e. all nodes "pointed" to by this one).	CLR property	CollectionExt	No
InDegree	Gets the in-degree of the node, the number of edges for which this node is the target.	CLR property	int	No
InEdges	Gets the collection of all incoming edges for which this node is the target.	CLR property	CollectionExt	No
InNeighbours	Gets the collection of all adjacent nodes connected to this node by an incoming edge (i.e., all nodes that "point" at this one).	CLR property	CollectionExt	No
Edges	Gets the collection of all intersecting edges for which this node is either the source or the target.	CLR property	CollectionExt	No
Neighbours	Gets an iterator over all nodes connected to this node.	CLR property	CollectionExt	No
Degree	Gets the degree of the node, the number of edges for which this node is either the source or the target.	CLR property	int	No
ResizeThisNode	Gets or sets a value indicating whether to resize this node. Used for serialization purposes.	CLR property	Boolean (true/false)	No
ContentHitTestVisible	Gets or sets a value indicating whether content is hit test visible. Used for serialization purposes internally.		Boolean (true/ false)
IsDragConnectionOver	Gets or sets a value indicating whether the connection drag is over.	CLR property	Boolean (true/false)	No
AllowDelete	Gets or sets a value indicating whether a node can be deleted.	Dependency property	Boolean (true/ false)	No
IsGrouped	Gets or sets a value indicating whether a node is grouped.	Dependency property	Boolean (true/ false)	No
PortReferenceCount	Gets or sets the reference count for a port.	CLR property	int	No

Creating Node

Nodes are graphical objects that can be drawn on the page by selecting them from the Symbol Palette and dropping them on the page or they can be added through code behind using a model.

A Node can be created and added into the DiagramModel in three ways namely:

Through SymbolPalette
Through XAML
Through Code Behind

Adding Through SymbolPalette

Steps for adding a node to the diagram using the Symbol Palette are:

1.Click the desired node on the Symbol Palette.

Item Selected

2.When pressing the left mouse button, drag the pointer to the drawing area.

Item Dragged

3.Now release the mouse button. The desired node is now on the drawing area at the point where the pointer was released.

Items Dropped

Adding Through XAML

A Node can also be added into the model through XAML. The following code describes the method it can be done.

xaml

<syncfusion:DiagramControl Name="diagramControl" IsSymbolPaletteEnabled="True">

    <syncfusion:DiagramControl.Model>

        <syncfusion:DiagramModel   x:Name="diagramModel">

            <syncfusion:DiagramModel.Nodes>

                <syncfusion:Node Width="200" Height="70" Shape="FlowChart_Card">

                </syncfusion:Node>

            </syncfusion:DiagramModel.Nodes>

        </syncfusion:DiagramModel>

    </syncfusion:DiagramControl.Model>

    <syncfusion:DiagramControl.View>

        <syncfusion:DiagramView Bounds="0,0,1200,1200" Name="diagramView">

        </syncfusion:DiagramView>

    </syncfusion:DiagramControl.View>

</syncfusion:DiagramControl>

Here, a node is created and added into the model.

Adding Through code behind

A Node can be created using one of the three different constructors:

Node ()
Node (Guid)
Node (Guid, sting)
Nodes can be added through the model. The following code describes the way it can be done.

Node n = new Node();

n.Shape = Shapes.FlowChart_Card;

diagramModel.Nodes.Add(n);

vbnet

Dim n As New Node()

n.Shape = Shapes.FlowChart_Card

diagramModel.Nodes.Add(n)

A node can be created with a new ID. The following code describes the way it can be done.

Node n = new Node(Guid.NewGuid());

n.Shape = Shapes.FlowChart_Card;

diagramModel.Nodes.Add(n);

vbnet

Dim n As New Node(Guid.NewGuid())

n.Shape = Shapes.FlowChart_Card

diagramModel.Nodes.Add(n)

A node can also be created with a new ID and a name. The following code describes the way it can be done.

Node n = new Node(Guid.NewGuid(), "First");

n.Shape = Shapes.FlowChart_Card;

diagramModel.Nodes.Add(n);

vbnet

Dim n As New Node(Guid.NewGuid(), "First")

n.Shape = Shapes.FlowChart_Card

diagramModel.Nodes.Add(n)

NewGuid() creates a new instance of the Guid class. The string value sets the identifying name of the element. The name provides a reference so that the code-behind, such as event handler code, can refer to a markup element after it is constructed during processing by an XAML processor.

NOTE

If the name is not specified for a node, a unique name will be automatically assigned to the node.

Node Added through Model

Node Shapes

The Node’s Shapes are a collection of predefined geometry that is used to represent a Node’s style. Node Shape visually lies between Node’s Content and Node’s Background.

Properties

Property	Description	Type of the property	Value it Accept	Any other dependencies/ sub properties associated
Shape	Specifies the shape of the node	Dependency property	Shapes	No
CustomPathStyle	Gets or sets the CustomPathStyle for the node	Dependency property	Style	No

Predefined Node Shapes

A node can be assigned with a shape using the Shape property. Several built-in shapes are provided. The user can select from any one of the built-in shapes or specify their own custom shapes using the CustomPathStyle property, which will be explained later in this user guide.

Node n = new Node();

n.Shape = Shapes.FlowChart_Card;

diagramModel.Nodes.Add(n);

vbnet

Dim n As New Node()

n.Shape = Shapes.FlowChart_Card

diagramModel.Nodes.Add(n)

The following is a list of built-in shapes:

Built-in Shapes

More Built-in Shapes

Customizing the appearance of the pre-defined Shape

The appearance of the predefined shapes can be customized by applying style for CustomPathStyle property.

Styles can be applied for CustomPathStyle in two different ways:

Through XAML
Through Code Behind

xaml

<Style TargetType="syncfusion:Node" >

    <Setter Property="CustomPathStyle">

        <Setter.Value>

            <Style TargetType="Path" >

                <Setter Property="Fill" Value="LightGray" />

            </Style>

        </Setter.Value>

    </Setter>

</Style>

Setter s = new Setter(System.Windows.Shapes.Path.FillProperty, new SolidColorBrush(Colors.LightGray));

Style style = new Style();

style.Setters.Add(s);

Node n = new Node();

n.Style=style;

n.Shape = Shapes.FlowChart_Card;

diagramModel.Nodes.Add(n);

vbnet

Dim s As New Setter(System.Windows.Shapes.Path.FillProperty, New SolidColorBrush(Colors.LightGray))

Dim style As New Style()

style.Setters.Add(s)

Dim n As New Node()

n.Style=style

n.Shape = Shapes.FlowChart_Card

diagramModel.Nodes.Add(n)

Custom Shape

Users can specify their own custom shapes to be used for the node as follows. First, create a style resource that contains your custom shape.

xaml

<Style TargetType="{x:Type Path}" x:Key="myNode">

    <Setter Property="Data" Value="M200,239L200,200 240,239 280,202 320,238 281,279 240,244 198,279z"></Setter>

    <Setter Property="Fill" Value="MidnightBlue" />

</Style>

Now use it for the node; the following code can be used as an example:

Style s = (Style)this.Resources["myNode"];

Node n = new Node();

n.Shape = Shapes.CustomPath;

n.CustomPathStyle = s;

diagramModel.Nodes.Add(n);

vbnet

Dim s As Style = CType(Me.Resources("myNode"), Style)

Dim n As New Node()

n.Shape = Shapes.CustomPath

n.CustomPathStyle = s

diagramModel.Nodes.Add(n)

Custom Node

Node Content

Node is used to visually represent any UIElemnts using the Content property. The user can host any content inside the node using the Content property. Node supports control template, by the defined template for the nodes. Business object can be assigned as Node’s Content and the template will look after the representation of the business object.

NOTE

A Node can have both Content and Shape at the same time. In doing so, Content will be placed over the Shape.

Properties

Property	Description	Type of the property	Value it Accept	Any other dependencies/ sub properties associated
Content	Gets or sets the node's content	Dependency property	object	No
HorizontalContentAlignment	Specifies the horizontal alignment for the node content	Dependency property	HorizontalAlignment.Center HorizontalAlignment.Left HorizontalAlignment.Right HorizontalAlignment.Stretch	No
VerticalContentAlignment	Specifies the vertical alignment for the node content	Dependency property	VerticalAlignment.Bottom VerticalAlignment.Center VerticalAlignment.Stretch VerticalAlignment.Top	No

UIElement Content

Node’s Content can be specified in two ways namely:

Through XAML
Through Code Behind

xaml

<syncfusion:DiagramControl Name="diagramControl" IsSymbolPaletteEnabled="True">

    <syncfusion:DiagramControl.Model>

        <syncfusion:DiagramModel   x:Name="diagramModel">

            <syncfusion:DiagramModel.Nodes>

                <syncfusion:Node Width="200" Height="70" Shape="FlowChart_Card" HorizontalContentAlignment="Center" VerticalContentAlignment="Center">

                    <Button Content="Click Me!"></Button>

                </syncfusion:Node>

            </syncfusion:DiagramModel.Nodes>

        </syncfusion:DiagramModel>

    </syncfusion:DiagramControl.Model>

    <syncfusion:DiagramControl.View>

        <syncfusion:DiagramView Bounds="0,0,1200,1200" Name="diagramView">

        </syncfusion:DiagramView>

    </syncfusion:DiagramControl.View>

</syncfusion:DiagramControl>

Node n = new Node();

n.Shape = Shapes.FlowChart_Card;

Button b = new Button();

b.Content = "Click me";

n.Content = b;

(n.Content as Button).IsHitTestVisible = true;

vbnet

Dim n As New Node()

n.Shape = Shapes.FlowChart_Card

Dim b As New Button()

b.Content = "Click me"

n.Content = b

TryCast(n.Content, Button).IsHitTestVisible = True

Node Content

Business-Object Content with ContentTemplate

Node can even have a business object and a content template can be used to define how the business object should look line.

The following code example illustrates assigning a business object as content of a node.

//Business Object

    public class BusinessObject

    {

        //Business Property

        public string BusinessProperty

        {

            get;

            set;

        }

    }

Node n = new Node();

//Assign an instance of Business Object to Node’s Content

n.Content = new BusinessObject() { BusinessProperty = "BusinessProperty" };

diagramModel.Nodes.Add(n);

vbnet

'Business Object

    Public Class BusinessObject

        'Business Property

        Private privateBusinessProperty As String

        Public Property BusinessProperty() As String

            Get

                Return privateBusinessProperty

            End Get

            Set(ByVal value As String)

                privateBusinessProperty = value

            End Set

        End Property

    End Class

    Private n As New Node()

    'Assign an instance of Business Object to Node’s Content

    n.Content = New BusinessObject() With {.BusinessProperty =   "BusinessProperty"}

    diagramModel.Nodes.Add(n)

The following code example illustrates specifying a content template for a node.

xaml

<!-- Template for Node -->

<!-- Define the appearance of the Business Object -->

<DataTemplate x:Key="NodeTemplate">

       <Border BorderThickness="2" BorderBrush="Blue" CornerRadius="5">

              <TextBlock Text="{Binding Path=BusinessProperty}" HorizontalAlignment="Center" VerticalAlignment="Center"/>

       </Border>

</DataTemplate>

<!-- Style for Node --> 

<Style TargetType="syncfusion:Node">

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

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

       <Setter Property="VerticalContentAlignment" Value="Stretch"></Setter>

       <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>

       <Setter Property="ContentTemplate" Value="{StaticResource NodeTemplate}" />

</Style>

Node’s Content having Business Object with ContentTemplate

Node Position

The node’s location on the drawing area can be manually specified using the node’s OffsetX and OffsetY properties.

Properties

Property	Description	Type of the property	Value it Accept	Any other dependencies/ sub properties associated
OffsetX	Gets or sets the offset x value of the node	CLR Property	double	No
OffsetY	Gets or sets the offset y value of the node	CLR Property	double	No
AllowMove	Gets or sets a value indicating whether a node can be moved or not. The default value is set to true.	Dependency property	Boolean (true/ false)	No

NOTE

There is two more properties called LogicalOffsetX and LogicalOffsetY which is used only for internal calculations, and they do not support negative values, so please use only OffsetX and OffsetY property.

Specify node’s location

Node’s location can be changed in the following two ways:

At Runtime
Through Code Behind

At Runtime

Node’s location can be changed at run time by clicking and dragging the Node. To change the node’s location:

Select the node that is to be dragged to change its location.
Move the pointer and place it on the Node.
The cursor will change to a four sided Arrow Cursor.
Now click and drag the node to change the node’s location. The node’s OffsetX and OffsetY values will correspondingly change.

Through Code Behind

Node’s location can be changed using the following code snippet:

Node n = new Node();

n.OffsetX = 50;

n.OffsetY = 50;

n.Shape = Shapes.FlowChart_Card;

diagramModel.Nodes.Add(n);

vbnet

Dim n As New Node()

n.OffsetX = 50

n.OffsetY = 50

n.Shape = Shapes.FlowChart_Card

diagramModel.Nodes.Add(n)

The node will be placed at the point: 50, 50.

NOTE

To dynamically change the position of the node, specify the offset values and call the InvalidateMeasure() of the DiagramPage as follows:

nodeobj.OffsetX = 100;

nodeobj.OffsetY = 100;

DiagramPage page = new DiagramPage();

page = diagramView.Page as DiagramPage;

page.InvalidateMeasure();

vbnet

nodeobj.OffsetX = 100

nodeobj.OffsetY = 100

Dim page As New DiagramPage()

page = TryCast(diagramView.Page, DiagramPage)

page.InvalidateMeasure()

In the above code, nodeobj refers to the instance of the node whose position is to be changed.

AllowMove

The AllowMove property can be used to enable/disable the node drag option.
When this property is set to true, it is possible to move the node. Otherwise the node cannot be moved.
The default value is true.

The AllowMove property can be set in the following way:

Node nodeobject = new Node();

nodeobject.AllowMove = false;

vbnet

Dim nodeobject As New Node()

nodeobject.AllowMove = False

Node Rotate

A node can be rotated to any angle by dragging the rotate thumb. A node always rotates on its center.

Properties

Property	Description	Type of the property	Value it Accept	Any other dependencies/ sub properties associated
AllowRotate	Gets or sets a value indicating whether a node can be rotated or not. The default value is set to true.	Dependency property	Boolean (true/ false)	No

Rotate Node

The steps to rotate a node are:

Select the node to be rotated. The rotate thumb will be displayed in the top left corner.
Click the rotate thumb and drag it clockwise or counterclockwise. The node will rotate correspondingly.

Node Rotation

AllowRotate

The AllowRotate property can be used to enable/disable rotation of the node.

When this property is set to true, node rotation is enabled. Otherwise the rotation is disabled. The default value is true.

The AllowRotate property can be set in the following way:

Node nodeobject = new Node();

nodeobject.AllowRotate = false;

vbnet

Dim nodeobject As New Node()

nodeobject.AllowRotate = False

Rotation through Codebehind

Rotate angle property enables the rotation of the selected object with a specified angle. It enables the support to rotate all the selected Nodes.

Property	Description	Type of the property	Value it accepts	Any other dependencies/ sub properties associated
RotateAngle	Gets or sets the angle for the Rotation.	Dependency property	Double	No

After Rotating the Node:

C:/Users/ramyathirugnanam/Desktop/Node Rotation.PNG

RotateAngle with 60 degree

After Rotating the Group

RotateAngle with 180 degree

Node Resize

Node can be resized to the desired Width and Height by clicking and dragging the Resizer, based on the content alignment setting, and the node’s content will also be resized accordingly. Resizing is supported in eight directions.

Properties

Property	Description	Type of the property	Value it Accept	Any other dependencies/ sub properties associated
AllowResize	Gets or sets a value indicating whether the node can be resized or not. The default value is set to true.	Dependency property	Boolean (true/ false)	No

Resizing through the Resize handle

Resizing a node affects the node’s width and height. To resize a node:

Select the node that is to be resized.
Move the pointer to the edge that you want to resize.
The cursor will change to one with two arrows.
Now drag the edge to the size you want. The node’s height and width will correspondingly change.

Node Resizing Illustrated

To resize both the width and height by the same factor:

Click and drag the corners of the resize adorner.

AllowResize

The AllowResize property can be used to enable/disable the node resizing.
When this property is set to true, it is possible to resize the node. Otherwise the node cannot be resized.
The default value is true.

The AllowResize property can be set in the following way:

Node nodeobject = new Node();

nodeobject.AllowResize = false;

vbnet

Dim nodeobject As New Node()

nodeobject.AllowResize = False

Resizing a Single Node on Multiple Selection

Multiple items on the drawing area can be selected.

Multiple selections can be performed by the following steps.

Items on the drawing area are selected only 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 pointer.
The rectangle is formed with the drag start-point as one of its points, and the point where the mouse button was released as its second point, defines the drag adorner’s bounds.
Nodes connected to one or more nodes are selected only if one of the connected nodes is also within the drag adorner bounds. The nodes and the connector connecting them act as a single selection.

NOTE

Resizing or moving any one item affects the other items by the same factor. However, rotating affects only the current node.

Multiple Selections

Node Label

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

Properties

Property	Description	Type of the property	Value it Accept	Any other dependencies/ sub properties associated
IsLabelEditable	Gets or sets a value indicating whether a node's label can be edited or not. The default value is set to true.	Dependency property	Boolean (true/ false)	No
Label	Gets or sets the node label	Dependency property	string	No
LabelVisibility	Gets or sets the label visibility	Dependency property	Visibility.Hidden Visibility.Collapsed Visibility.Visible	No
LabelHorizontalAlignment	Specifies the horizontal alignment for the node label	Dependency property	HorizontalAlignment.Center HorizontalAlignment.Left HorizontalAlignment.Right HorizontalAlignment.Stretch	No
LabelVerticalAlignment	Specifies the vertical alignment for the node label	Dependency property	VerticalAlignment.Bottom VerticalAlignment.Center VerticalAlignment.Stretch VerticalAlignment.Top	No
LabelAngle	Gets or sets the angle of the node label	Dependency property	double	No
LabelForeground	Gets or sets the foreground of the label. The default value is Black.	Dependency property	Brush	No
LabelBackground	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	FontStyle	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	FontWeight	No
LabelTextDecoration	Gets or sets the text decoration of the label.	Dependency property	TextDecorations.Underline	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 the node’s width.	Dependency property	Double	No

The following is a list of topics explained subsequently:

Set Label for Node
Label Editing
Multi line label
Label Visibility
Label Angle

Set a label for the node using the Label property. The default value is an empty string. By default, the label is displayed at the top-center position.

Node n = new Node();

n.OffsetX = 50;

n.OffsetY = 50;

n.Shape = Shapes.FlowChart_Card;

n.Label = "Silverlight";

diagramModel.Nodes.Add(n);

vbnet

Dim n As New Node()

n.OffsetX = 50

n.OffsetY = 50

n.Shape = Shapes.FlowChart_Card

n.Label = "Silverlight"

diagramModel.Nodes.Add(n)

Label

Label Editing

A node’s label can be edited at run time by setting IsLabelEditable property to true.

Node n = new Node();

n.Shape = Shapes.RoundedRectangle;

n.IsLabelEditable = true;

vbnet

Dim n As New Node()

n.Shape = Shapes.RoundedRectangle

n.IsLabelEditable = True

A user can specify a label at run time by :

1.Double-click the left mouse button on the node. 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 node. Press ESC key if you do not want to apply the new label value.

LabelEditor

Node Selection

A selected node is indicated using a rectangular resizer over the node’s border. Many interactions using keyboard, mouse will affect elements that is currently selected.

Properties

Property	Description	Type of the property	Value it Accept	Any other dependencies/ sub properties associated
AllowSelect	Gets or sets a value indicating whether the node can be selected or not. The default value is set to true.	Dependency property	Boolean (true/ false)	No
IsSelected	Gets or sets a value indicating whether this instance is selected.	Dependency property	Boolean (true/ false)	No

A node can be selected in two ways namely:

At run time
Through code

A Node can be selected at run time just by clicking on the node.

Node before Selection

Node after Selection

The above two images differentiates the appearance of the node before and after selection.

The Node can also be selected using the IsSelected property of the Node.

Node n = new Node();

n.Shape = Shapes.FlowChart_Card;

n.IsSelected = true;

diagramModel.Nodes.Add(n);

vbnet

Dim n As New Node()

n.Shape = Shapes.FlowChart_Card

n.IsSelected = True

diagramModel.Nodes.Add(n)

AllowSelect

The AllowSelect property can be used to enable/disable the node selection.

When this property is set to true, it is possible to select the node. Otherwise the node cannot be selected.
The default value is true.

The AllowSelect property can be set in the following way:

Node nodeobject = new Node();

nodeobject.AllowSelect = false;

vbnet

Dim nodeobject As New Node()

nodeobject.AllowSelect = False

Selecting, Moving, Deleting Nodes

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

Select Node and Connectors

Move Node and Connectors

Deleting Node without its Edges

This feature enables the user to delete the node without deleting its dependent edges by using the DeletingMode property of the node.

Properties

Property	Description	Type	Data Type
DeletingMode	Decides whether the node alone has to be deleted or the node along with its dependent edges has to be deleted.	Dependency property	Enum

Enabling Deletion of Node without Deleting its Edges

The deletion of node can be enabled by setting the DeletingMode property to:

DeleteDependentEdges
None

By default, this property is set to DeleteDependentEdges.

Setting DeletingMode to None

If the DeletingMode property of the node is set to None while trying to delete the node, the node alone is deleted. The dependent edges are not deleted in this case.

To set the DeletingMode property to None, use the following code snippet.

Node n1 = new Node();

n1.OffsetX = 200;

n1.OffsetY = 200;

n1.Shape = Shapes.Rectangle;

n1.DeletingMode = DeletingMode.None;

diagrammodel.Nodes.Add(n1);

vbnet

Dim n1 As New Node()

n1.OffsetX = 200

n1.OffsetY = 200

n1.Shape = Shapes.Rectangle

n1.DeletingMode = DeletingMode.None

diagramModel.Nodes.Add(n1)

Setting DeletingMode to DeleteDependentEdges

If the DeletingMode property of the node is set to DeleteDependentEdges while trying to delete the node, the node along with the dependent edges is deleted.

Node n = new Node();

n.OffsetX = 100;

n.OffsetY = 100;

n.Shape = Shapes.Rectangle;

n.DeletingMode = DeletingMode.DeleteDependentEdges;

diagrammodel.Nodes.Add(n);

vbnet

Dim n1 As New Node()

n1.OffsetX = 200

n1.OffsetY = 200

n1.Shape = Shapes.Rectangle

n1.DeletingMode = DeletingMode.DeleteDependentEdges

diagramModel.Nodes.Add(n1)

Customizing the Label for Nodes

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

Customize Label

Resize Handler Customization

This feature provides different styles for Resize Handler. This enables you to customize the look and feel of the eight resize handlers.

Use Case Scenarios

Customizing the appearance of the Resizer Handler is made easy in Resize Handler customization. You can customize it by applying different styles to the Thumb.

Creating Custom Style for Resize Handle

The Resize Handler consists of eight Thumb. You can set different styles to a Thumb using the Resize Handler Properties.

Follow the below steps to create custom styles for Resize Handler.

Step1: Creating Style for Thumb

Prepare styles with template for each thumb.

Through XAML

The following code illustrates how to create a style for Thumb.

xaml

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

   <Setter Property="IsTabStop" Value="false"/>

   <Setter Property="Background" Value="LightBlue"/>

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

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

   <Setter Property="Cursor" Value="SizeNWSE"/>

   <Setter Property="Margin" Value="-5 -5 0 0"/>

   <Setter Property="VerticalAlignment" Value="Top"/>

   <Setter Property="HorizontalAlignment" Value="Left"/>

   <Setter Property="Template">

   <Setter.Value>

     <ControlTemplate TargetType="Thumb">

    <Grid >

       <Rectangle  HorizontalAlignment="Stretch" Height="5" Stroke="Blue" Fill="Blue"

        VerticalAlignment="{TemplateBinding   VerticalAlignment}" StrokeThickness="2"

        Cursor="{TemplateBinding Cursor}"  StrokeDashCap="Flat" StrokeStartLineCap="Round"

        x:Name="PART_ReseizerThumb3" Margin="{TemplateBinding Margin}" />                            

        <Rectangle  HorizontalAlignment="{TemplateBinding HorizontalAlignment}"  Width="5" 

        VerticalAlignment="Stretch" Cursor="{TemplateBinding Cursor}" Stroke="Blue" Fill="Blue"

        x:Name="PART_ReseizerThumb2"  StrokeDashCap="Flat" StrokeStartLineCap="Round" 

			Margin="{TemplateBinding Margin}" StrokeThickness="2"  />

    </Grid>

Step2: Assign the Style to Node

Through XAML

The following code illustrates how to assign the Resize Handler Style to Node.

xaml

<Style TargetType="syncfusion:Node">

<Setter Property="TopResizer" Value="{StaticResource  TopResizerThump}"/>

<Setter Property="LeftResizer" Value="{StaticResource LeftResizerThump}"/>

<Setter Property="RightResizer" Value="{StaticResource RightResizerThump}"/>

<Setter Property="BottomResizer" Value="{StaticResource BottomResizerThump}"/>

<Setter Property="TopLeftCornerResizer" Value="{StaticResource TopLeftCornerResizerThump}"/>

<Setter Property="TopRightCornerResizer" Value="{StaticResource TopRightCornerResizerThump}"/>

<Setter Property="BottomLeftCornerResizer" Value="{StaticResource BottomLeftCornerResizerThump}"/>

<Setter Property="BottomRightCornerResizer" Value="{StaticResource BottomRightCornerResizerThump}"/>

</Style>

Through Code behind

The following code illustrates how to assign the Resize Handler Style to Node.

Node n = shape as Node; 

n.TopResizer = this.Resources["TopResizerThump"] as Style;

n.LeftResizer =this.Resources["LeftResizerThump"] as Style;

n.RightResizer =this.Resources["RightResizerThump"] as Style;

n.BottomResizer =this.Resources["BottomResizerThump"] as Style;

n.TopLeftCornerResizer =this.Resources["TopLeftCornerResizerThump"] as Style;

n.TopRightCornerResizer =this.Resources["TopRightCornerResizerThump"] as Style;

n.BottomLeftCornerResizer =this.Resources["BottomLeftCornerResizerThump"] as Style;

n.BottomRightCornerResizer =this.Resources["BottomRightCornerResizerThump"] as Style;

vbnet

Dim n As Node = TryCast(Shape, Node)

n.TopResizer = TryCast(Me.Resources("TopResizerThump"), Style)

n.LeftResizer =TryCast(Me.Resources("LeftResizerThump"), Style)

n.RightResizer =TryCast(Me.Resources("RightResizerThump"), Style)

n.BottomResizer =TryCast(Me.Resources("BottomResizerThump"), Style)

n.TopLeftCornerResizer =TryCast(Me.Resources("TopLeftCornerResizerThump"), Style)

n.TopRightCornerResizer =TryCast(Me.Resources("TopRightCornerResizerThump"), Style)

n.BottomLeftCornerResizer =TryCast(Me.Resources("BottomLeftCornerResizerThump"), Style)

n.BottomRightCornerResizer =TryCast(Me.Resources("BottomRightCornerResizerThump"), Style)

Setting Thumb Template as Null

Set the Thumb Template value to Null to set a particular Thumb invisible.

The following code illustrates how to set the Thumb Style to Null.

xaml

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

            <Setter Property="Template" Value="{x:Null}">

            </Setter>

     </Style>

Following screenshot illustrates customized resize handlers with four corners.

Custom Style

Tables for Properties, Methods, and Events

Properties

Property	Description	Type	Data Type	Reference links
TopResizer	Gets or sets a value of TopResizer Style for Resize Handler	Dependency property	Style	NA
BottomResizer	Gets or sets a value of BottomResizer Style for Resize Handler	Dependency property	Style	NA
LeftResizer	Gets or sets a value of LeftResizer Style for Resize Handler	Dependency property	Style	NA
RightResizer	Gets or sets a value of RightResizer Style for Resize Handler	Dependency property	Style	NA
TopLeftResizer	Gets or sets a value of TopLeftResizer Style for Resize Handler	Dependency property	Style	NA
TopRightResizer	Gets or sets a value of TopRightResizer Style for Resize Handler	Dependency property	Style	NA
BottomLeftResizer	Gets or sets a value of BottomLeftResizer Style for Resize Handler	Dependency property	Style	NA
BottomRightResizer	Gets or sets a value of BottomRightResizer Style for Resize Handle	Dependency property	Style	NA

Sample Link

To view sample:

Open the Silverlight sample browser from the dashboard.
Navigate to Silverlight Diagram -> Editable Diagram->ResizerCustomization Demo.

Node Layout

Essential Diagram for Silverlight provides layout representation for nodes. Numerous nodes and line connectors are connected together in such a way to form various types of layouts, including hierarchical, tree, and table layouts.

Node Layout

Properties:

Property	Description	Type of property	Value it Accepts	Any other dependencies/ sub-properties associated
FirstChild	Gets node’s first tree child.	CLR property	Node	No
LastChild	Gets node’s last tree child.	CLR property	Node	No
ParentNode	Gets or sets parent of the node.	CLR property	Ishape	No
Row	Gets or sets the row.	CLR property	int	No
ParentEdge	Gets or sets the edge between this node and its parent node in tree structure.	CLR property	IEdge	No
NextSibling	Gets this node’s next tree sibling.	CLR property	IShape	No
IsExpanded	Gets or sets values indicating whether this instance is expanded.	CLR property	Boolean (true/false)	No
ChildCount	Gets the number of tree children of this node.	CLR property	int	No
Column	Gets or sets the column.	CLR property	int	No

Nodes

Properties

See Also

Creating Node

Adding Through SymbolPalette

Adding Through XAML

Adding Through code behind

Node Shapes

Properties

Predefined Node Shapes

Customizing the appearance of the pre-defined Shape

Custom Shape

Node Content

Properties

UIElement Content

Business-Object Content with ContentTemplate

Node Position

Properties

Specify node’s location

At Runtime

Through Code Behind

AllowMove

Node Rotate

Properties

Rotate Node

AllowRotate

Rotation through Codebehind

Node Resize

Properties

Resizing through the Resize handle

AllowResize

Resizing a Single Node on Multiple Selection

Node Label

Properties

Label Editing

See Also

Multiline label

Label Visibility

Label Vertical Alignment and Label Horizontal Alignment

LabelAngle

Text Decoration for Label

Custom Label Support for Node

Adding Custom Label Enhancements for Node to an Application

Set the LabelDisplacement for Node

Label Dragging support for Node

Node Selection

Properties

AllowSelect

See Also

Selecting, Moving, Deleting Nodes

Deleting Node without its Edges

Properties

Enabling Deletion of Node without Deleting its Edges

Setting DeletingMode to None

Setting DeletingMode to DeleteDependentEdges

Customizing the Label for Nodes

Resize Handler Customization

Use Case Scenarios

Creating Custom Style for Resize Handle

Step1: Creating Style for Thumb

Step2: Assign the Style to Node

Setting Thumb Template as Null

Tables for Properties, Methods, and Events

Properties

Sample Link

Node Layout

Properties: