Custom view Annotation in .NET MAUI Image Editor (SfImageEditor)

12 Jun 202412 minutes to read

The ImageEditor control in .NET MAUI allows you to add custom view using the AddCustomAnnotationView method with customizable settings.

<Grid RowDefinitions="0.9*, 0.1*">
        <imageEditor:SfImageEditor x:Name="imageEditor"
                                   Source="image.jpeg" />
        <Button Grid.Row="1"
                Clicked="OnAddCustomAnnotationViewClicked" />
    </Grid>
private void OnAddCustomAnnotationViewClicked(object sender, EventArgs e)
    {
        Image customImage = new Image() { HeightRequest = 100, WidthRequest = 100, Aspect= Aspect.Fill};
        customImage.Source = ImageSource.FromFile("emoji.png");
        imageEditor.AddCustomAnnotationView(customImage);
    }

Custom view annotation in .NET MAUI Image Editor.

Customize the appearance

Customize the appearance of Custom view annotation using the ImageEditorAnnotationSettings.

  • AnnotationID : A unique ID is generated for CustomViews annotations when they are added to the image editor. You can retrieve this unique ID from the ItemsSelected event arguments or from the serialized JSON.
  • AllowDrag: Enables or disables the dragging of custom view annotation. The default value is true.
  • AllowResize: Enables or disables the resizing of custom view annotation. The default value is true.
  • Bounds: Specifies the bounds of the custom view. Position the custom view wherever you want on the image. The value of the view bounds should fall between 0 and 1.
  • RotationAngle: Specifies the initial rotation angle of the custom view. The value should fall between 0 to 360.
  • IsRotatable: Enables or disables the custom view rotation. The default value is true.
<Grid RowDefinitions="0.9*, 0.1*">
        <imageEditor:SfImageEditor x:Name="imageEditor"
                                   Source="image.jpeg" />
        <Button Grid.Row="1"
                Clicked="OnAddCustomAnnotationViewClicked" />
    </Grid>
private void OnAddCustomAnnotationViewClicked(object sender, EventArgs e)
    {
        Image customImage = new Image() { HeightRequest = 100, WidthRequest = 100, Aspect= Aspect.Fill};
        customImage.Source = ImageSource.FromFile("emoji.png");
        this.imageEditor.AddCustomAnnotationView(customImage, 
            new Syncfusion.Maui.ImageEditor.ImageEditorAnnotationSettings 
            { 
                Bounds = new Rect(0.2, 0.2, 0.5, 0.1), 
                RotationAngle = 45,
                AllowResize = true,
                AllowDrag = false
            });
    }

Select a particular annotation programmatically using annotation ID

By passing the unique ID of an annotation to the SelectAnnotation method of SfImageEditor, you can select the particular annotation programmatically.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <imageEditor:SfImageEditor x:Name="imageEditor"
                               Source="image.png"
                               ImageLoaded="imageEditor_ImageLoaded" />
    <StackLayout Grid.Row="1" Margin="10"
                 Orientation="Horizontal">
        <Label Text="ShapeID :" VerticalOptions="Center" />
        <Entry x:Name="shapeID" WidthRequest ="50"/>
        <Button Text="SelectShape" Margin="25,0,0,0"
                Clicked="SelectShape_Clicked" WidthRequest="150" />
    </StackLayout>
</Grid>
private void SelectShape_Clicked(object sender, EventArgs e)
{
    int shapeId;
    if (int.TryParse(this.shapeID.Text, out shapeId))
    {
        this.imageEditor.SelectAnnotation(shapeId);
    }
}
 
private void imageEditor_ImageLoaded(object sender, EventArgs e)
{
    Image customImage = new Image() { HeightRequest = 100, WidthRequest = 100, Aspect= Aspect.Fill};
        customImage.Source = ImageSource.FromFile("emoji.png");
        this.imageEditor.AddCustomAnnotationView(customImage, 
            new Syncfusion.Maui.ImageEditor.ImageEditorAnnotationSettings 
            { 
                Id = 1,
                Bounds = new Rect(0.2, 0.2, 0.5, 0.1), 
                RotationAngle = 45,
                AllowResize = true,
                AllowDrag = false
            });
    imageEditor.SaveEdits();
}

Delete the custom view

Delete the selected custom view using the DeleteAnnotation method.

<Grid RowDefinitions="0.9*, 0.1*">
        <imageEditor:SfImageEditor x:Name="imageEditor"
                                   Source="image.jpeg" />
        <Button Grid.Row="1"
                Text="DeleteAnnotation"
                Clicked="OnDeleteAnnotationClicked" />
    </Grid>
private void OnDeleteAnnotationClicked(object sender, EventArgs e)
    {
        this.imageEditor.DeleteAnnotation();
    }

Clear all custom view

Remove all the custom view annotations using the ClearAnnotations method.

NOTE

This is common for Shape, Text and CustomView annotations.

<Grid RowDefinitions="0.9*, 0.1*">
        <imageEditor:SfImageEditor x:Name="imageEditor"
                                   Source="image.jpeg" />
        <Button Grid.Row="1"
                Text="ClearAnnotations"
                Clicked="OnClearAnnotationsClicked" />
    </Grid>
private void OnClearAnnotationsClicked(object sender, EventArgs e)
    {
        this.imageEditor.ClearAnnotations();
    }

Annotation selected event

This AnnotationSelected event occurs when the annotation is selected.

NOTE

This is common for Shape, Text and CustomView annotations.

<imageEditor:SfImageEditor Source="image.png" AnnotationSelected = "OnAnnotationSelected" />
private void OnAnnotationSelected(object sender, AnnotationSelectedEventArgs e)
    {
        if (e.AnnotationSettings is ImageEditorAnnotationSettings annotationSettings)
        {
            annotationSettings.RotationAngle = 90;
        }
    }

Annotation unselected event

This AnnotationUnselected event occurs when the annotation is unselected.

NOTE

This is common for Shape, Text and CustomView annotations.

<imageEditor:SfImageEditor Source="image.png" AnnotationUnselected="OnAnnotationUnSelected" />
private void OnAnnotationUnSelected(object sender, AnnotationUnselectedEventArgs e)
    {
        if (e.AnnotationSettings is ImageEditorAnnotationSettings annotationSettings)
        {
            annotationSettings.RotationAngle = 90;
        }
    }

Add custom view on initial loading

Add a custom view on image loading using the ImageLoaded event.

<imageEditor:SfImageEditor x:Name="imageEditor" Source="image.png" ImageLoaded = "OnImageLoaded" />
private void OnImageLoaded(object sender, EventArgs e)
    {
        this.imageEditor.AddCustomAnnotationView(new Label { Text = "Hello Syncfusion", WidthRequest = 150, HeightRequest = 40 });
    }

Add custom view with manual bounds

The custom view can be added with user-defined view bounds. The Bounds are treated as ratio values of image width and height, so you have to specify bound’s rectangle values in the range of 0 to 1.

<imageEditor:SfImageEditor x:Name="imageEditor" Source="image.png" ImageLoaded = "OnImageLoaded" />
private void OnImageLoaded(object sender, EventArgs e)
    {
        Image image = new Image() { HeightRequest = 50, WidthRequest = 50, Aspect = Aspect.Fill };
        customImage.Source = ImageSource.FromFile("images.jpg");
        this.imageEditor.AddCustomAnnotationView(image, 
            new Syncfusion.Maui.ImageEditor.ImageEditorAnnotationSettings 
            { 
                Bounds = new Rect(0.2, 0.2, 0.5, 0.5) 
            });
    }