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

21 Jul 202611 minutes to read

The .NET MAUI Image Editor allows you to add a 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>
using Microsoft.Maui.Controls;
using Syncfusion.Maui.ImageEditor;

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

Use the ImageEditorAnnotationSettings to customize the appearance of custom view annotations.

  • Id - A unique ID generated for a custom view annotation when it is added to the image editor. You can retrieve this ID from the AnnotationSelected event arguments or from the serialized JSON.
  • AllowDrag - Enables or disables dragging of the custom view annotation. The default value is true.
  • AllowResize - Enables or disables resizing of the custom view annotation. The default value is true.
  • Bounds - Specifies the bounds of the custom view. The value should range from 0 to 1.
  • RotationAngle - Specifies the initial rotation angle of the custom view. The value ranges from 0 to 360.
  • IsRotatable - Enables or disables rotation of the custom view. 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>
using Microsoft.Maui.Controls;
using Microsoft.Maui.Graphics;
using Syncfusion.Maui.ImageEditor;

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 ImageEditorAnnotationSettings
    {
        Bounds = new Rect(0.2, 0.2, 0.5, 0.1),
        RotationAngle = 45,
        AllowResize = true,
        AllowDrag = false
    });
}

Select an annotation programmatically

You can select an annotation programmatically by passing the unique ID of the annotation to the SelectAnnotation method of SfImageEditor.

<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>
using Microsoft.Maui.Controls;
using Microsoft.Maui.Graphics;
using Syncfusion.Maui.ImageEditor;

private void SelectShape_Clicked(object sender, EventArgs e)
{
    if (int.TryParse(this.shapeID.Text, out int 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 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 annotations

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

Occurs when an annotation is selected.

NOTE

This is common for Shape, Text and CustomView annotations.

<imageEditor:SfImageEditor Source="image.png" 
                           AnnotationSelected="OnAnnotationSelected" />
using Syncfusion.Maui.ImageEditor;

private void OnAnnotationSelected(object sender, AnnotationSelectedEventArgs e)
{
    if (e.AnnotationSettings is ImageEditorAnnotationSettings annotationSettings)
    {
        annotationSettings.RotationAngle = 90;
    }
}

Annotation unselected event

Occurs when an annotation is unselected.

NOTE

This is common for Shape, Text, and CustomView annotations.

<imageEditor:SfImageEditor Source="image.png" 
                           AnnotationUnselected="OnAnnotationUnSelected" />
using Syncfusion.Maui.ImageEditor;

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

Add a custom view with user-defined view bounds. The Bounds are treated as ratio values of the image width and height, so specify the bounds’ rectangle values ranging from 0 to 1.

<imageEditor:SfImageEditor x:Name="imageEditor" 
                           Source="image.png" 
                           ImageLoaded="OnImageLoaded" />
using Microsoft.Maui.Controls;
using Microsoft.Maui.Graphics;
using Syncfusion.Maui.ImageEditor;

private void OnImageLoaded(object sender, EventArgs e)
{
    Image image = new Image() { HeightRequest = 50, WidthRequest = 50, Aspect = Aspect.Fill };
    image.Source = ImageSource.FromFile("images.jpg");
    this.imageEditor.AddCustomAnnotationView(image,
        new ImageEditorAnnotationSettings
        {
            Bounds = new Rect(0.2, 0.2, 0.5, 0.5)
        });
}