Class DiagramDecorator
Represents the connector's start and endpoint decorations.
Namespace: Syncfusion.Blazor.Diagrams
Assembly: Syncfusion.Blazor.dll
Syntax
public class DiagramDecorator : SfDiagramBase
Remarks
The connector's start and endpoints can be decorated with some customizable shapes such as arrows, circles, diamonds, or path. The start and endpoint of the connector can be decorated with the connector 's source decorator and target decorator properties. The following code shows how the target decorator and its property should be defined.
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()
{
Shape = DecoratorShapes.Arrow,
Style = new DecoratorShapeStyle() { Fill = "#6f409f", StrokeColor = "#6f409f", StrokeWidth = 1 }
},
Style = new ConnectorShapeStyle() { StrokeColor = "#6f409f", StrokeWidth = 1 },
//Specify the segment types as straight.
Type = Segments.Straight,
};
ConnectorCollection.Add(DiagramConnector);
}
}
Constructors
DiagramDecorator()
Represents the connector's start and endpoint decorations.
Declaration
public DiagramDecorator()
Properties
Height
Gets or sets the height of the decorator. By default, it is set to 10.
Declaration
public double Height { get; set; }
Property Value
Type | Description |
---|---|
System.Double |
PathData
Defines the shape of the decorator geometry.
Declaration
public string PathData { get; set; }
Property Value
Type | Description |
---|---|
System.String |
Pivot
Specifies the position (X, Y) of the decorator to the source or target point of the connector. By default, it is set to X=0,Y=0.
Declaration
public DecoratorPivot Pivot { get; set; }
Property Value
Type | Description |
---|---|
DecoratorPivot |
Shape
This property allows the user to define the shape of the decorator.
Declaration
public DecoratorShapes Shape { get; set; }
Property Value
Type | Description |
---|---|
DecoratorShapes |
Remarks
Start and endpoints of a connector can be decorated with some customizable shapes like arrows, circles, diamonds, or path.
Style
Defines the appearance of the decorator.
Declaration
public DecoratorShapeStyle Style { get; set; }
Property Value
Type | Description |
---|---|
DecoratorShapeStyle |
Remarks
Users can customize the appearance of the source or target decorator by using the property such as StrokeColor, Strokewidth, StrokeDashArray, and Fill.
Examples
TargetDecorator = new ConnectorTargetDecorator()
{
Shape = DecoratorShapes.Arrow,
//Defines the style of decorator
Style = new DecoratorShapeStyle() { Fill = "#6f409f", StrokeColor = "#6f409f", StrokeWidth = 1
}
Width
Gets or sets the width of the decorator.
Declaration
public double Width { get; set; }
Property Value
Type | Description |
---|---|
System.Double |