Introducing the New .NET MAUI Image Editor Control
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (174).NET Core  (29).NET MAUI  (207)Angular  (109)ASP.NET  (51)ASP.NET Core  (82)ASP.NET MVC  (89)Azure  (41)Black Friday Deal  (1)Blazor  (215)BoldSign  (14)DocIO  (24)Essential JS 2  (107)Essential Studio  (200)File Formats  (66)Flutter  (133)JavaScript  (221)Microsoft  (119)PDF  (81)Python  (1)React  (100)Streamlit  (1)Succinctly series  (131)Syncfusion  (915)TypeScript  (33)Uno Platform  (3)UWP  (4)Vue  (45)Webinar  (51)Windows Forms  (61)WinUI  (68)WPF  (159)Xamarin  (161)XlsIO  (36)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (8)Business intelligence  (55)Button  (4)C#  (147)Chart  (131)Cloud  (15)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (63)Development  (628)Doc  (8)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (40)Extensions  (22)File Manager  (7)Gantt  (18)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (507)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (43)Performance  (12)PHP  (2)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (12)Road Map  (12)Scheduler  (52)Security  (3)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (31)Solution Services  (4)Spreadsheet  (11)SQL  (10)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (387)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (19)Web  (592)What's new  (332)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Introducing the New .NET MAUI Image Editor Control

Introducing the New .NET MAUI Image Editor Control

We are happy to introduce the new Syncfusion .NET MAUI Image Editor control in our latest release, 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.

.NET MAUI Image Editor Control
.NET MAUI Image Editor Control

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

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.

Cropping an image using .NET MAUI Image Editor
Cropping an image using .NET MAUI Image Editor

Image rotation and flipping

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

Rotating an image using .NET MAUI Image Editor
Rotating an image using .NET MAUI Image Editor
Flipping an image using .NET MAUI Image Editor
Flipping an image using .NET MAUI Image Editor

Shape annotation

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.

Shape annotations in .NET MAUI Image Editor
Shape annotations in .NET MAUI Image Editor

Text annotation

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.

Text annotation in .NET MAUI Image Editor
Text annotation in .NET MAUI Image Editor

Freehand drawing

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

Pen drawing in .NET MAUI Image Editor
Pen drawing in .NET MAUI Image Editor

Image filters

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.

Applying filters to an image using .NET MAUI Image Editor
Applying filters to an image using .NET MAUI Image Editor

Undo and redo

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.

Performing undo and redo actions in .NET MAUI Image Editor
Performing undo and redo actions in .NET MAUI Image Editor

Zoom and pan

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.

Zooming an image using .NET MAUI Image Editor
Zooming an image using .NET MAUI Image Editor

Save

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

Save option in .NET MAUI Image Editor
Save option in .NET MAUI Image Editor

Reset

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

Reset the edited image using .NET MAUI Image Editor
Reset the edited image using .NET MAUI Image Editor

Built-in toolbar

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.

Built-in toolbar in .NET MAUI Image Editor
Built-in toolbar in .NET MAUI Image Editor

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 in Visual Studio.
  2. Syncfusion .NET MAUI components are available in the NuGet Gallery. To add the SfImageEditor to your project, open the NuGet package manager in Visual Studio, search for Syncfusion.Maui.ImageEditor, then install it.
  3. Import the namespace Syncfusion.Maui.ImageEditor in your XAML page and initialize the SfImageEditor control. Refer to the following code.
    xmlns:imageEditor="clr-namespace:Syncfusion.Maui.ImageEditor;assembly=Syncfusion.Maui.ImageEditor"
      <imageEditor:SfImageEditor />
    
  1. Register the ConfigureSyncfusionCore handler for Syncfusion core in the MauiProgram.cs file.
    using Syncfusion.Maui.Core.Hosting;
    public static class MauiProgram
    {
       public static MauiApp CreateMauiApp()
       {
           var builder = MauiApp.CreateBuilder();
           builder.ConfigureSyncfusionCore();      
       }
    }
  1. Finally, add images to your project, set the image reference path in the Source property, and then load an image into the Image Editor control.
    <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 and documentation.

Conclusion

Thanks for reading! In this blog, we’ve seen the features of the new .NET MAUI Image Editor control introduced in the 2023 Volume 2 release. Check out our Release Notes and What’s New 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. If you are not yet a customer, you can try our 30-day free trial to check out these new features.

For questions, you can contact us through our support forumsfeedback portal, or support portal. We are always happy to assist you!

Test Flight
App Center Badge
Google Play Store Badge
Microsoft Badge
Github Store Badge

Related blogs

Tags:

Share this post:

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed