Blazor

Upgrade Guide User Guide Demos Support Forums Download
  • Upgrade Guide
  • User Guide
  • Demos
  • Support
  • Forums
  • Download
Class NodeExpandIcon - Blazor API Reference | Syncfusion

    Show / Hide Table of Contents

    Class NodeExpandIcon

    Represents the expanded state of the node.

    Inheritance
    System.Object
    SfDiagramBase
    NodeExpandIcon
    Inherited Members
    SfDiagramBase.UpdateCollection(IList, Boolean)
    SfDiagramBase.RandomString(Int32)
    Namespace: Syncfusion.Blazor.Diagrams
    Assembly: Syncfusion.Blazor.dll
    Syntax
    public class NodeExpandIcon : SfDiagramBase
    Remarks

    Node has different kinds of states such as Expand and Collapse state. When the user clicks ExpandIcon, all the children from the respective node will get expanded whereas CollapseIcon is clicked, then all children from the respective node will get collapsed. The following code shows, how to define NodeExpandIcon and its properties.

    Examples
    <SfDiagram Height="600px" Nodes="@NodeCollection">
    </SfDiagram>
    @code{
      public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>() { };
      protected override void OnInitialized()
       {
       // A node is created and stored in nodes collection.
       DiagramNode Node = new DiagramNode()
       {
          // Position of the node
          OffsetX = 250,
          OffsetY = 250,
          // Size of the node
          Width = 100,
          Height = 100,
          Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" },
          ExpandIcon = new NodeExpandIcon()
          {
            Width = 70,
            Height = 20,
            Shape = IconShapes.ArrowDown,
            Fill = "red",
            BorderColor = "black",
            BorderWidth = 2,
            CornerRadius = 5
          },
       };
       NodeCollection.Add(Node);
      }
     }

    Constructors

    NodeExpandIcon()

    Represents the expanded state of the node.

    Declaration
    public NodeExpandIcon()

    Properties

    BorderColor

    Gets or sets the border color of an icon.

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

    BorderWidth

    Gets or sets the border width of an icon. By default, it is set to 1.

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

    Content

    Gets or sets the custom content of an icon.

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

    CornerRadius

    Gets or sets the corner radius of an icon border.

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

    CornerRadius property is used to provide a rounded border instead of a sharp one. By default, it set to 0.

    Fill

    Gets or sets the fill color of an Icon. By default, it is set to white.

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

    Height

    Gets or sets the height of an Icon. By default, it is set to 10.

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

    HorizontalAlignment

    Describes how an Icon element is horizontally positioned or stretched in the node.

    Declaration
    public HorizontalAlignment HorizontalAlignment { get; set; }
    Property Value
    Type Description
    HorizontalAlignment
    Remarks
    The list of following options is used to defining the Horizontal Alignment of an icon
    1. Stretch - Stretches the diagram element throughout the node.
    2. Left - Aligns the diagram element at the left of the node.
    3. Right - Aligns the diagram element at the right of the node.
    4. Center - Aligns the diagram element at the center of the node.
    5. Auto - Aligns the diagram element based on the characteristics of the node.

    Margin

    Sets the space around the expand icon. By default, it is set to 0 from all sides.

    Declaration
    public ExpandIconMargin Margin { get; set; }
    Property Value
    Type Description
    ExpandIconMargin
    Examples
             ExpandIcon = new NodeExpandIcon() {
     Margin = new ExpandIconMargin { Top = 0 , Left = 0, Bottom = 0, Right = 0 } ,
     },

    Offset

    Specifies the position of an icon relative to the bounds of the node.

    Declaration
    public IconOffset Offset { get; set; }
    Property Value
    Type Description
    IconOffset
    Remarks
    Offset values range from 0 to 1. By default, the offset values are set to X= 0.5 and Y=1.
    1. When x= 0 and y = 0, then the icon will be position at the top left corner of the node.
    2. When x= 0.5 and y = 0.5, then the icon will be position at the center of the node.
    3. When x= 1 and y = 1, then the icon will be position at the bottom right corner of the node.

    Padding

    Specifies the space inside the border of an icon. By default, it is set 2 from all sides.

    Declaration
    public IconPadding Padding { get; set; }
    Property Value
    Type Description
    IconPadding
    Examples
    ExpandIcon = new NodeExpandIcon() {
      Padding = new IconPadding { Top = 0 , Left = 0, Bottom = 0, Right = 0 }
     }

    PathData

    Defines the geometry of a path.

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

    Shape

    Defines the shape information of the icon.

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

    There are several shapes in the shape category of an icon such as Minus, Plus, ArrowUp, Arrow down, etc., By default, it will be None.

    VerticalAlignment

    Describes how an Icon element is vertically positioned or stretched in the node.

    Declaration
    public VerticalAlignment VerticalAlignment { get; set; }
    Property Value
    Type Description
    VerticalAlignment
    Remarks
    The list of following options is used to defining the vertical Alignment of an icon.
    1. Stretch - Stretches the diagram element throughout the node.
    2. Left - Aligns the diagram element at the left of the node.
    3. Right - Aligns the diagram element at the right of the node.
    4. Center - Aligns the diagram element at the center of the node.
    5. Auto - Aligns the diagram element based on the characteristics of the node.

    Width

    Gets or sets the width of an icon. By default, it is set to 10.

    Declaration
    public double Width { get; set; }
    Property Value
    Type Description
    System.Double
    Back to top Generated by DocFX
    Copyright © 2001 - 2022 Syncfusion Inc. All Rights Reserved