Blazor

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

    Show / Hide Table of Contents

    Class NodeShapeStyle

    Represents the appearance of the node.

    Inheritance
    System.Object
    SfDiagramBase
    NodeShapeStyle
    Inherited Members
    SfDiagramBase.UpdateCollection(IList, Boolean)
    SfDiagramBase.RandomString(Int32)
    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
    Back to top Generated by DocFX
    Copyright © 2001 - 2021 Syncfusion Inc. All Rights Reserved