Horizontal and Vertical Annotation Alignment

Question

Hi,i try to align my node title on the top left, but the horizontal and vertical alignment seems to be inverted,also the size of the diagram node seems to be not respected.            var displayTitle = "Process
Manager";            var style = new AnnotationStyle { Bold = true, FontFamily = "Comic Sans MS", FontSize = 24, TextAlign = TextAlign.Left };            base.Annotations = new ObservableCollection<DiagramNodeAnnotation>            {                new DiagramNodeAnnotation                {                    Content = displayTitle,                    Width = this.Width - 10,                    Height = this.Height - 10,                    Style = style,                    HorizontalAlignment = HorizontalAlignment.Left,                    VerticalAlignment = VerticalAlignment.Top,                    Constraints = AnnotationConstraints.ReadOnly                }            };

Aravind Ravi · Answer

Hi Manuel, 
 
Thanks for your interest in Syncfusion products. 
 
To align the annotations at the top left of the node please use annotations ‘offset’ property. The offset property of annotation is used to align the annotations based on fractions. 0 represents top/left corner, 1 represents bottom/right corner, and 0.5 represents half of width/height. Please find below the code snippet for how to set annotations offset. 
 




Annotations = new ObservableCollection<DiagramNodeAnnotation>() 
{ 
                    new DiagramNodeAnnotation() 
                    { 
                        Content = "Process
Manager", 
                        Offset = new NodeAnnotationOffset() { X = 0, Y = 0}, 
                         
                        HorizontalAlignment = HorizontalAlignment.Left, 
                        VerticalAlignment = VerticalAlignment.Top, 
                        Style = new AnnotationStyle() { Bold = true, FontFamily = "Comic Sans MS", FontSize = 24 } 
                    } 
                } 
 
 
  
 
Regards 
Aravind Ravi

Manuel · Answer

Hi, thanks for your help. This fixed my issue. Is there any option to add a padding between the text and the border?

Aravind Ravi · Answer

Hi Manuel, 
 
Yes, by using the Annotation’s Margin property we can add padding between the text and the border. Please find below code snippet for how to set Margin property for Annotation. 
 




Annotations = new ObservableCollection<DiagramNodeAnnotation>() 
{ 
                    new DiagramNodeAnnotation() 
                    { 
                        Content = "Process
Manager", 
                        Offset = new NodeAnnotationOffset() { X = 0, Y = 0}, 
                        Margin = new NodeAnnotationMargin() { Left = 10, Top = 10}, 
                        HorizontalAlignment = HorizontalAlignment.Left, 
                        VerticalAlignment = VerticalAlignment.Top, 
                        Style = new AnnotationStyle() { Bold = true, FontFamily = "Comic Sans MS", FontSize = 24 } 
                    } 
                } 
 
        }; 
 
  
 
For more information about Annotation’s Margin property. Please refer to below help documentation link 
 
UG Link: https://ej2.syncfusion.com/blazor/documentation/diagram/labels/#margin 
  
Regards, 
Aravind Ravi

Manuel · Answer

Thank you very much, now it is finally solved.I was looking for such an option in the intellisense,but it did not work correctly on my machine.

Aravind Ravi · Answer

Hi Manuel,   
 
Thanks for the update. If you use the correct class for a respective property, then the intelligence will work properly. If you want to set margins for annotations, then use the NodeAnnotationMargin class and the properties declared inside the NodeAnnotationMargin class, will show in the intelligence. 
   
Regards,   
Aravind Ravi