Shape annotations in .NET MAUI Image Editor (SfImageEditor)

21 Jul 202617 minutes to read

The .NET MAUI Image Editor allows you to add various shapes with customizable settings.

Add shape annotation

Add shapes over an image using the AddShape method.

XAML

<Grid RowDefinitions="0.9*, 0.1*">
    <imageEditor:SfImageEditor x:Name="imageEditor"
                               Source="image.jpeg" />
    <Button Grid.Row="1"
            Text="AddShape"
            Clicked="OnAddShapeClicked" />
</Grid>

C#

using Syncfusion.Maui.ImageEditor;

private void OnAddShapeClicked(object sender, EventArgs e)
{
    this.imageEditor.AddShape(AnnotationShape.Arrow);
}

Shape types

The AnnotationShape enum includes the following values:

• Circle
• Rectangle
• Arrow
• Line
• Dotted
• DoubleArrow
• DottedArrow
• DottedDoubleArrow
• Polygon
• Polyline

Polygon

A Polygon is formed by connecting a series of straight lines. The Points collection specifies the vertices, and a line automatically connects the first and last points to close the shape.

XAML

<Grid RowDefinitions="0.9*, 0.1*">
    <imageEditor:SfImageEditor x:Name="imageEditor" />
    <Button Grid.Row="1"
            Text="Polygon"
            Clicked="OnPolygonClicked" />
</Grid>

C#

using Microsoft.Maui.Graphics;
using Syncfusion.Maui.ImageEditor;

private void OnPolygonClicked(object sender, EventArgs e)
{
    this.imageEditor.AddShape(AnnotationShape.Polygon,
        new ImageEditorShapeSettings()
        {
            StrokeThickness = 5,
            Points = new PointCollection
            {
                new Point(50, 0),
                new Point(150, 0),
                new Point(200, 100),
                new Point(150, 200),
                new Point(50, 200),
                new Point(0, 100)
            },
        });
}

Polyline

A Polyline draws a series of connected straight lines. It is similar to a Polygon, except the last point in a Polyline is not connected to the first point.

XAML

<Grid RowDefinitions="0.9*, 0.1*">
    <imageEditor:SfImageEditor x:Name="imageEditor" />
    <Button Grid.Row="1"
            Text="Polyline"
            Clicked="OnPolylineClicked" />
</Grid>

C#

using Microsoft.Maui.Graphics;
using Syncfusion.Maui.ImageEditor;

private void OnPolylineClicked(object sender, EventArgs e)
{
    this.imageEditor.AddShape(AnnotationShape.Polyline,
        new ImageEditorShapeSettings()
        {
            Points = new PointCollection
            {
                new Point(0, 100),
                new Point(50, 250),
                new Point(75, 100),
                new Point(90, 400),
                new Point(115, 250),
                new Point(175, 250),
                new Point(200, 100),
                new Point(215, 400),
                new Point(240, 250),
                new Point(300, 250)
            },
        });
}

Customize shape settings

Use the ImageEditorShapeSettings to customize the appearance of each shape.

• Id - A unique ID generated for a shape 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 shape annotation. The default value is true.
• AllowResize - Enables or disables resizing of the shape annotation. The default value is true.
• Bounds - Specifies the bounds of the shapes. The value should range from 0 to 1.
• Color - Specifies the color of the shape annotation.
• IsFilled - Enables or disables the fill color of the shapes. Applicable only to AnnotationShape.Rectangle, AnnotationShape.Circle, and AnnotationShape.Polygon.
• StrokeThickness - Specifies the stroke width of the shapes. Not applicable to AnnotationShape.Rectangle, AnnotationShape.Circle, and AnnotationShape.Polygon in the filled state.
• Opacity - Specifies the opacity of the shape annotation. The value ranges from 0 to 1.
• Points - Specifies the coordinates of the vertices that make up the shape. Applicable only to AnnotationShape.Polygon and AnnotationShape.Polyline.

XAML

<Grid RowDefinitions="0.9*, 0.1*">
    <imageEditor:SfImageEditor x:Name="imageEditor"
                               Source="image.jpeg" />
    <Button Grid.Row="1"
            Text="AddShape"
            Clicked="OnAddShapeClicked" />
</Grid>

C#

using Microsoft.Maui.Controls;
using Syncfusion.Maui.ImageEditor;

private void OnAddShapeClicked(object sender, EventArgs e)
{
    this.imageEditor.AddShape(AnnotationShape.Rectangle,
        new ImageEditorShapeSettings()
        {
            Color = Colors.Blue,
            StrokeThickness = 5,
            IsFilled = 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.

XAML

<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>

C#

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)
{
    imageEditor.AddShape(AnnotationShape.Rectangle, new ImageEditorShapeSettings() { Id = 2, Color = Colors.Violet, Bounds = new Rect(0, 0, 0.3, 0.3) });
    imageEditor.SaveEdits();
}

Delete the selected shape

Delete the selected shape using the toolbar or the DeleteAnnotation method.

XAML

<Grid RowDefinitions="0.9*, 0.1*">
    <imageEditor:SfImageEditor x:Name="imageEditor"
                               Source="image.jpeg" />
    <Button Grid.Row="1"
            Text="DeleteAnnotation"
            Clicked="OnDeleteAnnotationClicked" />
</Grid>

C#

private void OnDeleteAnnotationClicked(object sender, EventArgs e)
{
    this.imageEditor.DeleteAnnotation();
}

Clear all annotations

Remove all the annotations using the ClearAnnotations method.

NOTE

This also removes text, pen, and custom view annotations.

XAML

<Grid RowDefinitions="0.9*, 0.1*">
    <imageEditor:SfImageEditor x:Name="imageEditor"
                               Source="image.jpeg" />
    <Button Grid.Row="1"
            Text="ClearAnnotations"
            Clicked="OnClearAnnotationsClicked" />
</Grid>

C#

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.

XAML

<imageEditor:SfImageEditor Source="image.png" 
                           AnnotationSelected="OnAnnotationSelected" />

C#

using Syncfusion.Maui.ImageEditor;

private void OnAnnotationSelected(object sender, AnnotationSelectedEventArgs e)
{
    if (e.AnnotationSettings is ImageEditorShapeSettings shapeSettings)
    {
        shapeSettings.Color = Colors.Black;
    }
}

Annotation unselected event

Occurs when an annotation is unselected.

NOTE

This is common for Shape, Text and CustomView annotations.

XAML

<imageEditor:SfImageEditor Source="image.png" 
                           AnnotationUnselected="OnAnnotationUnSelected" />

C#

using Syncfusion.Maui.ImageEditor;

private void OnAnnotationUnSelected(object sender, AnnotationUnselectedEventArgs e)
{
    if (e.AnnotationSettings is ImageEditorShapeSettings shapeSettings)
    {
        shapeSettings.IsFilled = true;
    }
}

Add shape on initial loading

Add a shape on image loading using the ImageLoaded event.

XAML

<imageEditor:SfImageEditor x:Name="imageEditor" Source="image.png" ImageLoaded="OnImageLoaded" />

C#

private void OnImageLoaded(object sender, EventArgs e)
{
    this.imageEditor.AddShape(AnnotationShape.Circle);
}

NOTE

View sample in GitHub

Add shape with manual bounds

Add shapes using 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.

XAML

<imageEditor:SfImageEditor x:Name="imageEditor" Source="image.png" ImageLoaded="OnImageLoaded" />

C#

using Microsoft.Maui.Graphics;
using Syncfusion.Maui.ImageEditor;

private void OnImageLoaded(object sender, EventArgs e)
{
    this.imageEditor.AddShape(AnnotationShape.Arrow, new ImageEditorShapeSettings()
    {
        Bounds = new Rect(0.1, 0.1, 0.5, 0.5)
    });
}

Restrict shape drag and resize

Set the AllowDrag property to false to restrict the drag action on a shape.

C#

using Syncfusion.Maui.ImageEditor;

imageEditor.AddShape(AnnotationShape.Circle, new ImageEditorShapeSettings() { AllowDrag = false });

Set the AllowResize property to false to restrict the resize action on a shape.

C#

using Syncfusion.Maui.ImageEditor;

this.imageEditor.AddShape(AnnotationShape.Circle, new ImageEditorShapeSettings() { AllowResize = false });

Freehand draw

The .NET MAUI Image Editor supports freehand drawings, such as signature and pen drawings, with customizable settings. The AddShape method enables the canvas view, in which you can draw objects.

XAML

<Grid RowDefinitions="0.9*, 0.1*">
    <imageEditor:SfImageEditor x:Name="imageEditor"
                               Source="image.jpeg" />
    <Button Grid.Row="1"
            Text="FreeHandDraw"
            Clicked="OnFreeHandDrawClicked" />
</Grid>

C#

private void OnFreeHandDrawClicked(object sender, EventArgs e)
{
    this.imageEditor.AddShape(AnnotationShape.Pen);
}

Customize the pen drawing settings

Use the following properties to customize the pen drawing settings:

• StrokeThickness - Specifies the stroke width of the drawing pen.
• Color - Specifies the stroke color of the drawing pen.

NOTE

The other shape settings are not applicable for freehand draw.

The following example customizes the pen drawing settings:

XAML

<Grid RowDefinitions="0.9*, 0.1*">
    <imageEditor:SfImageEditor x:Name="imageEditor"
                               Source="image.jpeg" />
    <Button Grid.Row="1"
            Text="FreeHandDraw"
            Clicked="OnFreeHandDrawClicked" />
</Grid>

C#

using Microsoft.Maui.Controls;
using Syncfusion.Maui.ImageEditor;

private void OnFreeHandDrawClicked(object sender, EventArgs e)
{
    imageEditor.AddShape(AnnotationShape.Pen, new ImageEditorShapeSettings() { Color = Colors.Blue, StrokeThickness = 5 });
}