Text Annotation in .NET MAUI Image Editor (SfImageEditor)

12 Jun 202413 minutes to read

The ImageEditor control in .NET MAUI allows you to add text using the AddText method with customizable settings.

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

Text annotation in .NET MAUI Image Editor.

Customize text appearance

Customize the appearance of text annotation using the ImageEditorTextSettings.

  • AnnotationID : A unique ID is generated for text 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 text annotation. The default value is true.
  • AllowResize: Enables or disables the resizing of text annotation. The default value is true.
  • Bounds: Specifies the bounds of the text view. Position the text wherever you want on the image. The value of the text bounds should fall between 0 and 1.
  • Opacity: Specifies the opacity of text annotation and it is applied to background color of text. The value should fall between 0 to 1.

  • RotationAngle: Specifies the initial rotation angle of the text. The value should fall between 0 to 360.

  • IsEditable: Enables or disables text editing. The default value is true.
  • IsRotatable: Enables or disables the text rotation. The default value is true.
  • TextAlignment: Specifies the start, center, or end alignment of the text. The default value is TextAlignment.Center.
  • Background: Specifies the background color of the text annotation. The default value is Brush.Transparent.
  • TextStyle: Change the text appearance such as TextColor, FontSize, FontAttributes, and FontFamily in the image editor using the ImageEditorTextSettings.TextStyle property.
<Grid RowDefinitions="0.9*, 0.1*">
        <imageEditor:SfImageEditor x:Name="imageEditor"
                                   Source="image.jpeg" />
        <Button Grid.Row="1"
                Text="AddText"
                Clicked="OnAddTextClicked" />
    </Grid>
private void OnAddTextClicked(object sender, EventArgs e)
    {
        this.imageEditor.AddText("Good Day",
           new ImageEditorTextSettings()
           {
               RotationAngle = 90,
               IsRotatable = true,
               IsEditable = true,
               TextAlignment = TextAlignment.Start,
               TextStyle = new ImageEditorTextStyle()
               {
                   FontSize = 14,
                   TextColor = Colors.Black.WithAlpha(0.5f),
                   FontFamily = "Arial",
                   FontAttributes = FontAttributes.Italic
               }
           });
    }

Text annotation customization in .NET MAUI Image Editor

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)
{
    imageEditor.AddText("Syncfusion", new ImageEditorTextSettings() { Id = 1, Background = Colors.Blue });
    imageEditor.SaveEdits();
}

Customize the background

The background color of the text annotations can be customized using the Background property.

<Grid RowDefinitions="0.9*, 0.1*">
        <imageEditor:SfImageEditor x:Name="imageEditor"
                                   Source="image.jpeg" />
        <Button Grid.Row="1"
                Text="TextBackground"
                Clicked="OnTextBackgroundClicked" />
    </Grid>
private void OnTextBackgroundClicked(object sender, EventArgs e)
    {
        this.imageEditor.AddText("Good Day",
           new ImageEditorTextSettings()
           {
               Background = Colors.White,
               Opacity = 0.5f
           });
    }

Text annotation customization in .NET MAUI Image Editor

Delete the text

Delete the selected text using either the toolbar or 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 texts

Remove all the text annotations using the ClearAnnotations method.

NOTE

This removes shape, pen and custom view annotations as well.

<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 ImageEditorTextSettings textSettings)
        {
            textSettings.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 ImageEditorTextSettings text)
        {
            text.Background = Colors.Black;
        }
    }

Add text on initial loading

Add a text 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.AddText("Good morning");
    }

NOTE

View sample in GitHub

Add text with manual bounds

The text 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)
    {
        imageEditor.AddText("Good morning", new ImageEditorTextSettings() { Bounds = new Rect(0.1, 0.1, 0.5, 0.5) });
    }

NOTE

To edit text annotation you have to double tap inside the text view.