Class DiagramGradient
It allows the user to define and apply the gradient effect.
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 |