Migrate from Xamarin.Forms SfImageEditor to .NET MAUI SfImageEditor

18 Mar 20245 minutes to read

To make the migration from the Xamarin SfImageEditor to the .NET MAUI SfImageEditor easier, most of the APIs from the Xamarin SfImageEditor are kept in the .NET MAUI SfImageEditor. However, to maintain the consistency of API naming in the .NET MAUI SfImageEditor, some of the APIs have been renamed. Please find the difference in the following topics.

Namespaces

Xamarin SfImageEditor	.NET MAUI SfImageEditor
Syncfusion.SfImageEditor.XForms	Syncfusion.Maui.ImageEditor

Initialize control

To initialize the control, import the ImageEditor namespace and initialize the SfImageEditor as shown in the following code sample.

Xamarin SfImageEditor	.NET MAUI SfImageEditor
XAML <ContentPage ... xmlns:imageEditor="clr-namespace:Syncfusion.XForms.ImageEditor;assembly=Syncfusion.SfImageEditor.XForms"> <imageEditor:SfImageEditor x:Name="imageEditor"/> </ContentPage> C# using Syncfusion.XForms.ImageEditor; ... SfImageEditor imageEditor = new SfImageEditor(); this.Content = imageEditor;	XAML <ContentPage ... xmlns:imageEditor="clr-namespace:Syncfusion.Maui.ImageEditor;assembly=Syncfusion.Maui.ImageEditor"> <imageEditor:SfImageEditor x:Name="imageEditor"/> </ContentPage> C# using Syncfusion.Maui.ImageEditor; … SfImageEditor imageEditor = new SfImageEditor(); this.Content = imageEditor;

Classes

Xamarin SfImageEditor	.NET MAUI SfImageEditor	Description
SfImageEditor	SfImageEditor	The image editor is used to crop, flip, rotate, annotate an image with freehand drawing, and built-in shapes.
PenSettings	ImageEditorAnnotationSettings	Represents a class that contains common settings for annotation views.
PenSettings	ImageEditorShapeSettings	Represents a class that contains the settings for shape annotation view.
TextSettings	ImageEditorTextSettings	Represents a class that contains the settings for text annotation view.
TextSettings	ImageEditorTextStyle	Represents a class that contains the style for text annotation view.

Properties

SfImageEditor

XAML

<ContentPage 
...
xmlns:imageEditor="clr-namespace:Syncfusion.Maui.ImageEditor;assembly=Syncfusion.Maui.ImageEditor">
    <imageEditor:SfImageEditor x:Name="imageEditor"
                       Source="syncfusion.png"/>
</ContentPage>

C#

using Syncfusion.Maui.ImageEditor;
...

SfImageEditor imageEditor = new SfImageEditor();
imageEditor.Source = ImageSource.FromFile("syncfusion.png");
this.Content = imageEditor;

Xamarin SfImageEditor	.NET MAUI SfImageEditor	Description
Source	Source	Gets or sets the source of image.
ZoomLevel	ZoomLevel	Gets or sets the initial zoom level.
EnableZooming	AllowZoom	Gets or sets the value indicating whether to enable the zoom.
MaximumZoomLevel	MaximumZoomLevel	Gets or sets the maximum zoom level.
ActualImageRenderedBounds	ImageRenderedSize	Gets the image rendered size.
OriginalImageSize	OriginalImageSize	Gets the original image size.
IsImageEdited	IsImageEdited	Gets the value indicating whether the image is edited or not.
ToolbarSettings.IsVisible	ShowToolbar	Gets or sets the value indicating whether to enable or disable default toolbar.
Nil	SelectionStroke	Gets or sets the selection highlight stroke. Applicable for crop view selection, shape and text annotation selection.

ImageEditorAnnotationSettings

Xamarin SfImageEditor	.NET MAUI SfImageEditor	Description
Bounds	Bounds	Gets or sets the annotation view bounds.
EnableDrag	AllowDrag	Gets or sets a value indicating whether to enable drag action for annotation.
IsResizable	AllowResize	Gets or sets a value indicating whether the resizing action is enabled or not for annotation.
Opacity	Opacity	Gets or sets the opacity value. It ranges from 0 to 1.

ImageEditorShapeSettings

Xamarin SfImageEditor	.NET MAUI SfImageEditor	Description
Color	Color	Gets or sets the shape annotation color.
StrokeWidth	StrokeThickness	Gets or sets the shape annotation stroke thickness.
FillColor	IsFilled	Gets or sets a value indicating whether the color should be applied to the shape fill or stroke.

ImageEditorTextSettings

Xamarin SfImageEditor	.NET MAUI SfImageEditor	Description
Angle	RotationAngle	Gets or sets the initial rotation angle for text.
Nil	TextStyle	Gets or sets the text style for text.
RotatableElement	IsRotatable	Gets or sets a value indicating whether the text is rotatable or not.
TextAlignment	TextAlignment	Gets or sets the TextAlignment for the text.
IsEditable	IsEditable	Gets or sets a value indicating whether the text is editable or not.

ImageEditorTextStyle

Xamarin SfImageEditor	.NET MAUI SfImageEditor	Description
Color	TextColor	Gets or sets the color for the text.
FontSize	FontSize	Gets or sets the font size of the text.
FontFamily	FontFamily	Gets or sets the font family for the text.
TextEffects	FontAttribute	Gets or sets the font attribute for the text.

Enums

Xamarin SfImageEditor	.NET MAUI SfImageEditor	Description
ShapeType	AnnotationShape	Specifies the annotation shapes in image editor.
FlipDirection	ImageFlipDirection	Specifies the direction to flip an image.
ImageEffect	ImageEffect	Specifies the image effect.
Nil	ImageFileType	Specifies the image file type.
Nil	ImageCropType	Specifies the image crop types.

Events

Xamarin SfImageEditor	.NET MAUI SfImageEditor	Description
BeginReset	BeginReset	Occurs when the image reset action.
ImageSaving	ImageSaving	Occurs when the image saving.
ImageSaved	ImageSaved	Occurs when the image saved in local storage.
ItemSelected	AnnotationSelected	Occurs when an annotation view selected.
ImageLoaded	ImageLoaded	Occurs when image loaded into view initially.

Methods

Xamarin SfImageEditor	.NET MAUI SfImageEditor	Description
Rotate	Rotate	Method to rotate image 90 degrees in clockwise direction.
Flip	Flip	Method to reverse the image along its horizontal or vertical axis.
Crop	Crop	Method to select and remove a portion of the image.
AddText	AddText	Method to add text to the image.
AddShape	AddShape	Method to add shapes such as rectangles, circles, and lines to the image.
Save	Save	Method to save the edited image.
SaveEdits	SaveEdits	Method to save the current editing actions.
Nil	CancelEdits	Method to cancel the editing actions.
ClearAnnotations	ClearAnnotations	Method to remove all the annotations.
Reset	Reset	Method to reset the edited image to its initial stage.
Undo	Undo	Method to reverse or undo the last action or a series of actions.
Redo	Redo	Method to replay or redo an action or a series of actions that were previously undone using the "Undo" command.
Delete	DeleteAnnotation	Method to remove the current selected annotations.
GetStream	GetImageStream	Method to get the edited image stream
ApplyImageEffect	ImageEffect	Method to apply various visual effects to the image, such as adjusted brightness, blur, contrast, exposure, saturation, sharpen, hue, and opacity.

Upcoming features

• Support for serialize and deserialize the annotations.
• Support for pan and zoom improvements while performing the crop action on the images.

Known issues in .Net MAUI ImageEditor

• [Mac, iOS]The image is not loading correctly from the stream or URI binding source.
• Rotation not working for text annotation.
• [Mac, iOS] The FontAttributes will not work for text annotations with the Custom font family.
• Rotation will not work for custom annotation views.