Text Annotations in .NET MAUI Image Editor

18 Nov 201812 minutes to read

The .NET MAUI Image Editor 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>
using Syncfusion.Maui.ImageEditor;

private void OnAddTextClicked(object sender, EventArgs e)
{
    this.imageEditor.AddText("Good morning");
}

Text annotation in .NET MAUI Image Editor

Customize text appearance

Use the ImageEditorTextSettings to customize the appearance of text annotations.

  • Id - A unique ID generated for a text 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 text annotation. The default value is true.
  • AllowResize - Enables or disables resizing of the text annotation. The default value is true.
  • Bounds - Specifies the bounds of the text view. The value should range from 0 to 1.
  • Opacity - Specifies the opacity of the text annotation, applied to the background color of the text. The value should range from 0 to 1.
  • RotationAngle - Specifies the initial rotation angle of the text. The value ranges from 0 to 360.
  • IsEditable - Enables or disables text editing. The default value is true.
  • IsRotatable - Enables or disables rotation of the text. 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 Colors.Transparent.
  • TextStyle - Changes the text appearance, such as TextColor, FontSize, FontAttributes, and FontFamily.
<Grid RowDefinitions="0.9*, 0.1*">
    <imageEditor:SfImageEditor x:Name="imageEditor"
                               Source="image.jpeg" />
    <Button Grid.Row="1"
            Text="AddText"
            Clicked="OnAddTextClicked" />
</Grid>
using Microsoft.Maui.Controls;
using Syncfusion.Maui.ImageEditor;

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

Customize the background

Customize the background color of the text annotation 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>
using Microsoft.Maui.Controls;
using Syncfusion.Maui.ImageEditor;

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

Remove all the text annotations using the ClearAnnotations method.

NOTE

This also removes shape, pen, and custom view 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 Microsoft.Maui.Controls;
using Syncfusion.Maui.ImageEditor;

private void OnAnnotationSelected(object sender, AnnotationSelectedEventArgs e)
{
    if (e.AnnotationSettings is ImageEditorTextSettings textSettings)
    {
        textSettings.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 Microsoft.Maui.Controls;
using Syncfusion.Maui.ImageEditor;

private void OnAnnotationUnSelected(object sender, AnnotationUnselectedEventArgs e)
{
    if (e.AnnotationSettings is ImageEditorTextSettings text)
    {
        text.Background = Colors.Black;
    }
}

Add text on initial loading

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

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 a text annotation, double-tap inside the text view.