Nodes or Shapes in Windows Forms Diagram

The WinForms Diagram control supports many node types. The following node types are available in the WinForms Diagram control:

• TextNode
• Shape
• Symbol
• ControlNode
• PathNode
• BitmapNode
• RichTextNode
• MetafileNode
• Group
• PseudoGroup
• FilledPath
• FilledShape
• RoundRect
• PolygonA
• Rectangle
• ClosedCurveNode
• Ellipse
• SemiCircle
• CircularArc
• PolylineNode
• CurveNode
• Line
• SplineNode
• Arc
• BezierCurve
• MeasureLine
• Polyline
• OrthogonalConnector
• LineConnector
• OrthogonalLine
• Link
• PolyLineConnector

Creating a Node in the WinForms Diagram control at Run Time

To create a node in the WinForms Diagram control, add a Diagram control to the Windows Form and handle its load event:

1. Drag the Diagram control to the windows form.

2. Press the F7 key to open the *.cs file and enter the following code in the Form1_Load function.

   C#

   private void Form1_Load(object sender, EventArgs e)
   {
   	Syncfusion.Windows.Forms.Diagram.Ellipse ellipse = new Syncfusion.Windows.Forms.Diagram.Ellipse(10, 10, 110, 70);
   	diagram1.Model.AppendChild(ellipse);
   }

   VB.NET

   Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs)
   	Dim ellipse As New Syncfusion.Windows.Forms.Diagram.Ellipse(10, 10, 110, 70)
   	diagram1.Model.AppendChild(ellipse)
   End Sub

Node Property Settings

The following code example demonstrates how to apply node property settings.

C#

private void Form1_Load(object sender, EventArgs e)
{
	Syncfusion.Windows.Forms.Diagram.Ellipse ellipse = new Syncfusion.Windows.Forms.Diagram.Ellipse(10, 10, 110, 70);
	diagram1.Model.AppendChild(ellipse);
	ellipse.FillStyle.Color = System.Drawing.Color.AliceBlue;
	ellipse.FillStyle.ColorAlphaFactor = 100;
	ellipse.FillStyle.ForeColor = System.Drawing.Color.Aquamarine;
	ellipse.FillStyle.ForeColorAlphaFactor = 70;
	ellipse.FillStyle.Type = FillStyleType.PathGradient;
	ellipse.FillStyle.PathBrushStyle = PathGradientBrushStyle.RectangleCenter;
	ellipse.FillStyle.Type = FillStyleType.LinearGradient;
	ellipse.FillStyle.GradientAngle = 95;
	ellipse.FillStyle.GradientCenter = 0.5f;
	ellipse.EditStyle.AllowChangeHeight = true;
	ellipse.EditStyle.AllowChangeWidth = true;
	ellipse.EditStyle.AllowDelete = false;
	ellipse.EditStyle.AllowMoveX = true;
	ellipse.EditStyle.AllowMoveY = false;
	ellipse.EditStyle.AllowRotate = false;
	ellipse.EditStyle.AllowSelect = true;
}

VB.NET

Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs)
Dim ellipse As New Syncfusion.Windows.Forms.Diagram.Ellipse(10, 10, 110, 70)
diagram1.Model.AppendChild(ellipse)
ellipse.FillStyle.Color = System.Drawing.Color.AliceBlue
ellipse.FillStyle.ColorAlphaFactor = 100
ellipse.FillStyle.ForeColor = System.Drawing.Color.Aquamarine
ellipse.FillStyle.ForeColorAlphaFactor = 70
ellipse.FillStyle.Type = FillStyleType.PathGradient
ellipse.FillStyle.PathBrushStyle = PathGradientBrushStyle.RectangleCenter
ellipse.FillStyle.Type = FillStyleType.LinearGradient
ellipse.FillStyle.GradientAngle = 95
ellipse.FillStyle.GradientCenter = 0.5F
ellipse.EditStyle.AllowChangeHeight = True
ellipse.EditStyle.AllowChangeWidth = True
ellipse.EditStyle.AllowDelete = False
ellipse.EditStyle.AllowMoveX = True
ellipse.EditStyle.AllowMoveY = False
ellipse.EditStyle.AllowRotate = False
ellipse.EditStyle.AllowSelect = True
End Sub

Creating Nodes and Links

The following code example illustrates how to create nodes and links.

C#

protected void Page_Load(object sender, EventArgs e)
{
	Syncfusion.Windows.Forms.Diagram.Ellipse ellipse = new Syncfusion.Windows.Forms.Diagram.Ellipse(10, 10, 110, 70);
	Syncfusion.Windows.Forms.Diagram.Rectangle rectangle = new Syncfusion.Windows.Forms.Diagram.Rectangle(250, 50, 50, 80);
	Syncfusion.Windows.Forms.Diagram.LineConnector lineconnector = new Syncfusion.Windows.Forms.Diagram.LineConnector(new System.Drawing.PointF(10, 200), new System.Drawing.PointF(300, 250));
	this.diagram1.Model.AppendChild(ellipse);
	this.diagram1.Model.AppendChild(rectangle);
	this.diagram1.Model.AppendChild(lineconnector);
}

VB.NET

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
Dim ellipse As New Syncfusion.Windows.Forms.Diagram.Ellipse(10, 10, 110, 70)
Dim rectangle As New Syncfusion.Windows.Forms.Diagram.Rectangle(250, 50, 50, 80)
Dim lineconnector As New Syncfusion.Windows.Forms.Diagram.LineConnector(New System.Drawing.PointF(10, 200), New System.Drawing.PointF(300, 250))
Me.diagram1.Model.AppendChild(ellipse)
Me.diagram1.Model.AppendChild(rectangle)
Me.diagram1.Model.AppendChild(lineconnector)
End Sub

Node Selections

A node’s behavior can be customized and modified using the EditStyle collection properties which can be used for the following:

• To prohibit selection, rotation and deletion of nodes, by using AllowSelect, AllowRotate and AllowDelete properties.
• To restrict a node’s movement along the x or y axis, by using AllowMoveX and AllowMoveY properties.
• To prevent resizing the height and width of the node, by using AllowChangeHeight, AllowChangeWidth, and AllowResize properties.

EditStyle Property	Description
AllowChangeHeight	Specifies whether or not to allow the height to be changed. Default value is true .
AllowChangeWidth	Specifies whether or not to allow the width to be changed. Default value is true .
AllowDelete	Specifies whether or not to allow the node to be deleted on clicking the DELETE key. Default value is true .
AllowMoveX	Specifies whether or not to allow the node to be moved along the x-axis. Default value is true .
AllowMoveY	Specifies whether or not to allow the node to be moved along the y-axis. Default value is true .
AllowRotate	Specifies whether or not to rotate the node using the PinPoint. Default value is true .
AllowSelect	Specifies whether or not to select the node on mouse click. Default value is true .
AllowResize	Specifies whether or not to resize the node. Default value is true .

Programmatically, the properties can be set as follows:

C#

rect.EditStyle.AllowChangeHeight = true;
rect.EditStyle.AllowChangeWidth = true;
rect.EditStyle.AllowDelete = false;
rect.EditStyle.AllowMoveX = true;
rect.EditStyle.AllowMoveY = false;
rect.EditStyle.AllowRotate = true;
rect.EditStyle.AllowSelect = true;

VB.NET

rect.EditStyle.AllowChangeHeight = True
rect.EditStyle.AllowChangeWidth = True
rect.EditStyle.AllowDelete = False
rect.EditStyle.AllowMoveX = True
rect.EditStyle.AllowMoveY = False
rect.EditStyle.AllowRotate = True
rect.EditStyle.AllowSelect = True

In the above code snippets, the properties are set to the Rectangular node (rect) created through the code.

Behavior Settings

Property	Description
AspectRatio	Specifies whether to maintain the height and width ratio when the node is resized.
DefaultHandleEditMode	Specifies the mode in which the node should be handled. The default value for links and lines is Vertex, and for all other nodes and polyline the default value is Resize. Set DefaultHandleEditMode to Resize to move the nodes. The available values are None, Resize, and Vertex.
Enabled	Specifies whether the node is enabled. Default value is true .
AllowVertexEdit	Specifies whether or not to edit the vertex. Default value is true .
HidePinPoint	Specifies whether to show or hide the PinPoint. Default value is false .
HideRotationHandle	Specifies whether to show or hide the RotationHandle in order to control the rotation of the node. Default value is false .

Programmatically these properties can be set as follows:

C#

rect.EditStyle.AspectRatio = true;
rect.EditStyle.DefaultHandleEditMode = HandleEditMode.Resize;
rect.EditStyle.Enabled = true;
rect.EditStyle.AllowVertexEdit = true;
rect.EditStyle.HidePinPoint = true;
rect.EditStyle.HideRotationHandle = true;

VB.NET

rect.EditStyle.AspectRatio = True
rect.EditStyle.DefaultHandleEditMode = HandleEditMode.Resize
rect.EditStyle.Enabled = True
rect.EditStyle.AllowVertexEdit = True
rect.EditStyle.HidePinPoint = True
rect.EditStyle.HideRotationHandle = True

In the above code snippets, the properties are set to the Rectangular node (rect) created through the code.

Dragging, Resizing, and Rotation Styles for Nodes

WinForms Diagram provides dragging, resizing, and rotation styles such as ghost copy, filled rectangle, solid outline, and dashed outline for nodes. These styles improve the visual feedback of your diagram while dragging, rotating, or resizing nodes.

Properties Table

Property	Description	Type	Data Type
ResizingStyle	Gets or sets resizing style for the rendering helper	NA	RenderingHelperStyle
DraggingStyle	Gets or sets dragging style for the rendering helper	NA	RenderingHelperStyle
RotatingStyle	Gets or sets rotating style for the rendering helper	NA	RenderingHelperStyle

Applying Styles to Rendering Helper

The following code example illustrates how to apply styles to the rendering helper while resizing, dragging, and rotating nodes.

C#

//Specify dragging, resizing, and rotation styles to the rendering helper
diagram1.Controller.DraggingStyle = RenderingHelperStyle.SolidOutline;
diagram1.Controller.ResizingStyle = RenderingHelperStyle.GhostCopy;
diagram1.Controller.RotatingStyle = RenderingHelperStyle.DashedOutline;

VB.NET

'Specify dragging, resizing, and rotation styles to the rendering helper
diagram1.Controller.DraggingStyle = RenderingHelperStyle.SolidOutline
diagram1.Controller.ResizingStyle = RenderingHelperStyle.GhostCopy
diagram1.Controller.RotatingStyle = RenderingHelperStyle.DashedOutline