Text Annotation in .NET MAUI Image Editor (SfImageEditor)
21 Mar 202411 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");
}
Customize text appearance
Customize the appearance of text annotation using the ImageEditorTextSettings
.
-
AllowDrag
: Enables or disables the dragging of text annotation. The default value istrue
. -
AllowResize
: Enables or disables the resizing of text annotation. The default value istrue
. -
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 istrue
. -
IsRotatable
: Enables or disables the text rotation. The default value istrue
. -
TextAlignment
: Specifies the start, center, or end alignment of the text. The default value isTextAlignment.Center
. -
Background
: Specifies the background color of the text annotation. The default value isBrush.Transparent
. -
TextStyle
: Change the text appearance such asTextColor
,FontSize
,FontAttributes
, andFontFamily
in the image editor using theImageEditorTextSettings.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
}
});
}
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
});
}
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
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.