Blazor

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

    Show / Hide Table of Contents

    Class PortShapeStyle

    Represents the appearance of the port.

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