Blazor

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

    Show / Hide Table of Contents

    Class DiagramNodeAnnotation

    Represents the block of text displayed over the node.

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

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

    Examples
    <SfDiagram Height="600px" Nodes="@NodeCollection">
    </SfDiagram>
    @code{
     public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>() { };
     protected override void OnInitialized()
     {
     // A node is created and stored in the node array.
     DiagramNode Node = new DiagramNode()
        {
           // Position of the node
           OffsetX = 250,
           OffsetY = 250,
           // Size of the node
           Width = 100,
           Height = 100,
           Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" },
           // Initialize port collection
           Annotations = new ObservableCollection<DiagramNodeAnnotation>()
           {
             // An annotation is created and stored in an Annotation collection of Node.
             new DiagramNodeAnnotation() { Content = "Annotation" }
           }
          };
         };
         NodeCollection.Add(Node);
      }
     }

    Constructors

    DiagramNodeAnnotation()

    Represents the block of text displayed over the node.

    Declaration
    public DiagramNodeAnnotation()

    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 node.
     Annotations = new ObservableCollection<DiagramNodeAnnotation>() {
     new DiagramNodeAnnotation()
     Content = "Annotation"
     AddInfo = new AddInfo() { Description = “Annotation1”}
     }

    AnnotationType

    This property allows the user 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 node.

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

    DragLimit

    This property allows the user to limit the dragging of node labels to a certain distance. By default, DragLimit is set to 20 from all sides.

    Declaration
    public NodeAnnotationDragLimit DragLimit { get; set; }
    Property Value
    Type Description
    NodeAnnotationDragLimit
    Examples
    // An annotation is created and stored in an annotation collection of the node.
    Annotations = new ObservableCollection<DiagramNodeAnnotation>() {
    new DiagramNodeAnnotation()
    Content = "Annotation"
    DragLimit = new NodeAnnotationDragLimit() { 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 node.

    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 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.

    Hyperlink

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

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

    User can able to show hyperlink as an annotation content or alternate display text for the hyperlink In the following image, you can see the alternate display text for the hyperlink has set as an annotation content.

    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 NodeAnnotationMargin Margin { get; set; }
    Property Value
    Type Description
    NodeAnnotationMargin
    Examples
    Annotations = new ObservableCollection<DiagramNodeAnnotation> ()
     {
      //An annotation is created and stored in the Annotations collection of Node.
      new DiagramNoderAnnotation()
      {
        Content = "Annotation",
        Margin = new NodeAnnotationMargin() { Top = 10, Left = 10, Bottom = 10, Right = 10 }
      }
    };

    Offset

    Specifies the position of the label relative to the bounds of the node.

    Declaration
    public NodeAnnotationOffset Offset { get; set; }
    Property Value
    Type Description
    NodeAnnotationOffset
    Remarks
    Offset values range from 0 to 1. By default, the offset values are set to X= 0.5 and Y=0.5.
    1. When x= 0 and y = 0, then the label will be position at the top left corner of the node.
    2. When x= 0.5 and y = 0.5, then the label will be position at the center of the node.
    3. When x= 1 and y = 1, then the label will be position at the bottom right corner of the node.

    RotateAngle

    Gets or sets the rotation angle of the label.

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

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

    Style

    Defines the appearance of the text.

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

    User 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/HTML content should be defined as a string in an annotation’s template property.

    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 node.

    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 node.
    2. Bottom - Aligns the diagram element at the bottom of the node.
    3. Center - Aligns the diagram element at the center of the node.
    4. Auto - Aligns the diagram element based on the characteristics of the node.

    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 it is false, then the node 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