Blazor

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

    Show / Hide Table of Contents

    Class DiagramConnectorAnnotation

    Represents the block of text displayed over the connector.

    Inheritance
    System.Object
    SfDiagramBase
    DiagramConnectorAnnotation
    Inherited Members
    SfDiagramBase.UpdateCollection(IList, Boolean)
    SfDiagramBase.RandomString(Int32)
    Namespace: Syncfusion.Blazor.Diagrams
    Assembly: Syncfusion.Blazor.dll
    Syntax
    public class DiagramConnectorAnnotation : SfDiagramBase
    Remarks

    Annotation is used to present some textual data for the connector which can be edited at runtime. Multiple annotations can be added to the connector. Users can able to modify the annotation style, visibility, width, height, and content of the annotation through code or visually.

    Examples
    <SfDiagram Height="600px" Connectors="@ConnectorCollection">
    </SfDiagram>
    @code
    {
     //Defines diagram's connector collection
     public ObservableCollection<DiagramConnector> ConnectorCollection { get; set; }
     protected override void OnInitialized()
     {
        ConnectorCollection = new ObservableCollection<DiagramConnector>();
        DiagramConnector Connector = new DiagramConnector()
       {
          SourcePoint = new ConnectorSourcePoint() { X = 300, Y = 40 },
          TargetPoint = new ConnectorTargetPoint() { X = 400, Y = 160 },
          Type = Segments.Orthogonal,
          Style = new ConnectorShapeStyle()
          {StrokeColor = "#6BA5D7”},
          Annotations = new ObservableCollection<DiagramConnectorAnnotation>()
          {
            //An annotation is created and stored in the Annotation collection of the connector.
            new DiagramConnectorAnnotation () {Content = "Annotation" }
          }
        };
        ConnectorCollection.Add(Connector);
       }
     }

    Constructors

    DiagramConnectorAnnotation()

    Represents the block of text displayed over the connector.

    Declaration
    public DiagramConnectorAnnotation()

    Properties

    AddInfo

    Specifies the additional information about annotation.

    Declaration
    public object AddInfo { get; set; }
    Property Value
    Type Description
    System.Object
    Remarks

    Enables the user to store data of any datatype. It will be serialized and deserialized automatically while saving and opening the diagram.

    Examples
    public class AddInfo{
    public string Description{get, set}
    }
     // An annotation is created and stored in an Annotation collection of the Connector.
     Annotations = new ObservableCollection<DiagramConnectorAnnotation>() {
     new DiagramConnectorAnnotation()
     Content = "Annotation"
     AddInfo = new AddInfo() { Description = “Annotation1”}
    }

    Alignment

    Specifies the position of the label based on the segment alignment.

    Declaration
    public AnnotationAlignment Alignment { get; set; }
    Property Value
    Type Description
    AnnotationAlignment
    Remarks
    Specifies the position of the label based on the segment alignment.
    1. Center - Aligns the annotation at the center of a connector segment.
    2. Before - Aligns the annotation before a connector segment.
    3. After - Aligns the annotation after a connector segment.
    By default, the alignment is set as the center.

    AnnotationType

    This property allows the users to define a type of annotation template.

    Declaration
    public AnnotationType AnnotationType { get; set; }
    Property Value
    Type Description
    AnnotationType
    Remarks
    The following values can be set for the value of the Annotation.
    1. String - Annotation template to be in the string.
    2. Template - Annotation template to be in HTML Content.

    Constraints

    The constraints property allows the user to enable or disable certain behaviors of the label. For instance, the user can disable annotation editing and able to make it as read-only.

    Declaration
    public AnnotationConstraints Constraints { get; set; }
    Property Value
    Type Description
    AnnotationConstraints

    Content

    Gets or sets the textual description of the connector.

    Declaration
    public string Content { get; set; }
    Property Value
    Type Description
    System.String

    Displacement

    The Displacement property allows the user to dislocate the annotation from its original place by the given value.

    Declaration
    public ConnectorDisplacementPoint Displacement { get; set; }
    Property Value
    Type Description
    ConnectorDisplacementPoint
    Remarks

    By default, the annotation will be in the center of the connector path. When the user assigns value to the Displacement property, the annotation will be displaced from its position by displacement value.

    DragLimit

    This property allows the user to limit the dragging of connector label to a certain distance. By default, it is set to 20 from all sides.

    Declaration
    public ConnectorAnnotationDragLimit DragLimit { get; set; }
    Property Value
    Type Description
    ConnectorAnnotationDragLimit
    Examples
    // An annotation is created and stored in the Annotation collection of the connector.
    Annotations = new ObservableCollection<DiagramConnectorAnnotation>() {
    new DiagramConnectorAnnotation()
    Content = "Annotation"
    DragLimit = new DiagramConnectorAnnotationDragLimit() { Top = 20, Left = 20 ,Right = 20, Bottom = 20}
    }

    Height

    Gets or sets the height of the annotations.

    Declaration
    public double Height { get; set; }
    Property Value
    Type Description
    System.Double

    HorizontalAlignment

    Describes how an annotation element is horizontally positioned or stretched within a connector. the characteristics of its immediate parent.

    Declaration
    public HorizontalAlignment HorizontalAlignment { get; set; }
    Property Value
    Type Description
    HorizontalAlignment
    Remarks
    The list of following options is used to defining the Horizontal Alignment of the annotation
    1. Stretch - Stretches the diagram element throughout the connector
    2. Left - Aligns the diagram element at the left of the connector
    3. Right - Aligns the diagram element at the right of the connector
    4. Center - Aligns the diagram element at the center of the connector
    5. Auto - Aligns the diagram element based on the characteristics of the connector
    By default, HorizontalAlignment is set to center.

    Hyperlink

    This property allows the user to add a hyperlink to the connector label.

    Declaration
    public ConnectorHyperlink Hyperlink { get; set; }
    Property Value
    Type Description
    ConnectorHyperlink

    Id

    Returns the unique id of an Annotation.  .

    Declaration
    public string Id { get; set; }
    Property Value
    Type Description
    System.String
    Remarks

    Annotation Id needs to be unique to use. When creating a label, the user should not provide the same id to other labels.

    Margin

    Specifies the space around the annotation content. The default values for the Margin are set to 0 from all sides.

    Declaration
    public ConnectorAnnotationMargin Margin { get; set; }
    Property Value
    Type Description
    ConnectorAnnotationMargin
    Examples
    Annotations = new ObservableCollection<DiagramConnectorAnnotation> ()
    {
      //An annotation is created and stored in the Annotations collection of Connector.
      new DiagramConnectorAnnotation()
      {
       Content = "Annotation),
       Margin = new ConnectorAnnotationMargin() { Top = 0, Left = 0, Bottom = 0, Right = 0 }
      }
     };

    Offset

    Specifies the position of the label relative to the bounds of the connector. The default value for offset is set to 0.5.

    Declaration
    public double Offset { get; set; }
    Property Value
    Type Description
    System.Double

    RotateAngle

    Gets or sets the rotation angle of the label.

    Declaration
    public double RotateAngle { get; set; }
    Property Value
    Type Description
    System.Double
    Remarks

    Connector labels can be rotated either by code-behind or mouse interaction. By default, the rotate angle will be 0.

    SegmentAngle

    This property allows the user to rotate the annotation based on the connector segment direction.

    Declaration
    public bool SegmentAngle { get; set; }
    Property Value
    Type Description
    System.Boolean
    Remarks

    By default, the annotation will be rotated in the connector path. When the user assigns value to the SegmentPath property, the annotation will be rotated from its position based on the connector segment direction.

    Style

    Defines the appearance of the text.

    Declaration
    public AnnotationStyle Style { get; set; }
    Property Value
    Type Description
    AnnotationStyle
    Remarks

    Users can change the font style of the label with the font specific properties such as font family, font size, font color, bold, etc., The fill and border appearances of the text can also be customized with appearance specific properties of label such as fill color, border color, etc.

    Template

    This property represents the template’s content of the label. The User can define any HTML content as a template.

    Declaration
    public string Template { get; set; }
    Property Value
    Type Description
    System.String
    Remarks

    Users can set the label content as a template instead of textual content or hyperlink, by using template property. For that SVG or HTML content should be defined as a string in an annotation’s template property. By default, it is undefined.

    Type

    This property is used to define the positioning behavior of the annotation. It can be either “Shape” or “Path”.

    Declaration
    public AnnotationTypes Type { get; set; }
    Property Value
    Type Description
    AnnotationTypes
    Remarks
    The following values can be set for the Type property of the annotation,
    1. shape - sets the annotation type to shape.
    2. Path – sets the annotation type to the path.

    VerticalAlignment

    Describes how an annotation element is vertically positioned or stretched within a connector.

    Declaration
    public VerticalAlignment VerticalAlignment { get; set; }
    Property Value
    Type Description
    VerticalAlignment
    Remarks
    The list of following options is used to defining the vertical alignment of the annotation,
    1. Top - Aligns the diagram element at the top of the connector.
    2. Bottom - Aligns the diagram element at the bottom of the connector.
    3. Center - Aligns the diagram element at the center of the connector.
    4. Auto - Aligns the diagram element based on the characteristics of the connector.
    By default, VerticalAlignment is set to center.

    Visibility

    specifies the visibility of the annotation.

    Declaration
    public bool Visibility { get; set; }
    Property Value
    Type Description
    System.Boolean
    Remarks

    By default, visibility is set to true. If the visibility is false, then the connector annotation will not be visible.

    Width

    Gets or sets the width of an annotation.

    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