Blazor

Code Examples Upgrade Guide User Guide Demos Support Forums Download
  • Code Examples
  • Upgrade Guide
  • User Guide
  • Demos
  • Support
  • Forums
  • Download
Class DiagramDecorator

    Show / Hide Table of Contents

    Class DiagramDecorator

    Represents the connector's start and endpoint decorations.

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