menu

Blazor

  • Code Examples
  • Upgrade Guide
  • User Guide
  • Demos
  • Support
  • Forums
  • Download
Class Node - Blazor API Reference | Syncfusion

    Show / Hide Table of Contents

    Class Node

    Represents the shape that is used to visualize geometrical information in the diagram.

    Inheritance
    System.Object
    DiagramObject
    NodeBase
    Node
    NodeGroup
    Swimlane
    Implements
    IDiagramObject
    System.ICloneable
    Inherited Members
    DiagramObject.GetParent()
    DiagramObject.OnPropertyChanged(String, Object, Object, IDiagramObject)
    NodeBase.AdditionalInfo
    NodeBase.CanAutoLayout
    NodeBase.Flip
    NodeBase.FlipMode
    NodeBase.ID
    NodeBase.IsVisible
    NodeBase.Margin
    NodeBase.SearchTags
    NodeBase.Tooltip
    NodeBase.ZIndex
    Namespace: Syncfusion.Blazor.Diagram
    Assembly: Syncfusion.Blazor.dll
    Syntax
    public class Node : NodeBase, IDiagramObject, ICloneable
    Remarks

    The Node class provides various properties and methods to define and manipulate nodes in a diagram, facilitating visualization of geometrical data.

    This class is derived from the NodeBase class.

    Examples
    Node node = new Node()
    {
        OffsetX = 250,
        OffsetY = 250,
        Width = 100,
        Height = 100,
        Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" },
    };

    Constructors

    Node()

    Initializes a new instance of the Node.

    Declaration
    public Node()

    Node(Node)

    Creates a new instance of the Node from the given Node.

    Declaration
    public Node(Node src)
    Parameters
    Type Name Description
    Node src

    Node

    Properties

    Annotations

    Gets or sets the collection of textual information contained in the node.

    Declaration
    public DiagramObjectCollection<ShapeAnnotation> Annotations { get; set; }
    Property Value
    Type Description
    DiagramObjectCollection<ShapeAnnotation>

    A DiagramObjectCollection<T> representing the annotations associated with the node. This collection may be null if no annotations are defined. Default is an empty collection.

    Remarks

    The text found in the node can be edited at runtime. Users are able to modify the style, visibility, width, height, and content of the annotation.

    Examples
    Node node = new Node()
    {
       Annotations = new DiagramObjectCollection<ShapeAnnotation>() 
       { 
            new ShapeAnnotation 
            { 
                Content = "Node" 
            }
       },
    };

    BackgroundColor

    Gets or sets the System.String representing the node's background color.

    Declaration
    public string BackgroundColor { get; set; }
    Property Value
    Type Description
    System.String

    A System.String representing the color value of the node's background. The default value is "transparent".

    Remarks

    This property determines the fill color that appears behind the node contents. For a transparent background, the default value is used.

    Examples
    <SfDiagramComponent Height="600px" Nodes="@nodes" />
     @code
     {
        DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
        protected override void OnInitialized()
        {
            Node node = new Node()
            {
                ID = "node1",
                //Size of the node
                Height = 100,
                Width = 100,
                //Position of the node
                OffsetX = 100,
                OffsetY = 100,
               BackgroundColor = "red",
            };
            nodes.Add(node);
        }
    }

    BorderColor

    Gets or sets the border color of the Node.

    Declaration
    public string BorderColor { get; set; }
    Property Value
    Type Description
    System.String

    A System.String representing the border color. The default value is "black".

    Remarks

    The BorderColor property allows setting the color applied to the outline of a node.

    Examples
    <SfDiagramComponent Height="600px" Nodes="@nodes" />
    @code
    {
        DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
        protected override void OnInitialized()
        {
            Node node = new Node()
            {
                ID = "node1",
                //Size of the node
                Height = 100,
                Width = 100,
                //Position of the node
                OffsetX = 100,
                OffsetY = 100,
                BorderColor = "Orange",
                BorderWidth = 20,
            };
            nodes.Add(node);
        }
    }

    BorderWidth

    Gets or sets the border width of the node.

    Declaration
    public double BorderWidth { get; set; }
    Property Value
    Type Description
    System.Double

    A System.Double representing the border width. The default value is 1.0.

    Remarks

    This property defines the width of the border around the node component. Modifying the border width can change the visual thickness of the node's outline, enhancing its visibility and distinction from other nodes.

    Examples
    <SfDiagramComponent Height="600px" Nodes="@nodes" />
    @code
    {
        DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
        protected override void OnInitialized()
        {
            Node node = new Node()
            {
                ID = "node1",
                //Size of the node
                Height = 100,
                Width = 100,
                //Position of the node
                OffsetX = 100,
                OffsetY = 100,
                BorderColor = "Orange",
                BorderWidth = 20,
            };
            nodes.Add(node);
        }
    }

    CollapseIcon

    Gets or sets the collapse icon of the node.

    Declaration
    public DiagramCollapseIcon CollapseIcon { get; set; }
    Property Value
    Type Description
    DiagramCollapseIcon

    A DiagramCollapseIcon representing the collapsed state of the node. The default value is null.

    Remarks

    Defines the collapse icon that is used to visually signal the collapsed state of the node, allowing for intuitive user recognition and interaction.

    Examples
    <SfDiagramComponent Height="600px" Nodes="@nodes" />
     @code
     {
        // Initialize the node collection with a node including Expand & CollapseIcon
        DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
        protected override void OnInitialized()
        {
            Node node = new Node()
            {
                ExpandIcon = new DiagramExpandIcon()
                {
                    Shape = DiagramExpandIcons.Minus,
                },
                CollapseIcon= new DiagramCollapseIcon()
                {
                    Shape = DiagramExpandIcons.Path,
                    PathData = "M100,200 C100,100 250,100 250,200 S400,300 400,200",
                }
            };
            nodes.Add(node);
        }
    }

    Constraints

    Enables or disables certain features of the Node. By default, all the interactive functionalities are enabled.

    Declaration
    public NodeConstraints Constraints { get; set; }
    Property Value
    Type Description
    NodeConstraints

    A NodeConstraints enumeration representing the constraints applied to a node. The default value is Default.

    Remarks

    This property allows you to control interactive features of a node such as dragging, resizing, and rotation. By default, all features are enabled, but you can disable specific functionality by combining enumeration values using bitwise operators.

    Examples
    Node node = new Node()
    {
       ID = "node1",
       Height = 100,
       Width = 100,
       OffsetX = 100,
       OffsetY = 100,
       Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "White" },
       // set the NodeConstraints constraints...
       Constraints = NodeConstraints.Default & ~NodeConstraints.Rotate
    };

    Data

    Represents the data record from the data source. Each record corresponds to a node when using an automatic layout.

    Declaration
    public object Data { get; set; }
    Property Value
    Type Description
    System.Object

    An System.Object representing the node data record. The default value is null.

    Remarks

    Nodes are automatically generated based on information provided through the data when utilizing an automatic layout.

    Examples
    <SfDiagramComponent Height="600px" NodeCreating="@OnNodeCreating" >
        <DataSourceSettings Id="Id" ParentId="ParentId" DataSource="@DataSource"/>
        <Layout Type="LayoutType.MindMap" />
    </SfDiagramComponent>
    
    @code
    {
        private void OnNodeCreating(IDiagramObject obj)
        {
            MindMapDetails mindMapData = node.Data as MindMapDetails;
            node.Annotations = new DiagramObjectCollection<ShapeAnnotation>()
            {
                new ShapeAnnotation()
                {
                    Content = mindMapData.Label
                }
            };
        }
        public class MindMapDetails
        {
            public string Id { get; set; }
            public string Label { get; set; }
            public string ParentId { get; set; }
            public string Branch { get; set; }
            public string Fill { get; set; }
        }
        public object DataSource = new List<object>()
        {
            new MindMapDetails() { Id = "1",Label = "Creativity", ParentId = "", Branch = "Root"},
        };
    }

    ExpandIcon

    Gets or sets the expand icon of the node.

    Declaration
    public DiagramExpandIcon ExpandIcon { get; set; }
    Property Value
    Type
    DiagramExpandIcon
    Remarks

    Defines the expand icon that indicates the expanded state of the node. The expand icon is crucial for visualizing node hierarchy expansions within diagrams.

    Examples
    <SfDiagramComponent Height="600px" Nodes="@nodes" />
     @code
     {
        //Initialize the node collection with node and with Expand & CollapseIcon
        DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
        protected override void OnInitialized()
        {
            Node node = new Node()
            {
                ExpandIcon = new DiagramExpandIcon()
                {
                    Shape = DiagramExpandIcons.Minus,
                },
            };
            nodes.Add(node);
        }
    }

    FixedUserHandles

    Gets or sets the collection of fixed user handles for the Node.

    Declaration
    public DiagramObjectCollection<NodeFixedUserHandle> FixedUserHandles { get; set; }
    Property Value
    Type Description
    DiagramObjectCollection<NodeFixedUserHandle>

    A DiagramObjectCollection<T> representing the collection of fixed user handles. The default value is null.

    Remarks

    The fixed user handles can be utilized to add frequently used commands around nodes and connectors even when they are not selected.

    Examples
    Node node = new Node()
    {
        FixedUserHandles = new DiagramObjectCollection<NodeFixedUserHandle>()
        {
            new NodeFixedUserHandle()
            {
                ID = "user1",
                Height = 20, 
                Width = 20, 
                Visibility = true,
                Padding = new DiagramThickness() { Bottom = 1, Left = 1, Right = 1, Top = 1 }, 
                Margin = new DiagramThickness() { Right = 20 },
                Offset = new DiagramPoint() { X = 0, Y = 0 }, 
                PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z..."
            },
        }
    };

    Height

    Gets or sets the height of the node, measured in pixels.

    Declaration
    public Nullable<double> Height { get; set; }
    Property Value
    Type Description
    System.Nullable<System.Double>

    A System.Double representing the height of the node. The default value is null.

    Remarks

    The height property specifies the height of the node and does not include borders or margins.

    Examples
    <SfDiagramComponent Height="600px" Nodes="@nodes" />
    @code
    {
        // Initialize the node collection with a node and expand & collapse icon
        DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
        protected override void OnInitialized()
        {
            Node node = new Node()
            {
                ID = "node1",
                // Size of the node
                Height = 100,
                Width = 100,
                // Position of the node
                OffsetX = 100,
                OffsetY = 100,
                Pivot = new DiagramPoint() { X = 0, Y = 0.5 },
            };
            nodes.Add(node);
        }
    }

    HorizontalAlignment

    Gets or sets the horizontal alignment of the Node.

    Declaration
    public HorizontalAlignment HorizontalAlignment { get; set; }
    Property Value
    Type Description
    HorizontalAlignment

    A HorizontalAlignment value that determines how the node is aligned horizontally. The default value is Center.

    Remarks

    This property specifies the positioning or stretching behavior of a node with respect to its horizontal alignment.

    Examples
    <SfDiagramComponent Height="600px" Nodes="@nodes" />
    @code {
        DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
        protected override void OnInitialized()
        {
            Node node = new Node()
            {
                ID = "node1",
                // Size of the node
                Height = 100,
                Width = 100,
                // Position of the node
                OffsetX = 100,
                OffsetY = 100,
                HorizontalAlignment = HorizontalAlignment.Right,
            };
            nodes.Add(node);
        }
    }

    InEdges

    Gets information about the incoming connectors of the node.

    Declaration
    public List<string> InEdges { get; }
    Property Value
    Type Description
    System.Collections.Generic.List<System.String>

    A list of strings containing the IDs of the incoming connectors. The default value is an empty collection.

    Remarks

    This property provides access to the IDs of connectors that terminate at this node, facilitating the connection of other nodes to this node within a diagram.

    IsExpanded

    Gets or sets a System.Boolean indicating whether the node is in an expanded state.

    Declaration
    public bool IsExpanded { get; set; }
    Property Value
    Type Description
    System.Boolean

    A System.Boolean indicating the node's expansion state. The default value is false.

    Remarks

    If this property is set to true, the node will be displayed in its expanded form, allowing its content to be fully visible.

    Examples
    Node node = new Node()
    {
        // Position of the node
        OffsetX = 250,
        OffsetY = 250,
        IsExpanded = true,
    };

    LaneOffsetX

    Gets or sets the position of the lane child along the X-axis.

    Declaration
    public double LaneOffsetX { get; set; }
    Property Value
    Type Description
    System.Double

    A System.Double representing the X-axis position of the lane child. The default value is 0.

    Remarks

    This property is used to determine the horizontal offset of the lane child within its lane. Adjusting this value allows for precise positioning along the X-axis within the diagram.

    Examples
    Node node = new Node()
    {
        OffsetX = 250,
        OffsetY = 250,
        // Size of the node
        Width = 100,
        Height = 100,
        Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" },
        // Position of the lane child
        LaneOffsetX = 100,
        LaneOffsetY = 50,
    };

    LaneOffsetY

    Gets or sets the position of the lane child along the Y-axis.

    Declaration
    public double LaneOffsetY { get; set; }
    Property Value
    Type Description
    System.Double

    A System.Double representing the Y-axis position of the lane child. The default value is 0.

    Remarks

    This property specifies the offset position for a lane child in a diagram, allowing customization of its Y-axis positioning within its lane.

    Examples
    Node node = new Node()
    {
        OffsetX = 250,
        OffsetY = 250,
        // Size of the node
        Width = 100,
        Height = 100,
        Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" },
        // Position of the lane child
        LaneOffsetX = 100,
        LaneOffsetY = 50,
    };

    MaxHeight

    Gets or sets the maximum height of the node.

    Declaration
    public Nullable<double> MaxHeight { get; set; }
    Property Value
    Type Description
    System.Nullable<System.Double>

    A System.Double representing the maximum allowable height for a node. The default value is null, which means it is undefined.

    Remarks

    The MaxHeight property is crucial when you want to restrict the height expansion of a node within a diagram. It ensures that the height of the node does not exceed the specified maximum height.

    Examples
    <SfDiagramComponent Height="600px" Nodes="@nodes" />
    @code
    {
        // Initialize the node collection with a node and with Expand & CollapseIcon
        DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
        protected override void OnInitialized()
        {
            Node node = new Node()
            {
                ID = "node1",
                // Size of the node
                Height = 100,
                Width = 100,
                // Position of the node
                OffsetX = 100,
                OffsetY = 100,
                MaxHeight = 120,
            };
            nodes.Add(node);
        }
    }

    MaxWidth

    Gets or sets the maximum width of the node.

    Declaration
    public Nullable<double> MaxWidth { get; set; }
    Property Value
    Type Description
    System.Nullable<System.Double>

    A System.Double representing the maximum allowable width of the node. The default value is null.

    Remarks

    This property allows you to constrain the width of a node within the diagram. If not set, the node can take any width based on the layout or user interaction.

    Examples
    <SfDiagramComponent Height="600px" Nodes="@nodes" />
    @code
    {
        // Initialize the node collection with node and with Expand & CollapseIcon
        DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
        protected override void OnInitialized()
        {
            Node node = new Node()
            {
                ID = "node1",
                // Size of the node
                Height = 100,
                Width = 100,
                // Position of the node
                OffsetX = 100,
                OffsetY = 100,
                MaxWidth = 120,
            };
            nodes.Add(node);
        }
    }

    MinHeight

    Gets or sets the minimum height of the node.

    Declaration
    public Nullable<double> MinHeight { get; set; }
    Property Value
    Type Description
    System.Nullable<System.Double>

    A System.Double that represents the minimum height of the node. The default value is null.

    Remarks

    The minimum height ensures that the node does not shrink below a certain size, which is crucial when designing diagrams with consistent node dimensions.

    Examples
    <SfDiagramComponent Height="600px" Nodes="@nodes" />
     @code
     {
        // Initialize the node collection with a node that has Expand & CollapseIcons
        DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
        protected override void OnInitialized()
        {
            Node node = new Node()
            {
                ID = "node1",
                // Size of the node
                Height = 100,
                Width = 100,
                // Position of the node
                OffsetX = 100,
                OffsetY = 100,
                MinHeight = 50,
            };
            nodes.Add(node);
        }
    }

    MinWidth

    Gets or sets the minimum width of the node.

    Declaration
    public Nullable<double> MinWidth { get; set; }
    Property Value
    Type Description
    System.Nullable<System.Double>

    A System.Double that specifies the minimum width of the node. The default value is null.

    Remarks

    This property allows you to set a constraint on the width of the node to ensure it does not go below a defined size.

    Examples
    <SfDiagramComponent Height="600px" Nodes="@nodes" />
     @code
     {
        //Initialize the node collection with node and with Expand & CollapseIcon
        DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
        protected override void OnInitialized()
        {
            Node node = new Node()
            {
                ID = "node1",
                //Size of the node
                Height = 100,
                Width = 100,
                //Position of the node
                OffsetX = 100,
                OffsetY = 100,
                MinWidth = 50,
            };
            nodes.Add(node);
        }
    }

    OffsetX

    Gets or sets the X-coordinate of the node in a diagram.

    Declaration
    public double OffsetX { get; set; }
    Property Value
    Type Description
    System.Double

    A System.Double representing the X-coordinate. The default value is 0.0.

    Remarks

    This property determines the horizontal position of the node within the diagram canvas. Adjusting the OffsetX shifts the node's position from its current location.

    Examples

    This example demonstrates how to position a node in a diagram:

    // Create a new node with specific offset values
    Node node = new Node()
    {
        OffsetX = 250,
        OffsetY = 250,
        Width = 100,
        Height = 100,
    };

    OffsetY

    Gets or sets the y-coordinate of the node.

    Declaration
    public double OffsetY { get; set; }
    Property Value
    Type Description
    System.Double

    A System.Double representing the y-coordinate position. The default value is 0.0.

    Remarks

    This property specifies the position of the node along the Y-axis on the diagram canvas.

    Examples
    Node node = new Node()
    {
        OffsetX = 250,
        OffsetY = 250,
        Width = 100,
        Height = 100,
        Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" },
    };

    OutEdges

    Gets information about the outgoing connectors of the node.

    Declaration
    public List<string> OutEdges { get; }
    Property Value
    Type Description
    System.Collections.Generic.List<System.String>

    A list of strings containing the IDs of the outgoing connectors. The default value is an empty collection.

    Remarks

    This property provides access to the IDs of connectors that originate from this node, which can be used for connecting the node to other nodes within a diagram.

    Pivot

    Represents the pivot point for node rotation within the diagram. The pivot is determined by X and Y values ranging from 0 to 1.

    Declaration
    public DiagramPoint Pivot { get; set; }
    Property Value
    Type Description
    DiagramPoint

    A DiagramPoint that specifies the pivot location of the node. The default value is set to X=0.5 and Y=0.5.

    Remarks

    The pivot point determines the rotation origin of the node. For instance, when the pivot point is set to X=0, Y=0, the node will rotate around its top-left corner. Adjusting the pivot helps in positioning the rotational behavior in various layouts.

    Examples
    <SfDiagramComponent Height="600px" Nodes="@nodes" />
    @code
    {
        //Initialize the node collection with node and adjust the Pivot property
        DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
        protected override void OnInitialized()
        {
            Node node = new Node()
            {
                Pivot = new DiagramPoint() { X = 0, Y = 0.5 },
            };
            nodes.Add(node);
        }
    }

    Ports

    Gets or sets a collection of PointPort (connection points).

    Declaration
    public DiagramObjectCollection<PointPort> Ports { get; set; }
    Property Value
    Type Description
    DiagramObjectCollection<PointPort>

    A DiagramObjectCollection<T> representing the ports. The default value is null.

    Remarks

    Ports act as the connection points between nodes, allowing them to create connections at specific points. You can modify the ports' appearance, visibility, and positioning, and add custom shapes to them.

    Examples
    Node node = new Node()
    {
       Ports = new DiagramObjectCollection<PointPort>()
       {
           // Set the position for the port
           new PointPort()
           {
               Style = new ShapeStyle() { Fill = "gray" }, 
               Offset = new DiagramPoint() { X = 0.5, Y = 0.5 }, 
               Visibility = PortVisibility.Visible
           }
       }
    };

    RotationAngle

    Gets or sets the rotation angle of the Node.

    Declaration
    public double RotationAngle { get; set; }
    Property Value
    Type Description
    System.Double

    A System.Double representing the rotation angle in degrees. The default value is 0.

    Remarks

    This property is used to rotate the node about its center. Adjusting the RotationAngle changes the orientation of the node.

    Examples
    <SfDiagramComponent Height="600px" Nodes="@nodes" />
    @code {
        DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
        protected override void OnInitialized()
        {
            Node node = new Node()
            {
                ID = "node1",
                // Size of the node
                Height = 100,
                Width = 100,
                // Position of the node
                OffsetX = 100,
                OffsetY = 100,
                RotationAngle = 50,
            };
            nodes.Add(node);
        }
    }

    Shadow

    Gets or sets the shadow appearance of the Node.

    Declaration
    public Shadow Shadow { get; set; }
    Property Value
    Type Description
    Shadow

    A Shadow object representing the aesthetic effects of the node's shadow, including properties such as the angle, color, opacity, and distance. The default value is null indicating no shadow is applied.

    Remarks

    The shadow effect on a node is disabled by default and can be enabled using the Constraints property by including Shadow. Customize the shadow by adjusting the angle, distance, and opacity.

    Examples
    Node node = new Node()
    {
        Constraints = NodeConstraints.Default | NodeConstraints.Shadow,
        Shadow = new Shadow()
        {
            Angle = 50,
            Color = "Blue",
            Opacity = 0.8,
            Distance = 20
        }
    };

    Shape

    Gets or sets the geometrical representation of a Node.

    Declaration
    public Shape Shape { get; set; }
    Property Value
    Type Description
    Shape

    A Shape representing the node's visual structure. The default value is null.

    Remarks

    The Diagram provides built-in shapes like BasicShape, FlowShape, and PathShape. Custom shapes can also be added to the node.

    Examples
    <SfDiagramComponent Height="600px" Nodes="@nodes" />
    @code
    {
        //Initialize the node collection with node
        DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
        protected override void OnInitialized()
        {
            Node node = new Node()
            {
                ID = "node1",
                //Size of the node
                Height = 100,
                Width = 100,
                //Position of the node
                OffsetX = 100,
                OffsetY = 100,
                //Set the type of shape as flow
                Shape = new FlowShape()
                {
                    Type = NodeShapes.Flow,
                    Shape = NodeFlowShapes.DirectData
                }
            };
            nodes.Add(node);
        }
    }

    Style

    Represents the appearance style of the Node.

    Declaration
    public ShapeStyle Style { get; set; }
    Property Value
    Type Description
    ShapeStyle

    A ShapeStyle representing the style of the node, including fill, stroke color, stroke dash array, and stroke width.

    Remarks

    The Style property is used to define the visual attributes of a node in a diagram. It allows customization of the node's appearance by specifying properties like fill color, stroke pattern, and stroke thickness.

    Examples
    <SfDiagramComponent Height="600px" Nodes="@nodes" />
    @code
    {
        // Initialize the node collection with a node
        DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
        protected override void OnInitialized()
        {
            Node node = new Node()
            {
                ID = "node1",
                // Size of the node
                Height = 100,
                Width = 100,
                // Position of the node
                OffsetX = 100,
                OffsetY = 100,
                // Set the type of shape as flow
                Style = new ShapeStyle() 
                {
                    Fill = "#6BA5D7", 
                    StrokeDashArray = "5,5", 
                    StrokeColor = "red", 
                    StrokeWidth = 2 
                }
            };
            nodes.Add(node);
        }
    }

    VerticalAlignment

    Gets or sets the vertical alignment of the node.

    Declaration
    public VerticalAlignment VerticalAlignment { get; set; }
    Property Value
    Type Description
    VerticalAlignment

    A VerticalAlignment representing the vertical alignment of the node. The default value is Center.

    Remarks

    Describes how a node should be positioned or stretched in relation to the vertical alignment.

    Examples
    <SfDiagramComponent Height="600px" Nodes="@nodes" />
    @code
    {
        DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
        protected override void OnInitialized()
        {
            Node node = new Node()
            {
                ID = "node1",
                //Size of the node
                Height = 100,
                Width = 100,
                //Position of the node
                OffsetX = 100,
                OffsetY = 100,
                VerticalAlignment = VerticalAlignment.Center,
            };
            nodes.Add(node);
        }
    }

    Width

    Gets or sets the width of the node. If not specified, the node renders based on the content's width.

    Declaration
    public Nullable<double> Width { get; set; }
    Property Value
    Type Description
    System.Nullable<System.Double>

    A System.Double representing the width of the node. The default value is null.

    Remarks

    The width of a node does not include borders or margins.

    Examples
    <SfDiagramComponent Height="600px" Nodes="@nodes" />
    @code {
        // Initialize the node collection with node and with Expand & CollapseIcon
        DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
        protected override void OnInitialized()
        {
            Node node = new Node()
            {
                ID = "node1",
                // Size of the node
                Height = 100,
                Width = 100,
                // Position of the node
                OffsetX = 100,
                OffsetY = 100,
                Pivot = new DiagramPoint() { X = 0, Y = 0.5 },
            };
            nodes.Add(node);
        }
    }

    Methods

    Clone()

    Creates a new object that is a copy of the current Node.

    Declaration
    public override object Clone()
    Returns
    Type Description
    System.Object

    A new Node instance that is an exact copy of the current node.

    Overrides
    NodeBase.Clone()

    Implements

    IDiagramObject
    System.ICloneable
    Back to top Generated by DocFX
    Copyright © 2001 - 2025 Syncfusion Inc. All Rights Reserved