How to Select and Resize the Annotation

29 Nov 20242 minutes to read

Basic intersections of selecting and resizing can be applied over annotation. These interactions can be controlled by annotation and its parent node or connector.

To learn about annotation constraints, refer to the Annotation Constraints.

Selecting the annotation

Selection of annotation can be enabled by using the Constraints property of AnnotationEditorViewModel class and setting its value as AnnotationConstraints.Selectable.

XAML

<!--Initialize the Annotation Collection-->
<syncfusion:AnnotationCollection>
    <!--Initialize the annotation with selectable constraint-->
    <syncfusion:AnnotationEditorViewModel Content="Annotation" Constraints="Selectable"/>
</syncfusion:AnnotationCollection>

C#

//Initialize the AnnotationCollection
Annotations = new ObservableCollection<IAnnotation>()
{
    new AnnotationEditorViewModel()
    {
        Content = "Annotation",
        //Initialize the constraint as selectable
        Constraints = AnnotationConstraints.Selectable 
    }
}

• The ItemSelectingEvent and ItemSelectedEvent notify when an annotation is selected. The event arguments, derived from DiagramPreviewEventArgs and DiagramEventArgs, provide the selected item, which can be an AnnotationEditorViewModel or TextAnnotationViewModel, depending on the annotation type.

• The ItemUnSelectingEvent and ItemUnSelectedEvent notify when an annotation is unselected. The event arguments, also derived from DiagramPreviewEventArgs and DiagramEventArgs, provide the unselected item, which can be an AnnotationEditorViewModel or TextAnnotationViewModel, based on the annotation type.

Resizing the annotation

Resizing of annotation can be enabled by using the Constraints property of AnnotationEditorViewModel class and setting its value as AnnotationConstraints.Resizable.

XAML

<!--Initialize the Annotation Collection-->
<syncfusion:AnnotationCollection>
    <!--Initialize the Annotation with resizable constraint-->
    <syncfusion:AnnotationEditorViewModel Content="Annotation" Constraints="Selectable,Resizable"/>
</syncfusion:AnnotationCollection>

C#

//Initialize the Annotation Collection
Annotations = new ObservableCollection<IAnnotation>()
{
    new AnnotationEditorViewModel()
    {
        Content = "Annotation",
        //Initialize the constraint as resizable
        Constraints = AnnotationConstraints.Selectable | AnnotationConstraints.Resizable
    }
}