Class PortShapeStyle
Represents the appearance of the port.
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 |