Class NodeExpandIcon

Represents the expanded state of the node.

Inheritance
System.Object
SfDiagramBase
NodeExpandIcon
Inherited Members
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