Blazor

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

    Show / Hide Table of Contents

    Class IconShapes

    Specifies the icon to be shown in the node’s expand or collapsed state.

    Inheritance
    System.Object
    IconShapes
    Namespace: Syncfusion.Blazor.Diagrams
    Assembly: Syncfusion.Blazor.dll
    Syntax
    public sealed class IconShapes : Enum
    Remarks
    To know more about using icon shapes, refer to these links
    1. HierarchicalLayout
    2. Organizational Chart
    3. Nodes
    To apply icon shape, use the below code.
    Examples
    <SfDiagram Height="600px" Nodes="@NodeCollection" NodeDefaults="@NodeDefault" Connectors="@ConnectorCollection">
    </SfDiagram>
    @code{
         public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>() { };
       public ObservableCollection<DiagramConnector> ConnectorCollection = new ObservableCollection<DiagramConnector>() { };
       DiagramNode NodeDefault = new DiagramNode()
       {
           Width = 140,
           Height = 50,
           Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" },
       };
       protected override void OnInitialized()
       {
           DiagramNode Node1 = new DiagramNode()
           {
               Id = "Start",
               OffsetX = 300,
               OffsetY = 50,
               Annotations = new ObservableCollection<DiagramNodeAnnotation>()
       {
                   new DiagramNodeAnnotation(){ Content = "Node1" }
               },
               ExpandIcon = new NodeExpandIcon() { Shape = IconShapes.ArrowDown, Width = 10, Height = 10 },
               CollapseIcon = new NodeCollapseIcon() { Shape = IconShapes.ArrowUp, Width = 10, Height = 10 }
           };
           NodeCollection.Add(Node1);
           DiagramNode Node2 = new DiagramNode()
           {
               Id = "Init",
               OffsetX = 300,
               OffsetY = 140,
               Annotations = new ObservableCollection<DiagramNodeAnnotation>()
               {
                   new DiagramNodeAnnotation(){ Content = "Node2" }
               },
           };
           NodeCollection.Add(Node2);
           DiagramConnector Connector = new DiagramConnector()
           {
               // Unique name for the connector
               Id = "connector1",
               // Source and Target node's name to which connector needs to be connected.
               SourceID = "Start",
               TargetID = "Init",
               Type = Segments.Orthogonal
           };
           ConnectorCollection.Add(Connector);
       }
    }

    Fields

    ArrowDown

    sets the icon shape as Arrow down.

    Declaration
    public const IconShapes ArrowDown
    Field Value
    Type Description
    IconShapes

    ArrowUp

    sets the icon shape as ArrowUp.

    Declaration
    public const IconShapes ArrowUp
    Field Value
    Type Description
    IconShapes

    Minus

    sets the icon shape as a minus.

    Declaration
    public const IconShapes Minus
    Field Value
    Type Description
    IconShapes

    None

    sets the icon shape as None.

    Declaration
    public const IconShapes None
    Field Value
    Type Description
    IconShapes

    Path

    sets the icon shape based on the given custom Path.

    Declaration
    public const IconShapes Path
    Field Value
    Type Description
    IconShapes

    Plus

    sets the icon shape as Plus.

    Declaration
    public const IconShapes Plus
    Field Value
    Type Description
    IconShapes

    Template

    sets the icon shape based on the given custom template.

    Declaration
    public const IconShapes Template
    Field Value
    Type Description
    IconShapes

    value__

    Declaration
    public int value__
    Field Value
    Type Description
    System.Int32
    Back to top Generated by DocFX
    Copyright © 2001 - 2021 Syncfusion Inc. All Rights Reserved