Getting Started with the .NET MAUI Image Editor

8 Jul 20267 minutes to read

This section explains the steps to create and load an image in the .NET MAUI Image Editor (SfImageEditor) control. Follow the steps below to add the .NET MAUI Image Editor control to your project.

To get started quickly with the .NET MAUI Image Editor, you can check the video below.

Prerequisites

Before proceeding, ensure the following are set up:

  1. Install .NET 9 SDK or later.
  2. Set up a .NET MAUI environment with Visual Studio 2022 v17.12 or later.

Step 1: Create a new .NET MAUI project

  1. Go to File > New > Project and choose the .NET MAUI App template.
  2. Name the project and choose a location. Then, click Next.
  3. Select the .NET framework version and click Create.

Step 2: Install the Syncfusion® MAUI ImageEditor NuGet package

  1. In Solution Explorer, right-click the project and choose Manage NuGet Packages.
  2. Search for Syncfusion.Maui.ImageEditor and install the latest version.
  3. Ensure the necessary dependencies are installed correctly, and the project is restored.

Prerequisites

Before proceeding, ensure the following are set up:

  1. Install .NET 9 SDK or later.
  2. Set up a .NET MAUI environment with Visual Studio Code.
  3. Ensure that the .NET MAUI workloads are installed and configured as described here.

Step 1: Create a new .NET MAUI project

  1. Open the Command Palette by pressing Ctrl+Shift+P and type .NET:New Project and press Enter.
  2. Choose the .NET MAUI App template.
  3. Select the project location, type the project name and press Enter.
  4. Then choose Create project

Step 2: Install the Syncfusion® MAUI ImageEditor NuGet package

  1. Press Ctrl + ` (backtick) to open the integrated terminal in Visual Studio Code.
  2. Ensure you’re in the project root directory where your .csproj file is located.
  3. Run the command dotnet add package Syncfusion.Maui.ImageEditor to install the Syncfusion® .NET MAUI ImageEditor package.
  4. To ensure all dependencies are installed, run dotnet restore.

Prerequisites

Before proceeding, ensure the following are set up:

  1. Install .NET 9 SDK or later.
  2. Set up a .NET MAUI environment with JetBrains Rider 2024.3 or later.
  3. Make sure the MAUI workloads are installed and configured as described here.

Step 1: Create a new .NET MAUI project

  1. Go to File > New Solution, Select .NET (C#) and choose the .NET MAUI App template.
  2. Enter the Project Name, Solution Name, and Location.
  3. Select the .NET framework version and click Create.

Step 2: Install the Syncfusion® MAUI ImageEditor NuGet package

  1. In Solution Explorer, right-click the project and choose Manage NuGet Packages.
  2. Search for Syncfusion.Maui.ImageEditor and install the latest version.
  3. Ensure the necessary dependencies are installed correctly, and the project is restored. If not, Open the Terminal in Rider and manually run: dotnet restore

Step 3: Register Syncfusion handler

Register the Syncfusion core handler in your CreateMauiApp method of MauiProgram.cs file to use Syncfusion controls.

using Syncfusion.Maui.Core.Hosting;

builder.ConfigureSyncfusionCore();

Step 4: Import the ImageEditor namespace

Add the following namespace in your XAML or C#.

xmlns:imageEditor="clr-namespace:Syncfusion.Maui.ImageEditor;assembly=Syncfusion.Maui.ImageEditor"
using Syncfusion.Maui.ImageEditor;

Step 5: Add the Image Editor component

Initialize the SfImageEditor and load images from different sources using the Source property.

NOTE

You can load image formats such as JPEG, PNG, JPG and BMP into the image editor.

Loading a local file

To load an image from a local path, use the following code. This example loads an image named “image” with the “JPEG” format into the image editor control.

<imageEditor:SfImageEditor Source="D:\images\image.jpeg"/>
using Syncfusion.Maui.ImageEditor;
using Microsoft.Maui.Controls;

SfImageEditor imageEditor = new SfImageEditor();
imageEditor.Source = ImageSource.FromFile("D:\\images\\image.jpeg");
this.content = imageEditor;

Load an image from URI

To load an image from a remote URI, you can use the following code example.

<imageEditor:SfImageEditor Source="https://dummyimage.com/300x200/000/fff.png"/>
using Syncfusion.Maui.ImageEditor;
using Microsoft.Maui.Controls;

SfImageEditor imageEditor = new SfImageEditor();
imageEditor.Source = ImageSource.FromUri(new Uri("https://dummyimage.com/300x200/000/fff.png"));
this.content = imageEditor;

NOTE

To load an URI image on iOS platform, you need to set the App Transport Security (ATS) configuration in the Info.plist file.

<key>NSAppTransportSecurity</key>
<dict>
	<key>NSAllowsArbitraryLoads</key>
	<true/>
</dict>

Loading an image from the Resource folder

To load an image from a resource file, follow these steps:

Refer to the following steps to add an image to the project:

  1. Locate the “Resources” folder in your .NET MAUI project. This folder is typically located in the project’s root directory.
  2. Right-click on the “Resources” folder in the project structure view or Solution Explorer.
  3. From the context menu, select “Add” and then “Existing Item.” This will open a file selection dialog.
  4. Browse to the location on your computer where the image file is stored.
  5. Select the image file you want to add to the “Resources” folder.
  6. Click “Add” to add the image file to the project.
  7. Assign the image name, including its extension, to the Source property of the image editor control.

The following code shows adding an image to the image editor control.

<imageEditor:SfImageEditor Source="image.jpeg"/>
using Syncfusion.Maui.ImageEditor;
using Microsoft.Maui.Controls;

SfImageEditor imageEditor = new SfImageEditor();
imageEditor.Source =  ImageSource.FromResource("MyProject.Resources.Images.image.jpeg");
this.content = imageEditor;

Loading an image from a stream

To load an image from a byte array, use the provided code example for stream-based loading.

using Syncfusion.Maui.ImageEditor;
using System.Reflection;

SfImageEditor imageEditor = new SfImageEditor();
Assembly assembly = Assembly.GetExecutingAssembly();
imageEditor.Source = ImageSource.FromStream(() => assembly.GetManifestResourceStream("MyProject.Resources.Images.image.jpeg"));

The following screenshot illustrates the result of the above code.

Getting started in .NET MAUI Image Editor

NOTE

If you set the Stream source with a local variable, the stream will be closed after the image uses it, and you cannot process the stream again. So, we recommend using stream images by creating a new stream instance inside the lambda function so that you can process them whenever needed.

imageEditor.Source = ImageSource.FromStream(() => new MemoryStream(imageBytes));

You can download the ImageEditor Getting Started sample from GitHub.

NOTE

You can also explore our .NET MAUI Image Editor Example that shows you how to render the Image Editor in .NET MAUI.