Class Annotation

Defines the textual content of nodes/connectors.

Inheritance
System.Object
DiagramObject
Annotation
PathAnnotation
ShapeAnnotation
Implements
System.ICloneable
Inherited Members
Namespace: Syncfusion.Blazor.Diagram
Assembly: Syncfusion.Blazor.dll
Syntax
public class Annotation : DiagramObject, IDiagramObject, ICloneable

Constructors

Annotation()

Initializes a new instance of an Annotation.

Declaration
public Annotation()

Annotation(Annotation)

Creates a new instance of an Annotation from the given Annotation.

Declaration
public Annotation(Annotation src)
Parameters
Type Name Description
Annotation src

Annotation

Properties

AdditionalInfo

Gets or sets the custom properties of an annotation.

Declaration
public Dictionary<string, object> AdditionalInfo { get; set; }
Property Value
Type
System.Collections.Generic.Dictionary<System.String, System.Object>
Remarks

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

Examples
Dictionary<string, object> dict = new Dictionary<string, object>();
dict.Add("node", "Annotation1");
Annotations = new DiagramObjectCollection<ShapeAnnotation>()
{
    new ShapeAnnotation()
    {
       Content = "Annotation",
       AdditionalInfo = dict
    }
};

Constraints

Enable or disable certain behaviors of the label. All the interactive functionalities are enabled by default.

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

For instance, the user can disable annotation editing and be able to make it read-only.

Examples
Node node = new Node()
{
    Annotations = new DiagramObjectCollection<ShapeAnnotation>() 
    { 
        new ShapeAnnotation 
        { 
            Content = "Node",
            Constraints=AnnotationConstraints.ReadOnly,
        }
    },
};

Content

Gets or sets the textual information of the node/connector.

Declaration
public string Content { get; set; }
Property Value
Type
System.String
Examples
Node node = new Node()
{
    Annotations = new DiagramObjectCollection<ShapeAnnotation>() 
    { 
        new ShapeAnnotation { Content = "Node" }
    },
};

Height

Gets or sets the height of the annotation. If the height is not specified, it renders based on the height of the content.

Declaration
public Nullable<double> Height { get; set; }
Property Value
Type
System.Nullable<System.Double>
Examples
Node node = new Node()
{
    Annotations = new DiagramObjectCollection<ShapeAnnotation>() 
    { 
        new ShapeAnnotation 
        { 
            Content = "Node",
            ID = "Annotation",
            Height = 100,
        }
    },
};

HorizontalAlignment

Gets or sets the horizontal alignment of the text to the parent node/connector.

Declaration
public HorizontalAlignment HorizontalAlignment { get; set; }
Property Value
Type Description
HorizontalAlignment

The default value will be Center
Remarks
The following options are used to define the Horizontal Alignment of the annotation.
1. Stretch - Stretches the diagram element throughout the node.
2. Left - Aligns the diagram element at the left of the node.
3. Right - Aligns the diagram element at the right of the node.
4. Center - Aligns the diagram element at the center of the node.
5. Auto - Aligns the diagram element based on the characteristics of the node.
Examples
Node node = new Node()
{
    Annotations = new DiagramObjectCollection<ShapeAnnotation>() 
    { 
        new ShapeAnnotation 
        { 
            Content = "Node",
            ID = "Annotation",
            HorizontalAlignment = HorizontalAlignment.Center,
        }
    },
};

Gets or sets the hyperlink of the annotation.

Declaration
public HyperlinkSettings Hyperlink { get; set; }
Property Value
Type
HyperlinkSettings

Users can be able to show hyperlinks as annotation content.

Node node = new Node()
{
    Annotations = new DiagramObjectCollection<ShapeAnnotation>() 
    { 
        new ShapeAnnotation 
        { 
            Content = "Node",
            ID = "Annotation",
             Hyperlink =new HyperlinkSettings
            {
               Url=https://hr.syncfusion.com/home
              }
        }
    },
};

ID

Gets or sets the unique id of the node's or connector's annotation.

Declaration
public string ID { get; set; }
Property Value
Type
System.String
Remarks
1. The ID needs to be unique. While creating a label, the user should not use the same id for other labels
2. If multiple labels have the same ID, then unexpected behavior could occur.
Examples
Node node = new Node()
{
    Annotations = new DiagramObjectCollection<ShapeAnnotation>() 
    { 
        new ShapeAnnotation 
        { 
            Content = "Node",
            ID = "Annotation",
        }
    },
};

Margin

Gets or sets the extra space around an annotation present in the node/connector.

Declaration
public DiagramThickness Margin { get; set; }
Property Value
Type
DiagramThickness
Examples
Annotations = new DiagramObjectCollection<ShapeAnnotation>()
{
    new ShapeAnnotation 
    { 
        Content = "Task1",
        Margin = new DiagramThickness() { Top = 10},
    }
}

RotationAngle

Gets or sets the rotation angle of the annotation. It is 0 by default.

Declaration
public double RotationAngle { get; set; }
Property Value
Type
System.Double
Examples
Node node = new Node()
{
    Annotations = new DiagramObjectCollection<ShapeAnnotation>() 
    { 
        new ShapeAnnotation 
        { 
            Content = "Node",
            ID = "Annotation",
            RotationAngle = 30,    
        }
    },
};

Style

Represents the appearance of an annotation.

Declaration
public TextStyle Style { get; set; }
Property Value
Type
TextStyle
Examples
Node node = new Node()
{
    Annotations = new DiagramObjectCollection<ShapeAnnotation>()
    {
        new ShapeAnnotation 
        { 
            Content = "Text align is set as Left",
            Style = new TextStyle() { TextAlign = TextAlign.Left}
        }
    },
    Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" },
};

UseTemplate

Gets or sets a value indicating whether annotation should be rendered as a template using value defined in AnnotationTemplate property.

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

true if this annotation should be rendered as a template; otherwise, false.
Remarks

Set this property to true if the annotation should be rendered as a template using value defined in AnnotationTemplate property; otherwise, set it to false. If the value is set to true and template is not defined in AnnotationTemplate property, then empty string will be considered.

Examples
 

<SfDiagramComponent  Nodes="@nodes"/> 
<DiagramTemplates> 
        <AnnotationTemplate> 
            @if(context is Annotation annotation) 
            { 
                if (annotation.ID == "Annotation1") 
                { 
                    <div style = "display: flex; justify-content: center; align-items: center; height: 50px;"> 
                        <SfTextBox Value = "Syncfusion"></SfTextBox> 
                    </div> 
                } 
            } 
        </AnnotationTemplate> 
 </DiagramTemplates> 
 @code 
 { 
    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>(); 
    protected override void OnInitialized() 
    { 
        Node node = new Node() 
        { 
            ID = "node1", 
            Annotations = new DiagramObjectCollection<ShapeAnnotation>() 
            { 
                new ShapeAnnotation() 
                { 
                    ID = "Annotation1", 
                    UseTemplate = true, 
                    Height = 50, 
                    Width = 75,                  
                }, 
            }, 

        }; 
    } 
}

VerticalAlignment

Gets or sets the vertical alignment of the text to the parent node/connector.

Declaration
public VerticalAlignment VerticalAlignment { get; set; }
Property Value
Type Description
VerticalAlignment

The default value will be Center
Remarks
The following options are used to define the Vertical Alignment of the annotation.
1. Stretch - Stretches the diagram element throughout the node.
2. Top - Aligns the diagram element at the top of the node.
3. Bottom - Aligns the diagram element at the bottom of the node.
4. Center - Aligns the diagram element at the center of the node.
5. Auto - Aligns the diagram element based on the characteristics of the node.
Examples
Node node = new Node()
{
    Annotations = new DiagramObjectCollection<ShapeAnnotation>() 
    { 
        new ShapeAnnotation 
        { 
            Content = "Node",
            ID = "Annotation",
            VerticalAlignment = VerticalAlignment.Center,
        }
    },
};

Visibility

Gets or sets the visibility of the annotation. By default, it is visible (True).

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

The visibility of the annotation. The default value will be true.
Examples
Node node = new Node()
{
    Annotations = new DiagramObjectCollection<ShapeAnnotation>() 
    { 
        new ShapeAnnotation 
        { 
            Content = "Node",
            ID = "Annotation",
            Visibility = true,
        }
    },
};

Width

Gets or sets the width of the annotation. If the width is not specified, it displays based on the content's width.

Declaration
public Nullable<double> Width { get; set; }
Property Value
Type
System.Nullable<System.Double>
Examples
Node node = new Node()
{
    Annotations = new DiagramObjectCollection<ShapeAnnotation>() 
    { 
        new ShapeAnnotation 
        { 
            Content = "Node",
            ID = "Annotation",
            Width = 100,
        }
    },
};

Methods

Clone()

Creates a new object that is a copy of the current annotation.

Declaration
public override object Clone()
Returns
Type Description
System.Object

A new object that is a copy of this annotation
Overrides

Implements

System.ICloneable