Horizontal and Vertical Annotation Alignment

[Manuel]

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\r\nManager";

            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]

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\r\nManager", 

                        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]

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]

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\r\nManager", 

                        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]

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]

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