Class NodeShapeStyle

Represents the appearance of the node.

Inheritance
System.Object
SfDiagramBase
NodeShapeStyle
Inherited Members
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