Class DiagramDecorator

Represents the connector's start and endpoint decorations.

Inheritance
System.Object
SfDiagramBase
DiagramDecorator
Inherited Members
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