Blazor

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

    Show / Hide Table of Contents

    Class DiagramGradient

    It allows the user to define and apply the gradient effect.

    Inheritance
    System.Object
    SfDiagramBase
    DiagramGradient
    Inherited Members
    SfDiagramBase.UpdateCollection(IList, Boolean)
    SfDiagramBase.RandomString(Int32)
    Namespace: Syncfusion.Blazor.Diagrams
    Assembly: Syncfusion.Blazor.dll
    Syntax
    public class DiagramGradient : SfDiagramBase
    Remarks
    There are two types of gradients as follows
    1. Linear Gradient.
    2. Radial Gradient.
    The following code demonstrates, how to define the Linear Gradient 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 array.
       DiagramNode Node = 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(Node);
      }
     }

    Constructors

    DiagramGradient()

    It allows the user to define and apply the gradient effect.

    Declaration
    public DiagramGradient()

    Properties

    Cx

    Specifies the center point of the outer circle of the radial gradient.

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

    Cy

    Specifies the center point of the outer circle of the radial gradient.

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

    Fx

    Specifies the center point of the inner circle of the radial gradient.

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

    Fy

    Specifies the center point of the inner circle of the radial gradient.

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

    Id

    Specifies the Id of the gradient.

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

    R

    Specifies the radius of a radial gradient.

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

    Stops

    Specifies the color and a position, where the previous color transition ends, and a new color transition starts.

    Declaration
    public ObservableCollection<DiagramsGradientStop> Stops { get; set; }
    Property Value
    Type Description
    System.Collections.ObjectModel.ObservableCollection<DiagramsGradientStop>

    Type

    Specifies the type of gradient.

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

    X1

    Specifies the start point of the Linear gradient.

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

    X2

    Specifies the start point of the Linear gradient.

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

    Y1

    Specifies the endpoint of the Linear gradient.

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

    Y2

    Specifies the endpoint of the Linear gradient.

    Declaration
    public double Y2 { get; set; }
    Property Value
    Type Description
    System.Double
    Back to top Generated by DocFX
    Copyright © 2001 - 2022 Syncfusion Inc. All Rights Reserved