How can I access Annotation location in Node?

[Özgür]

Hi,

 I added an annotation in Node. I want to access its position on the diagram, but unfortunately there are no position X and position Y parameters in it. When the Annotation location is changed, the Offset and Margin values change, but I don't understand how they change. How can I access the Annotation location?

[Prakash Perumal]

Hi Özgür,

In SfDiagram, Annotations are positioned relative to their parent node or connector through its Offset and Margin properties. You can find more information on positioning annotations through the following UG links.

Link: Positioning node’s annotation in WPF Diagram control | Syncfusion

However, we don't have a direct option to find out the location of the annotation relative to the diagram origin. Could you please provide us with the following details so that we can assist you better?

- Are you repositioning the annotation interactively at run-time?

- Where did you initially place the annotation? (e.g., center of the node)

Regards,

Prakash

[Özgür]

At first I position the annotaion in the middle of the node. At runtime, I change the position of the annotaion  just like I change the position of the same node with the help of the mouse.

[Özgür]

For example, I place the node at x :300 y: 300 position in the diagram. I'm adding my annotation with the node as follows.

node.Annotations = new AnnotationCollection()

                {

                    new AnnotationEditorViewModel()

                    {

                        Offset = new Point(0.5,0.5),

                        Content="A1",

                        VerticalAlignment=VerticalAlignment.Center,

                        HorizontalAlignment=HorizontalAlignment.Center,

                    }

                };

When I set the annotation position to x:380 y:300 with the mouse, the offset in the annotation properties is 1;0.5 while the margin value is 48,895,0,0,0. Sometimes the offset value can be in different values such as 0.633 0.666. This makes it difficult for me to calculate the position from margin only.

[Prakash Perumal]

As we specified, Annotations are positioned relative to their parent's bounds. When dragging an annotation across a node, the offset value is changed according to its position. Additionally, the margin and alignment values are adjusted to ensure the annotation is properly anchored to the node boundary when the node is resized. For example, when the annotation is moved around the center of the node, only the offset value is altered. However, when the annotation is moved near the node boundaries or outside them, the margin value and corresponding alignment values are updated.

To help you better understand this concept, we have provided a sample to find the position of annotation relative to diagram origin and a demo video to demonstrate the behavior.

Attachment: AnnotationDragging_c98e2381.zip

[Özgür]

Thank you for the application. I have a few questions to understand the result, can you please answer?

Why did we need CustomDiagram, couldn't it be done in a different way?

annotation.View.BoundingRectangle.Width Is this value the width of the label where the Annotation is? If I fixed this, I wouldn't need a new CustomAnnotationViewModel.

In addition, while I can move the node with the keyboard arrow keys, I cannot move the Annotation with the keyboard direction movements, what is the main reason for this?

Thanks.

[Özgür]

HelloHow can I do the reverse of the same process? That is, when I manually change the values entered in the textbox and press the apply button, I want the annotation to go to the entered location. Is this possible ?

Thank you

[Özgür]

I also ran into a problem, in the example you provided I get an error when I want to copy paste.

[Prakash Perumal]

Hi Özgür,

Please find the response for your query.

Query	Response
Why did we need CustomDiagram, couldn't it be done in a different way?	We previously utilized this class to access the rendered size of the annotation. However, we have now found an alternative approach and have updated the sample for your convenience.
Is this annotation.View.BoundingRectangle.Width value the width of the label where the Annotation is? If I fixed this, I wouldn't need a new CustomAnnotationViewModel.	To locate the position of an annotation, we utilized the CustomAnnotationViewModel class that holds its parent and size data. However, if locating the annotation is not needed, the default AnnotationViewModel can be utilized.
I cannot move the Annotation with the keyboard direction movements, what is the main reason for this?	At present, keyboard nudging support for annotations is not available. We have added this as a feature request, and it will be included in one of our upcoming releases. You can follow the link below to check the status of the feature:   Feedback Link: Keyboard nudging support for annotations in WPF | Feedback Portal (syncfusion.com)
When I manually change the values entered in the textbox and press the apply button, I want the annotation to go to the entered location. Is this possible	The annotation can be placed in any preferred position. To learn more about how to position annotations, refer to the UG links below.   Link: Positioning node’s annotation in WPF Diagram control | Syncfusion
I get an error when I want to copy paste.	We have addressed this issue in the updated sample.

Regards,

Prakash

Attachment: AnnotationSample__Modified_57ec0b6b.zip

[Özgür]

Hello,

The annotation can be placed in any preferred position. To learn more about how to position annotations, refer to the UG links below.

All issues have been resolved except the above situation and thank you for your help. In the current situation, unfortunately, the area you are redirecting does not exist according to the location. I can set it based on the Margin property based on the location of the Node. How can I convert the X and Y axes to margin correctly? Depending on the horizontal and vertical values being bottom top , the margin values will also change ?

[Prakash Perumal]

Hi Özgür,

Would you like the alignment to be at the top-left corner? Can you provide more specific details or an image to better understand your requirements? This will help us to assist you more effectively.

[Özgür]

As I added in the picture, when I move the annotation with the mouse, its location changes and I can access this location thanks to you. How can I make the annotation come to that position when I manually type any position (Ex: 205,602) instead of 402.203 in the PositionX and PositionY fields in the field on the right and when I press the Save button? Won't the alignment change depending on where the annotation is in the node?

I hope I could explain.

[Sumathi Uthayakumar]

At the sample level, we have met your requirements. We added a textbox for the position field so that you can enter a value, and the annotation position will be updated in the view accordingly. Additionally, we have provided a sample for your reference.

Attachment: AnnotationSample_dd237ef8.zip