Introducing the New .NET MAUI Image Editor Control
Tags: dotnetmaui, development, mobile, desktop
Published: 2023-07-05 10:14:43

---
title: Introducing the New .NET MAUI Image Editor Control
published: true
date: 2023-07-04 12:47:19 UTC
tags: dotnetmaui, development, mobile, desktop
canonical_url: https://www.syncfusion.com/blogs/post/dotnet-maui-image-editor-control.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hs08xwtlxhekv3zg3rnf.png
---
We are happy to introduce the new Syncfusion [.NET MAUI Image Editor ](https://www.syncfusion.com/maui-controls/maui-image-editor ".NET MAUI Image Editor")control in our latest release, [Essential Studio 2023 Volume 2](https://www.syncfusion.com/forums/183035/essential-studio-2023-volume-2-main-release-v22-1-34-is-available-for-download "Essential Studio 2023 Volume 2").

The Image Editor is used to crop, flip, and rotate images and annotate them with freehand drawings and built-in shapes.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/NET-MAUI-Image-Editor-Control.png" alt=".NET MAUI Image Editor Control" style="width:100%">

  <figcaption>.NET MAUI Image Editor Control</figcaption>

</figure>

In this blog, we’ll explore the key features of the .NET MAUI Image Editor and the steps to get started with it!

## Key features

The key features of the new .NET MAUI Image Editor are:

- [Image cropping](#Image)
- [Image rotation and flipping](#rotation)
- [Shape annotation](#Shape)
- [Text annotation](#Text)
- [Freehand drawing](#Freehand)
- [Filters](#Filters)
- [Undo and redo](#Undo)
- [Zoom and pan](#Zoom)
- [Reset](#Reset)
- [Save](#Save)
- [Built-in toolbar](#Built)

###<a name="Image">Image cropping</a>

You can crop an image by selecting a specific area of interest and resizing it to the required dimensions. There are many useful predefined aspect ratios available to crop the images. This is useful in applications where an image needs to be cropped to fit specific layouts or aspect ratios.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Cropping-an-image-using-.NET-MAUI-Image-Editor-2.jpg" alt="Cropping an image using .NET MAUI Image Editor" style="width:100%">

  <figcaption>Cropping an image using .NET MAUI Image Editor</figcaption>

</figure>

###<a name="rotation">Image rotation and flipping</a>

The Image Editor makes it simple to rotate an image clockwise by 90, 180, 270, or 360 degrees or flip it horizontally or vertically.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Rotating-an-image-using-.NET-MAUI-Image-Editor-1.png" alt="Rotating an image using .NET MAUI Image Editor" style="width:100%">

  <figcaption>Rotating an image using .NET MAUI Image Editor</figcaption>

</figure>
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Flipping-an-image-using-.NET-MAUI-Image-Editor-2.png" alt="Flipping an image using .NET MAUI Image Editor" style="width:100%">

  <figcaption>Flipping an image using .NET MAUI Image Editor</figcaption>

</figure>

###<a name="Shape">Shape annotation</a>

The shape annotation allows you to insert geometric shapes, such as rectangles, ellipses, lines, and arrows, over an image. You can customize their appearances by adjusting the fill color, stroke color, and stroke thickness. Circle and rectangle shapes can be filled or you can draw an outline around them.

This functionality is beneficial in instances where users need to highlight or explain specific parts of an image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Shape-annotations-in-.NET-MAUI-Image-Editor-1.jpg" alt="Shape annotations in .NET MAUI Image Editor" style="width:100%">

  <figcaption>Shape annotations in .NET MAUI Image Editor</figcaption>

</figure>

###<a name="Text">Text annotation</a>

You can also insert text over an image to show useful information. Easily customize the color, font family, font attribute, and alignment of the text.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Text-annotation-in-.NET-MAUI-Image-Editor-1.jpg" alt="Text annotation in .NET MAUI Image Editor" style="width:100%">

  <figcaption>Text annotation in .NET MAUI Image Editor</figcaption>

</figure>

###<a name="Freehand">Freehand drawing</a>

The Image Editor allows you to add freehand drawings over an image and customize their appearance by adjusting their stroke color and stroke thickness.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Pen-drawing-in-.NET-MAUI-Image-Editor.gif" alt="Pen drawing in .NET MAUI Image Editor" style="width:100%">

  <figcaption>Pen drawing in .NET MAUI Image Editor</figcaption>

</figure>

###<a name="Filters">Image filters</a>

The .NET MAUI Image Editor supports adding these effects to enhance the visual quality of an image: brightness, contrast, hue, saturation, exposure, opacity, blur, and sharpen.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Applying-filters-to-an-image-using-.NET-MAUI-Image-Editor.gif" alt="Applying filters to an image using .NET MAUI Image Editor" style="width:100%">

  <figcaption>Applying filters to an image using .NET MAUI Image Editor</figcaption>

</figure>

###<a name="Undo">Undo and redo</a>

The undo and redo functions are used to revert or restore changes made to an image. They are valuable tools that allow users to correct mistakes and experiment with various improvements.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Performing-undo-and-redo-actions-in-.NET-MAUI-Image-Editor.gif" alt="Performing undo and redo actions in .NET MAUI Image Editor" style="width:100%">

  <figcaption>Performing undo and redo actions in .NET MAUI Image Editor</figcaption>

</figure>

###<a name="Zoom">Zoom and pan</a>

Change the scale and position of an image to focus on specific parts by zooming in and out.

You can move the image horizontally or vertically within the zoomed-in view by panning the image. This enables users to view image areas that are not displayed in the viewport. Users can drag or swipe the image in any way to bring different portions into focus.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Zooming-an-image-using-.NET-MAUI-Image-Editor.gif" alt="Zooming an image using .NET MAUI Image Editor" style="width:100%">

  <figcaption>Zooming an image using .NET MAUI Image Editor</figcaption>

</figure>

###<a name="Save">Save</a>

You can save edited images in different formats, such as .png and .jpg, to the desired device location. You can also customize the dimensions of an image while saving it.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Save-option-in-.NET-MAUI-Image-Editor-1.png" alt="Save option in .NET MAUI Image Editor" style="width:100%">

  <figcaption>Save option in .NET MAUI Image Editor</figcaption>

</figure>

###<a name="Reset">Reset</a>

Reset an image to its original state by discarding any editing changes made to it.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Reset-the-edited-image-using-.NET-MAUI-Image-Editor.gif" alt="Reset the edited image using .NET MAUI Image Editor" style="width:100%">

  <figcaption>Reset the edited image using .NET MAUI Image Editor</figcaption>

</figure>

###<a name="Built">Built-in toolbar</a>

The Image Editor has built-in tools to perform the image editing actions rotate, flip, undo, redo, crop, effects, add shapes, add text, and freehand draw.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Built-in-toolbar-in-.NET-MAUI-Image-Editor-2.png" alt="Built-in toolbar in .NET MAUI Image Editor" style="width:100%">

  <figcaption>Built-in toolbar in .NET MAUI Image Editor</figcaption>

</figure>

## Getting started with .NET MAUI Image Editor

We have explored the key features of the .NET MAUI Image Editor control. Let’s see how to integrate the control in your .NET MAUI app:

1.First, [create a new .NET MAUI app](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?view=net-maui-7.0&tabs=vswin&pivots=devices-android "Build your first .NET MAUI app") in [Visual Studio](https://visualstudio.microsoft.com/ "Visual Studio").
2.Syncfusion .NET MAUI components are available in the [NuGet Gallery](https://www.nuget.org/ "NuGet Gallery"). To add the **SfImageEditor** to your project, open the NuGet package manager in Visual Studio, search for [Syncfusion.Maui.ImageEditor](https://www.nuget.org/packages/Syncfusion.Maui.ImageEditor "Syncfusion.Maui.ImageEditor NuGet Package"), then install it.
3.Import the namespace **Syncfusion.Maui.ImageEditor** in your XAML page and initialize the **SfImageEditor** control. Refer to the following code.
```xml
xmlns:imageEditor="clr-namespace:Syncfusion.Maui.ImageEditor;assembly=Syncfusion.Maui.ImageEditor"
  <imageEditor:SfImageEditor />

```

4.Register the **ConfigureSyncfusionCore** handler for Syncfusion core in the **MauiProgram.cs** file.
```csharp
using Syncfusion.Maui.Core.Hosting;
public static class MauiProgram
{
   public static MauiApp CreateMauiApp()
   {
       var builder = MauiApp.CreateBuilder();
       builder.ConfigureSyncfusionCore();
       builder.ConfigureSyncfusionCore();
   }
}
```

5.Finally, [add images](https://help.syncfusion.com/maui/imageeditor/getting-started#loading-an-image-to-image-editor "Loading an image to .NET MAUI Image Editor") to your project, set the image reference path in the [Source](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.ImageEditor.SfImageEditor.html#Syncfusion_Maui_ImageEditor_SfImageEditor_Source "Source property of .NET MAUI Image Editor")property, and then load an image into the Image Editor control.
```xml
<imageEditor:SfImageEditor Source="imageeditordesktop.png" />
```

Now, you can perform image editing actions using the predefined toolbar items in the .NET MAUI Image Editor control.

## References

For more details, refer to the [.NET MAUI Image Editor getting started demo on GitHub](https://github.com/SyncfusionExamples/maui-image-editor-examples/tree/master/GettingStarted "MAUI Image Editor GitHub demo") and [documentation](https://help.syncfusion.com/maui/imageeditor/getting-started "Getting Started with .NET MAUI ImageEditor").

## Conclusion

Thanks for reading! In this blog, we’ve seen the features of the new [.NET MAUI Image Editor](https://www.syncfusion.com/maui-controls/maui-image-editor ".NET MAUI Image Editor Control") control introduced in the [2023 Volume 2](https://www.syncfusion.com/forums/183035/essential-studio-2023-volume-2-main-release-v22-1-34-is-available-for-download "Essential Studio 2023 Volume 2") release. Check out our [Release Notes](https://help.syncfusion.com/common/essential-studio/release-notes/v22.1.34 "Essential Studio 2023 Volume 2 Release Notes") and [What’s New](https://www.syncfusion.com/products/whatsnew "Essential Studio 2023 Volume 2 What’s New page") pages to see the other updates in this release and leave your feedback in the comments section below.

For current Syncfusion customers, the newest version of Essential Studio is available from the [license and downloads page](https://www.syncfusion.com/account/downloads "Essential Studio License and Downloads page"). If you are not yet a customer, you can try our 30-day [free trial](https://www.syncfusion.com/downloads "Free evaluation of the Essential Studio products") to check out these new features.

For questions, you can contact us through our [support forums](https://www.syncfusion.com/forums "Syncfusion Support Forums"), [feedback portal](https://www.syncfusion.com/feedback "Syncfusion Feedback Portal"), or [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"). We are always happy to assist you!

## Related blogs

- [Syncfusion Essential Studio 2023 Volume 2 Is Here!](https://www.syncfusion.com/blogs/post/essential-studio-2023-volume-2.aspx "Blog: Syncfusion Essential Studio 2023 Volume 2 Is Here!")
- [Introducing the 8th Set of .NET MAUI Controls and Features](https://www.syncfusion.com/blogs/post/whats-new-dotnet-maui.aspx "Blog: Introducing the 8th Set of .NET MAUI Controls and Features")
- [Introducing the .NET MAUI Toolbox for Visual Studio](https://www.syncfusion.com/blogs/post/dotnet-maui-visual-studio-toolbox.aspx "Blog: Introducing the .NET MAUI Toolbox for Visual Studio")
- [What’s New in 2023 Volume 2: .NET MAUI Charts](https://www.syncfusion.com/blogs/post/2023-volume-2-dotnet-maui-charts.aspx "Blog: What’s New in 2023 Volume 2: .NET MAUI Charts")