Class DecoratorShapeStyle
Represents the appearance of the decorator.
Namespace: Syncfusion.Blazor.Diagrams
Assembly: Syncfusion.Blazor.dll
Syntax
public class DecoratorShapeStyle : SfDiagramBase
Examples
<SfDiagram Height="600px" Connectors="@ConnectorCollection">
</SfDiagram>
@code
{
//Defines diagram's connector collection
public ObservableCollection<DiagramConnector> ConnectorCollection = new ObservableCollection<DiagramConnector>();
protected override void OnInitialized()
{
DiagramConnector DiagramConnector = new DiagramConnector()
{
SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 },
TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 },
TargetDecorator = new ConnectorTargetDecorator()
{
Width = 20,
Height = 20,
Shape = DecoratorShapes.Arrow,
//set the style property to the decorator
Style = new DecoratorShapeStyle() { Fill = "#6f409f", StrokeColor = "#6f409f", StrokeWidth = 1, Opacity = 0.5, StrokeDashArray = "2,2" }
},
Style = new ConnectorShapeStyle() { StrokeColor = "#6f409f", StrokeWidth = 1 },
//Specify the segments types as straight.
Type = Segments.Straight,
};
ConnectorCollection.Add(DiagramConnector);
}
}
Constructors
DecoratorShapeStyle()
Represents the appearance of the decorator.
Declaration
public DecoratorShapeStyle()
Properties
Fill
Gets or sets the fill color of the shape or decorator. By default, it will be 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 source or target decorator.
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 DecoratorShapeStyle() { Fill = "#6f409f", StrokeColor = "#6f409f", StrokeWidth = 1 , Opacity = 1, StrokeDashArray ="2,2" , Gradient = new DiagramGradient()
{
//Center point of inner circle
Fx = 20,
Fy = 20,
//Center point of outer circle
Cx = 50,
Cy = 50,
//Radius of a radial gradient
R = 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.Radial
}
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 |