Class NodeShapeStyle
Represents the appearance of the node.
Namespace: Syncfusion.Blazor.Diagrams
Assembly: Syncfusion.Blazor.dll
Syntax
public class NodeShapeStyle : SfDiagramBase
Examples
<SfDiagram Height="600px" Nodes="@NodeCollection">
<DiagramSnapSettings Constraints = "SnapConstraints.None" ></ DiagramSnapSettings >
</ SfDiagram >
@code{
//Initialize node collection with node
ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>()
{
//Creates a text node
new DiagramNode()
{
Id="node1",
// Size of the node
Height=100,
Width=100,
// Position of the node
OffsetX=100,
OffsetY=100,
//Sets type of the shape as text
Shape=new DiagramShape(){Type=Shapes.Text,Content="Text Node"},
//Set the style property to the shape
Style = new NodeShapeStyle() { Bold= true, Color = "red", Fill = "#6BA5D7" , FontSize = 15 , Italic = true, Opacity = 0.5}
}
};
}
}
Constructors
NodeShapeStyle()
Represents the appearance of the node.
Declaration
public NodeShapeStyle()
Properties
Bold
This property allows the users to enable or disable the bold style of a text
Declaration
public bool Bold { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |
Color
Gets or sets the font color of a text.
Declaration
public string Color { get; set; }
Property Value
Type | Description |
---|---|
System.String |
Fill
Gets or sets the fill color of a shape/path.
Declaration
public string Fill { get; set; }
Property Value
Type | Description |
---|---|
System.String |
FontFamily
Gets or sets the font type of a text.
Declaration
public string FontFamily { get; set; }
Property Value
Type | Description |
---|---|
System.String |
FontSize
Gets or sets the font size of a text.
Declaration
public double FontSize { get; set; }
Property Value
Type | Description |
---|---|
System.Double |
Gradient
This property allows the users to define and apply the gradient effect to the node.
Declaration
public DiagramGradient Gradient { get; set; }
Property Value
Type | Description |
---|---|
DiagramGradient |
Remarks
The gradient stop’s opacity property defines the transparency level of the region. The gradient stop property defines the color and a position, where the previous color transition ends, and a new color transition starts. There are two types of gradients as follows, |
• LinearGradient |
• RadialGradient |
The following code demonstrates how to define the linear and radial gradient |
Examples
<SfDiagram Height="600px" Nodes="@NodeCollection">
<DiagramSnapSettings Constraints = "SnapConstraints.None" ></ DiagramSnapSettings >
</ SfDiagram >
@code{
//Initialize node collection with node
ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>()
{
// . . .
// . . .
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
}
},
// . . .
// . . .
}
Italic
This property allows the users to enable or disable the italic style of a text.
Declaration
public bool Italic { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |
Opacity
Defines the transparency level of the shape or path.
Declaration
public double Opacity { get; set; }
Property Value
Type | Description |
---|---|
System.Double |
Remarks
Opacity values are ranges from 0 to 1 where, |
• 0 represents completely transparent. |
• 0.5 represents Partially transparent. |
• 1 represents not transparent at all. |
StrokeColor
Gets or sets the color to the stroke of the shape or path.
Declaration
public string StrokeColor { get; set; }
Property Value
Type | Description |
---|---|
System.String |
StrokeDashArray
Gets or sets the pattern of dashes and space to the stroke of shape or path.
Declaration
public string StrokeDashArray { get; set; }
Property Value
Type | Description |
---|---|
System.String |
StrokeWidth
Gets or sets the width to the stroke of the shape or path.
Declaration
public double StrokeWidth { get; set; }
Property Value
Type | Description |
---|---|
System.Double |
TextAlign
Defines the alignment of the text inside the node bounds. By default, it’s set to center.
Declaration
public TextAlign TextAlign { get; set; }
Property Value
Type | Description |
---|---|
TextAlign |
TextDecoration
Specifies how the text should be decorated.
Declaration
public TextDecoration TextDecoration { get; set; }
Property Value
Type | Description |
---|---|
TextDecoration |
TextOverflow
Specifies how to handle the text when it exceeds the given size. By default, it’s set to Wrap.
Declaration
public TextOverflow TextOverflow { get; set; }
Property Value
Type | Description |
---|---|
TextOverflow |
TextWrapping
Specifies how the text should be wrapped when the text size exceeds some specific bounds. By default, it’s set to WrapWithOverflow.
Declaration
public TextWrap TextWrapping { get; set; }
Property Value
Type | Description |
---|---|
TextWrap |
WhiteSpace
Specifies how to white space and new line characters must be handled. By default, it’s set to CollapseSpace.
Declaration
public WhiteSpace WhiteSpace { get; set; }
Property Value
Type | Description |
---|---|
WhiteSpace |