Class DiagramIcon

Represents icon of the node.

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

DiagramIcon is the Expand/Collapse icon model that represents the state of the Node and allows its Child Nodes to be Expanded or Collapsed.

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 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.Minus,
                Fill=”Grey”,
                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=”Red”,
                BorderWidth=3,
                CornerRadius=3,
                Padding = new DiagramThickness(){
                Top = 1,
                Bottom = 1,
                Left = 1,
                Right = 1,
                }               
            },
            CollapseIcon = new DiagramCollapseIcon()
            {
                Shape=DiagramCollapseIcons.Plus,
                Fill=”Grey”,
                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=”Red”,
                BorderWidth=3,
                CornerRadius=3,
                Padding = new DiagramThickness(){
                Top = 1,
                Bottom = 1,
                Left = 1,
                Right = 1,
                }               
            }
        };
        nodes.Add(node);
    }
}

Constructors

DiagramIcon()

Initializes a new instance of the icon.

Declaration
public DiagramIcon()

DiagramIcon(DiagramIcon)

Creates a new instance of the Expand/Collapse icon from the given icon.

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

IconShapeModel

Properties

BorderColor

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

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

The default Border Color is #1a1a1a
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,
                BorderColor=”Red”,              
            },
        };
        nodes.Add(node);
    }
}

BorderWidth

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

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

The default Border Width is set as 1
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,
                 BorderWidth=3,             
            },
        };
        nodes.Add(node);
    }
}

CornerRadius

Gets or sets the corner radius of the Expand/Collapse icon. By default the corner radius is set as 0

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

The default corner radius is set as 0
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 node1 = new Node()
        {
            ExpandIcon = new DiagramExpandIcon()
            {
                Shape=DiagramExpandIcons.Minus,
                CornerRadius=3,             
            },
        };
        nodes.Add(node);
    }
}

Fill

Gets or sets the fill color of an icon.

Declaration
public string Fill { get; set; }
Property Value
Type
System.String
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 node1 = new Node()
        {
            ExpandIcon = new DiagramExpandIcon()
            {
                Shape=DiagramExpandIcons.Minus,
                Fill=”Grey”,                       
            },
        };
        nodes.Add(node);
    }
}

Height

Gets or sets the height of the icon. By default, it is 15px.

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

The default value is 15px
Remarks

The height of a 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(node);
    }
}

HorizontalAlignment

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

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

Describes how an Icon should be positioned or stretched in HorizontalAlignment.

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 node1 = new Node()
        {
            ExpandIcon = new DiagramExpandIcon()
            {
                HorizontalAlignment
                          =HorizontalAlignment.Center,            
            },
        };
        nodes.Add(node);
    }
}

Margin

Gets or sets the margin for the Expand/Collapse Icon

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

The default values for the Margin are 0 on all sides
Remarks

Defines the space from the actual offset values of the icon.

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(node);
    }
}

OffsetX

Gets or sets the offset coordinates of the Expand/Collapse Icon.

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

Defines the position of the Expand/Collapse icon with respect to the boundaries of node.

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(node);
    }
}

OffsetY

Gets or sets the offset coordinates of the Expand/Collapse Icon.

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

Defines the position of the Expand/Collapse icon with respect to the boundaries of node.

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(node);
    }
}

Padding

Gets or sets Padding of the Expand/Collapse Icon.

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

Defines the space that the icon has to be moved from the icon border

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,
                Padding = new DiagramThickness(){
                Top = 1,
                Bottom = 1,
                Left = 1,
                Right = 1,
                }               
            },
        };
        nodes.Add(node);
    }
}

PathData

Gets or sets the custom geometry(shape) data of the Expand/Collapse icon.

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

To create a custom-shaped Expand/Collapse icon, the user must set the shape to ‘path’ and then the PathData. (A custom graphics path is a set of connected lines, curves, and other simple graphics objects, including rectangles, ellipses, and text. A path works as a single graphics object, so any effect applied to the graphic path will also be applied to the Expand/Collapse icon..)

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 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(node);
    }
}

VerticalAlignment

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

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

Describes how an Icon should be positioned or stretched in VerticalAlignment.

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,
                HorizontalAlignment
                          =HorizontalAlignment.Center,
                VerticalAlignment
                          =VerticalAlignment.Center,             
            },
        };
        nodes.Add(node);
    }
}

Width

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

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

The default value is 15px
Remarks

The width of a 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(node);
    }
}

Implements

System.ICloneable