Search results

Appearance in Blazor Diagram component

03 Aug 2021 / 11 minutes to read

The following code shows how to customize the appearance of the shape.

Copied to clipboard
@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel

<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 array.
    DiagramNode node1 = new DiagramNode()
    {
        // Position of the node
        OffsetX = 250,
        OffsetY = 250,
        // Size of the node
        Width = 100,
        Height = 100,
        // Add node
        Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeDashArray = "5,5", StrokeColor = "red", StrokeWidth = 2 },
    };
    NodeCollection.Add(node1);
}
}

Node appearance

Gradient

The Gradient property of the node allows you to define and apply the gradient effect to the node.

The gradient stop property defines the color and a position, where the previous color transition ends and a new color transition starts.

The gradient stop’s opacity property defines the transparency level of the region.

There are two types of gradients as follows:

  • Linear Gradient
  • Radial Gradient

Linear gradient

  • LinearGradient defines a smooth transition between a set of colors (so-called stops) in a line.
  • A linear gradient’s X1, Y1, X2, Y2 properties are used to define the position (relative to the node) of the rectangular region that needs to be painted.
Copied to clipboard
@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel

<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 array.
    DiagramNode node1 = new DiagramNode()
    {
        // Position of the node
        OffsetX = 250,
        OffsetY = 250,
        // Size of the node
        Width = 100,
        Height = 100,
        Style = new NodeShapeStyle() {
            Gradient = new DiagramGradient() {
                //Start point of linear gradient
                X1 = 0, Y1 = 0,
                //End point of linear gradient
                X2 = 50, Y2 = 50,
                //Sets an array of stop objects
                Stops = new ObservableCollection<DiagramsGradientStop>()
                {
                    new DiagramsGradientStop(){ Color = "white", Offset = 0},
                    new DiagramsGradientStop(){ Color = "#6BA5D7", Offset = 100}
                },
                Type = GradientType.Linear
            }
        },
    };
    NodeCollection.Add(node1);
}
}

Node LinearGradient

Radial gradient

  • RadialGradient defines a smooth transition between stops on a circle.
  • A radial gradient properties are used to define the position (relative to the node) of the outermost or the innermost circle of the radial gradient.
Copied to clipboard
@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel

<SfDiagram Height="600px" Nodes="@NodeCollection">
</SfDiagram>

@code{
public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>() { };
protected override void OnInitialized()
{
    DiagramNode node1 = new DiagramNode()
    {
        // Position of the node
        OffsetX = 250,
        OffsetY = 250,
        // Size of the node
        Width = 100,
        Height = 100,
        Style = new NodeShapeStyle()
        {
            Gradient = new DiagramGradient()
            {
                //Center point of inner circle
                Fx = 20,
                Fy = 20,
                //Center point of outer circle
                Cx = 50,
                Cy = 50,
                //Radius of a radial gradient
                R = 50,
                //Sets an array of stop objects
                Stops = new ObservableCollection<DiagramsGradientStop>()
            {
                    new DiagramsGradientStop(){ Color = "white", Offset = 0},
                    new DiagramsGradientStop(){ Color = "#6BA5D7", Offset = 100}
                },
                Type = GradientType.Radial
            }
        },
    };
    // Add node
    NodeCollection.Add(node1);
}
}

Node RadialGradient

Shadow

Diagram provides support to add Shadow effect to a node that is disabled, by default. It can be enabled with the constraints property of the node. The following code shows how to draw shadow.

Copied to clipboard
@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel

<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 array.
    DiagramNode node1 = 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" },
        Constraints = NodeConstraints.Default | NodeConstraints.Shadow
    };
    NodeCollection.Add(node1);
}
}

Node shadow

Customizing shadow

The Angle, Distance, and Opacity of the shadow can be customized with the shadow property of the node. The following code example illustrates how to customize shadow.

Copied to clipboard
@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel

<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 array.
    DiagramNode node1 = 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" },
        Constraints = NodeConstraints.Default | NodeConstraints.Shadow,
        // Custom Shadow of the node
        Shadow =  new DiagramShadow()
        {
            Angle = 50,
            Opacity = 0.8,
            Distance = 9
        }
    };
    NodeCollection.Add(node1);
}
}

Shadow

Icon

Diagram provides support to describe the state of the node. i.e., the node is expanded or collapsed state.

Note: Icon can be created only when the node has outEdges.

  • To explore the properties of expand and collapse icon, refer to ExpandIcon and CollapseIcon.
  • The ExpandIcon’s and CollapseIcon’s shape properties allow you to define the shape of the icon.

The following code example shows how to create an icon of various shapes.

Copied to clipboard
@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel

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

`Node Icon`

Customizing expand icon

  • Set the BorderColor, BorderWidth, and background color for an ExpandIcon using the BorderColor, BorderWidth, and Fill properties.
  • Set a size for an expandIcon by using the Width and Height properties.
  • The expand icon can be aligned relative to the node boundaries. It has Margin, Offset, HorizontalAlignment, and VerticalAlignment settings. It is quite tricky when all four alignments are used together but gives you more control over alignment.

Customizing collapse icon

  • Set the borderColor, borderWidth, background color for an collapseIcon using the BorderColor, BorderWidth, and Fill properties.
  • Set a size for collapseIcon by using the Width and Height properties.
  • Like expand icon, collapse icon also can be aligned relative to the node boundaries. It has Margin, Offset, HorizontalAlignment, and VerticalAlignment settings. It is quite tricky when all four alignments are used together but gives you more control over alignment.

Constraints

The constraints property of the node allows you to enable/disable certain features. For more information about node constraints, refer to Node Constraints.

Custom properties

The AddInfo property of the node allows you to maintain additional information to the node.

The following code shows how to set the AddInfo value.

Copied to clipboard
@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel

<SfDiagram Height="600px" Nodes="@NodeCollection">
</SfDiagram>

@code{

public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();
public List<NodeAddInfo> AddInfo = new List<NodeAddInfo>()
{
    new NodeAddInfo(){ Content = "NodeContent", ParentID = "diagram" }
};
protected override void OnInitialized()
{
    // A node is created and stored in nodes collection.

    DiagramNode node1 = 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" },
        AddInfo = AddInfo
    };
    // Add node
    NodeCollection.Add(node1);
}

public class NodeAddInfo {
    public string ParentID;
    public string Content;
}
}

Note: We can set any type of value for the AddInfo property.

Stack order

The node’s z-order property specifies the stack order of the node. A node with greater stack order is always in front of a node with a lower stack order.

The following code illustrates how to render a node based on the stack order.

Copied to clipboard
@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel

<SfDiagram Height="600px" Nodes="@NodeCollection">
</SfDiagram>

@code
{
//Defines diagram's connector collection
public ObservableCollection<DiagramNode> NodeCollection;

protected override void OnInitialized()
{
    NodeCollection = new ObservableCollection<DiagramNode>()
    {
        new DiagramNode(){
            // Unique id of the node
            Id = "Node1",
            // Position of the node
            OffsetX = 100, OffsetY = 100,
            // Size of the node
            Width = 100, Height = 100,
            // Sets style of the node
            Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" },
            //Specify the z-index value
            ZIndex = 2,
        },
        new DiagramNode(){
            // Unique id of the node
            Id = "Node2",
            // Position of the node
            OffsetX = 150, OffsetY = 150,
            // Size of the node
            Width = 100, Height = 100,
            // Sets style of the node
            Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" },
            //Specify the z-index value
            ZIndex = 1,
        }
    };
}
}

`Node Stack Order`

Data flow

You can find the flow in the diagram by using the GetEdges method. In this method, you can find what are all the connectors that are connected to the node.

Copied to clipboard
@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel
<input type="button" value="UpdateEdges" @onclick="@UpdateEdges" />
<SfDiagram Height="600px" @ref="@Diagram" Nodes="@NodeCollection" Connectors="@ConnectorCollection" NodeDefaults="@NodeDefaults">
</SfDiagram>

@code{
// Reference of the diagram
SfDiagram Diagram;
// Define node and connector collection
public ObservableCollection<DiagramNode> NodeCollection;
public ObservableCollection<DiagramConnector> ConnectorCollection;
// Set the default value of the node
DiagramNode NodeDefaults = new DiagramNode()
{
    // Size of the node
    Width = 80, Height = 50,
    // Style of the node
    Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" },
};
protected override void OnInitialized()
{
    NodeCollection = new ObservableCollection<DiagramNode>() {
        new DiagramNode()
        {
            Id = "node1",
            // Position of the node
            OffsetX = 450, OffsetY = 100
        },
        new DiagramNode()
        {
            Id = "node2",
            // Position of the node
            OffsetX = 350, OffsetY = 200
        },
        new DiagramNode()
        {
            Id = "node3",
            // Position of the node
            OffsetX = 450, OffsetY = 200
        },
        new DiagramNode()
        {
            Id = "node4",
            // Position of the node
            OffsetX = 550, OffsetY = 200
        }
    };
    ConnectorCollection = new ObservableCollection<DiagramConnector>() {
        new DiagramConnector()
        {
            // Sets the unique id, source node, taget node
            Id = "connector1", SourceID = "node1", TargetID = "node2",
            // Sets the type of the connector
            Type = Segments.Orthogonal
        },
        new DiagramConnector()
        {
            // Sets the unique id, source node, taget node
            Id = "connector2", SourceID = "node1", TargetID = "node3",
            // Sets the type of the connector
            Type = Segments.Orthogonal
        },
        new DiagramConnector()
        {
            // Sets the unique id, source node, taget node
            Id = "connector3", SourceID = "node1", TargetID = "node4",
            // Sets the type of the connector
            Type = Segments.Orthogonal
        }
    };
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        //OnAfterRenderAsync will be triggered after the component rendered.
        await Task.Delay(1500);
        // Select the node
        Diagram.Select(new ObservableCollection<DiagramNode>() { Diagram.Nodes[0] }, null);
    }
}

public async Task UpdateEdges()
{
    string NodeId = Diagram.SelectedItems.Nodes[0].Id;
    // GetEdges method is used to get the connectors that connected to nodes.
    string[] edges = await Diagram.GetEdges(NodeId, true);
    for (int i = 0; i < edges.Length; i++)
    {
        // Get the connector from id
        DiagramConnector connector = Diagram.GetConnector(edges[i]);
        // Change the style of the connector
        connector.Style.StrokeColor = "#1413F8";
        connector.TargetDecorator.Style.StrokeColor = "#1413F8";
        connector.TargetDecorator.Style.Fill = "#1413F8";
    }
}
}

Node DataFlow

See also