Class DiagramIcon

Represents the icon of a node in the diagram.

Inheritance
System.Object
DiagramObject
DiagramIcon
DiagramCollapseIcon
DiagramExpandIcon
Implements
System.ICloneable
Inherited Members
Namespace: Syncfusion.Blazor.Diagram
Assembly: Syncfusion.Blazor.dll
Syntax
public class DiagramIcon : DiagramObject, IDiagramObject, ICloneable
Remarks

The DiagramIcon is used to display icons that allow nodes to be expanded or collapsed. This is particularly useful in scenarios where nodes have child nodes that can be shown or hidden.

Use the ExpandIcon and CollapseIcon properties to customize the appearance and behavior of these icons.

Examples

This example demonstrates how to initialize a node with Expand and Collapse icons in a diagram component.

<SfDiagramComponent Height="600px" Nodes="@nodes" />
@code {
    // Initialize the node collection with nodes and expand/collapse icons
    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();

protected override void OnInitialized()
{
    Node node1 = new Node()
    {
        ID = &quot;node1&quot;,
        // Size of the node
        Height = 100,
        Width = 100,
        // Position of the node
        OffsetX = 100,
        OffsetY = 100,
        ExpandIcon = new DiagramExpandIcon()
        {
            Shape = DiagramExpandIcons.Minus,
            Fill = &quot;Grey&quot;,
            Margin = new DiagramThickness
            {
                Top = 1,
                Bottom = 1,
                Left = 1,
                Right = 1,
            },
            Width = 10,
            Height = 10,
            OffsetX = 0.5,
            OffsetY = 1,
            HorizontalAlignment = HorizontalAlignment.Center,
            VerticalAlignment = VerticalAlignment.Center,
            BorderColor = &quot;Red&quot;,
            BorderWidth = 3,
            CornerRadius = 3,
            Padding = new DiagramThickness
            {
                Top = 1,
                Bottom = 1,
                Left = 1,
                Right = 1,
            }
        },
        CollapseIcon = new DiagramCollapseIcon()
        {
            Shape = DiagramCollapseIcons.Plus,
            Fill = &quot;Grey&quot;,
            Margin = new DiagramThickness
            {
                Top = 1,
                Bottom = 1,
                Left = 1,
                Right = 1,
            },
            Width = 10,
            Height = 10,
            OffsetX = 0.5,
            OffsetY = 1,
            HorizontalAlignment = HorizontalAlignment.Center,
            VerticalAlignment = VerticalAlignment.Center,
            BorderColor = &quot;Red&quot;,
            BorderWidth = 3,
            CornerRadius = 3,
            Padding = new DiagramThickness
            {
                Top = 1,
                Bottom = 1,
                Left = 1,
                Right = 1,
            }
        }
    };
    nodes.Add(node1);
}



}

Constructors

DiagramIcon()

Initializes a new instance of the icon.

Declaration
public DiagramIcon()

DiagramIcon(DiagramIcon)

Initializes a new instance of the DiagramIcon class by copying the properties from the specified source icon.

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

An instance of DiagramIcon that will be copied.

Properties

BorderColor

Gets or sets the border color of the expand/collapse icon in the diagram.

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

A System.String representing the border color. The default value is #1a1a1a.
Remarks

This property defines the color used for the border of the expand/collapse icon in diagram nodes. It can be customized to enhance the visual appearance of the diagram according to user preferences.

Examples

The following example demonstrates how to set the border color for a node's expand/collapse icon:

<SfDiagramComponent Height="600px" Nodes="@nodes" />
 @code
 {
    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
    protected override void OnInitialized()
    {
        Node node1 = new Node()
        {
            ExpandIcon = new DiagramExpandIcon()
            {
                Shape = DiagramExpandIcons.Minus,
                BorderColor = "Red",
            },
        };
        nodes.Add(node1);
    }
}

BorderWidth

Gets or sets the Border Width of the Expand/Collapse icon.

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

A System.Double that represents the border width of the icon. The default value is 1.
Remarks

This property specifies how thick the border of the expand/collapse icon should be.

Adjust the value to customize the appearance of the icon in diagrams.

Examples
// Initializes the diagram component with customized border width for the expand icon
<SfDiagramComponent Height="600px" Nodes="@nodes" />
@code
{
    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
    protected override void OnInitialized()
    {
        Node node1 = new Node()
        {
            ExpandIcon = new DiagramExpandIcon()
            {
                Shape = DiagramExpandIcons.Minus,
                BorderWidth = 3,
            },
        };
        nodes.Add(node1);
    }
}

CornerRadius

Gets or sets the corner radius of the expand/collapse icon.

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

A System.Double representing the corner radius of the expand/collapse icon. The default value is 0.
Remarks

Use this property to round the corners of the expand or collapse icon. Setting a higher value produces more pronounced rounded corners, while a value of 0 maintains sharp (square) corners.

Examples

Demonstrates how to set the CornerRadius property to provide rounded corners for the expand/collapse icon.

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

Fill

Gets or sets the fill color of an icon. Represents the color used to fill the icon's background.

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

A System.String representing the color value of the icon fill. The default value is null.
Remarks

Setting this property changes the visual appearance of the icon within the diagram node, allowing customization to match application themes or specific design requirements.

Examples

This example demonstrates how to set the Fill property for an icon within a node.

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

Height

Gets or sets the height of the icon in a diagram node.

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

A System.Double representing the height of the icon. The default value is 15.
Remarks

The height of the icon does not include borders or margins.

Examples
<SfDiagramComponent Height="600px" Nodes="@nodes" />
 @code
 {
    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
    protected override void OnInitialized()
    {
        Node node1 = new Node()
        {
            ExpandIcon = new DiagramExpandIcon()
            {
                Shape=DiagramExpandIcons.Minus,
                Fill="Grey",           
                Width=10,
                Height=10,
                OffsetX = 0.5,
                OffsetY = 1,              
            },
        };
        nodes.Add(node1);
    }
}

HorizontalAlignment

Gets or sets the horizontal alignment of the Expand/Collapse Icon.

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

A HorizontalAlignment value that determines the horizontal position of the icon. The possible values are Left, Center, Right, and Stretch. The default value is HorizontalAlignment.Center.
Remarks

This value specifies how the Expand/Collapse Icon is aligned horizontally. It defines the position of the icon along the horizontal axis within its designated space.

Examples
<SfDiagramComponent Height="600px" Nodes="@nodes" />
@code {
    // Initialize the node collection with a node and configure the Expand & Collapse icon
    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
    protected override void OnInitialized() {
        Node node1 = new Node() {
            ExpandIcon = new DiagramExpandIcon() {
                HorizontalAlignment = HorizontalAlignment.Center,
            },
        };
        nodes.Add(node1);
    }
}

Margin

Gets or sets the margin for the Expand/Collapse Icon.

Declaration
public DiagramThickness Margin { get; set; }
Property Value
Type Description
DiagramThickness

A DiagramThickness representing the space around the icon. The default values are 0 on all sides.
Remarks

Defines the offset space from the actual position of the icon, allowing custom placement within its container.

Adjust the margin to control the spacing from other elements.

Examples
<SfDiagramComponent Height="600px" Nodes="@nodes" />
@code {
    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
    protected override void OnInitialized() {
        Node node1 = new Node() {
            ExpandIcon = new DiagramExpandIcon() {
                Shape = DiagramExpandIcons.Minus,
                Fill = "Grey",
                Margin = new DiagramThickness() {
                    Top = 1,
                    Bottom = 1,
                    Left = 1,
                    Right = 1,
                }
            },
        };
        nodes.Add(node1);
    }
}

OffsetX

Gets or sets the horizontal offset for the Expand/Collapse Icon in a diagram node.

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

A System.Double representing the horizontal position of the icon. The value should be between 0 and 1, where 0 aligns the icon to the left edge and 1 aligns it to the right edge. The default value is 0.5.
Remarks

Defines the position of the Expand/Collapse icon with respect to the boundaries of a node within a diagram. Adjusting the offset can help in better alignment of the icon based on the design needs of the diagram.

Examples
<SfDiagramComponent Height="600px" Nodes="@nodes" />
@code
{
    protected override void OnInitialized()
    {
        Node node1 = new Node()
        {
            ExpandIcon = new DiagramExpandIcon()
            {
                Shape = DiagramExpandIcons.Minus,
                Fill = "Grey",
                Width = 10,
                Height = 10,
                OffsetX = 0.5,
                OffsetY = 1,
            },
        };
        nodes.Add(node1);
    }
}

OffsetY

Gets or sets the Y coordinate offset of the Expand/Collapse icon.

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

A System.Double representing the offset coordinate along the Y-axis. The default value is 0.0.
Remarks

This property defines the Y position of the Expand/Collapse icon relative to the boundaries of a node. Adjusting this offset allows you to reposition the icon vertically to fit within custom layouts or designs.

Examples

Example of setting the OffsetY property:

<SfDiagramComponent Height="600px" Nodes="@nodes" />
@code {
    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
    protected override void OnInitialized() {
        Node node1 = new Node() {
            ExpandIcon = new DiagramExpandIcon() {
                Shape = DiagramExpandIcons.Minus,
                Fill = "Grey",
                Width = 10,
                Height = 10,
                OffsetX = 0.5,
                OffsetY = 1,
            },
        };
        nodes.Add(node1);
    }
}

Padding

Gets or sets the padding of the expand/collapse icon.

Declaration
public DiagramThickness Padding { get; set; }
Property Value
Type Description
DiagramThickness

A DiagramThickness that specifies the space by which the icon is offset from its border. The default value is a DiagramThickness with all sides set to 0.
Remarks

Padding adds space between the icon content and its border area. Use this property to adjust the alignment of the icon within its node to prevent overlap with other elements.

Examples

The following example demonstrates how to specify custom padding for the expand/collapse icon on a diagram node.

<SfDiagramComponent Height="600px" Nodes="@nodes" />
@code {
    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
    protected override void OnInitialized()
    {
        Node node1 = new Node()
        {
            ExpandIcon = new DiagramExpandIcon()
            {
                Padding = new DiagramThickness() {
                    Top = 1,
                    Bottom = 1,
                    Left = 1,
                    Right = 1,
                }
            },
        };
        nodes.Add(node1);
    }
}

PathData

Gets or sets the custom geometry data that defines the visual path of the expand or collapse icon in a node.

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

A System.String representing the SVG path data for a custom-shaped expand or collapse icon. The default value is null.
Remarks

Set the PathData property to specify a custom shape for the expand/collapse icon when Path is assigned to the icon’s shape property. The path data uses SVG notation and determines how the custom icon will be rendered.

Examples

Demonstrates how to apply custom SVG path data for the expand/collapse icon in a node.

<SfDiagramComponent Height="600px" Nodes="@nodes" />
@code {
    // Initialize the node collection with a node that has a custom expand icon shape.
    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
    protected override void OnInitialized()
    {
        Node node1 = new Node()
        {
            ID = "node1",
            // Size of the node
            Height = 100,
            Width = 100,
            // Position of the node
            OffsetX = 100,
            OffsetY = 100,
            ExpandIcon = new DiagramExpandIcon()
            {
                Shape = DiagramExpandIcons.Path,
                PathData = "M100,200 C100,100 250,100 250,200 S400,300 400,200",
            },
        };
        nodes.Add(node1);
    }
}

VerticalAlignment

Gets or sets the vertical alignment of the expand/collapse icon in the diagram node.

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

A VerticalAlignment value that specifies the vertical positioning of the expand/collapse icon. The default value is Center.
Remarks

Determines how the icon is aligned vertically within the node bounds. Accepted values are from the VerticalAlignment enumeration, including Top, Center, and Bottom.

Examples

Demonstrates how to set the vertical alignment of the expand/collapse icon to the center of a node.

<SfDiagramComponent Height="600px" Nodes="@nodes" />
@code {
    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
    protected override void OnInitialized()
    {
        Node node1 = new Node()
        {
            ExpandIcon = new DiagramExpandIcon()
            {
                Shape = DiagramExpandIcons.Minus,
                HorizontalAlignment = HorizontalAlignment.Center,
                VerticalAlignment = VerticalAlignment.Center,
            },
        };
        nodes.Add(node1);
    }
}

Width

Gets or sets the width of the icon. By default, it is 15 pixels.

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

A System.Double representing the width of the icon in pixels. The default value is 15.
Remarks

The width of the icon does not include borders or margins.

Examples
<SfDiagramComponent Height="600px" Nodes="@nodes" />
 @code
 {
    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
    protected override void OnInitialized()
    {
        Node node1 = new Node()
        {
            ExpandIcon = new DiagramExpandIcon()
            {
                Shape=DiagramExpandIcons.Minus,
                Fill="Grey",
                Width=10,
                Height=10,
                OffsetX = 0.5,
                OffsetY = 1,
            },
        };
        nodes.Add(node1);
    }
}

Implements

System.ICloneable