Class PortShapeStyle

Represents the appearance of the port.

Inheritance
System.Object
SfDiagramBase
PortShapeStyle
Inherited Members
Namespace: Syncfusion.Blazor.Diagrams
Assembly: Syncfusion.Blazor.dll
Syntax
public class PortShapeStyle : SfDiagramBase
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 collection.
    DiagramNode Node = new DiagramNode()
    {
        // Position of the node
        OffsetX = 250,
        OffsetY = 250,
        // Size of the node
        Width = 100,
        Height = 100,
        Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" },
        // Initialize port collection
        Ports = new ObservableCollection<DiagramPort>() {
        new DiagramPort() {
           Id = "port1",
           Offset = new NodePortOffset(){X= 0.5, Y= 0.5 }, Visibility = PortVisibility.Visible,
           //Set the style for the port
           Style=new PortShapeStyle(){ Fill="red" , Opacity = 1,
           StrokeColor= "black", StrokeWidth= 1, StrokeDashArray= "2,2"},
         }
        },
      };
      NodeCollection.Add(Node);
   }
 }

Constructors

PortShapeStyle()

Represents the appearance of the port.

Declaration
public PortShapeStyle()

Properties

Fill

Gets or sets the fill color of the shape or path. By default, it’s set to white.

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

Gradient

This property allows the users to define and apply the gradient effect to the port.h.

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
Examples
 Style = new PortShapeStyle() {
  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
  }
},

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