Getting Started with the .NET MAUI ImageEditor

16 Oct 202416 minutes to read

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

To get start quickly with our .NET MAUI ImageEditor, you can check the below video.

Prerequisites

Before proceeding, ensure the following are setup:

  1. Install .NET 7 SDK or later is installed.
  2. Set up a .NET MAUI environment with Visual Studio 2022 (v17.3 or later) or Visual Studio Code. For Visual Studio Code users, ensure that the .NET MAUI workload is installed and configured as described here.

Step 1: Create a New .NET MAUI Project

Visual Studio

  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.

Visual Studio Code

  1. Open the command palette by pressing Ctrl+Shift+P and type .NET:New Project and 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 .NET 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.

Step 3: Register the handler

The Syncfusion.Maui.Core NuGet is a dependent package for all Syncfusion .NET MAUI controls. In the MauiProgram.cs file, register the handler for Syncfusion core.

using Syncfusion.Maui.Core.Hosting;
namespace GettingStarted
{
    public static class MauiProgram
    {
        public static MauiApp CreateMauiApp()
        {
            var builder = MauiApp.CreateBuilder();

            builder.ConfigureSyncfusionCore();
            builder
            .UseMauiApp<App>()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                fonts.AddFont("Segoe-mdl2.ttf", "SegoeMDL2");
            });

            return builder.Build();
        }
    }
}

Step 4: Add .NET MAUI ImageEditor control

  1. To initialize the control, import the Syncfusion.Maui.ImageEditor namespace into your code.
  2. Initialize SfImageEditor.
<ContentPage   
    . . .
    xmlns:imageEditor="clr-namespace:Syncfusion.Maui.ImageEditor;assembly=Syncfusion.Maui.ImageEditor">

    <imageEditor:SfImageEditor />
</ContentPage>
using Syncfusion.Maui.ImageEditor;
. . .

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        SfImageEditor imageEditor = new SfImageEditor();
        this.Content = imageEditor;
    }
}

Loading an image to image editor

The Source property is used to load images from different sources:

NOTE

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

Loading a local file

To load an image from a local path. The following code shows adding an image to the image editor control with the format as “JPEG” and name as “image.”

<ContentPage 
            . . .
            <imageEditor:SfImageEditor Source="D:\images\image.jpeg"/>

</ContentPage>
using Syncfusion.Maui.ImageEditor;
namespace SyncfusionImageEditor;

public partial class MainPage : ContentPage
{
	public MainPage()
	{
        InitializeComponent();
        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.

<ContentPage 
            . . .
            <imageEditor:SfImageEditor Source="https://dummyimage.com/300x200/000/fff.png"/>

</ContentPage>
using Syncfusion.Maui.ImageEditor;
namespace SyncfusionImageEditor;

public partial class MainPage : ContentPage
{
	public MainPage()
	{
        InitializeComponent();
        SfImageEditor imageEditor = new SfImageEditor();
        imageEditor.Source = ImageSource.FromUri(new Uri("https://dummyimage.com/300x200/000/fff.png"));
        this.content = imageEditor;
    }
}

Load an image from Resource folder

To load an image from a resource file.

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.

<ContentPage 
            . . .
            <imageEditor:SfImageEditor Source="image.jpeg"/>

</ContentPage>
using Syncfusion.Maui.ImageEditor;
namespace SyncfusionImageEditor;

public partial class MainPage : ContentPage
{
	public MainPage()
	{
        InitializeComponent();
        SfImageEditor imageEditor = new SfImageEditor();
        imageEditor.Source =  ImageSource.FromResource("MyProject.Resources.Images.image.jpeg");
        this.content = imageEditor;
    }
}

Load an image from 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;
namespace SyncfusionImageEditor;

public partial class MainPage : ContentPage
{
	public MainPage()
	{
        InitializeComponent();
        SfImageEditor imageEditor = new SfImageEditor();
        Assembly assembly = Assembly.GetExecutingAssembly();
        imageEditor.Source = ImageSource.FromStream(() => assembly.GetManifestResourceStream("MyProject.Resources.Images.image.jpeg"))
        this.content = imageEditor;
    }
}

GettingStarted in .NET Maui ImageEditor

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.

NOTE

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

NOTE

View sample in GitHub

Get the image stream

The GetImageStream method is used to get the edited image in form of a image stream.

<Grid RowDefinitions="0.9*, 0.1*">
        <imageEditor:SfImageEditor x:Name="imageEditor"
                                   Source="image.jpeg" />
        <Button Grid.Row="1"
                Text="Get Image Stream"
                Clicked="OnGetStreamClicked" />
    </Grid>
private void OnGetStreamClicked(object sender, EventArgs e)
    {
        this.imageEditor.GetImageStream();
    }

Get the Image Original Size

The OriginalImageSize property is used to get the image’s original size.

<Grid RowDefinitions="0.9*, 0.1*">
        <imageEditor:SfImageEditor x:Name="imageEditor"
                                   Source="image.jpeg" />
        <Button Grid.Row="1"
                Text="Get Image Original Size"
                Clicked="OnGetImageOriginalSize" />
    </Grid>
private void OnGetImageOriginalSize(object sender, EventArgs e)
    {
        Size originalSize = this.imageEditor.OriginalImageSize;
    }

NOTE

The size value will only be available after the image has been loaded into view.

Get the Image Rendered Size

The image editor utilizes the AspectFit image scaling of Image control to fit the entire image into the display area, with blank space added to the top or bottom sides depending on whether the image is wide or tall. The ImageRenderedSize property is used to get the current rendered size of the image inside the display area.

<Grid RowDefinitions="0.9*, 0.1*">
        <imageEditor:SfImageEditor x:Name="imageEditor"
                                   Source="image.jpeg" />
        <Button Grid.Row="1"
                Text="Get Image Rendered Size"
                Clicked="OnGetImageRenderedSize" />
    </Grid>
private void OnGetImageRenderedSize(object sender, EventArgs e)
    {
        Size imageSize = this.imageEditor.ImageRenderedSize;
    }

NOTE

The size value will only be available after the image has been loaded into view.

Check image edited status

The IsImageEdited property is used to determine whether any editing action has been performed on the image.

<Grid RowDefinitions="0.9*, 0.1*">
        <imageEditor:SfImageEditor x:Name="imageEditor"
                                   Source="image.jpeg" />
        <Button Grid.Row="1"
                Text="IsImageEdited"
                Clicked="OnIsImageEditedClicked" />
    </Grid>
private void OnIsImageEditedClicked(object sender, EventArgs e)
{
    if (this.imageEditor.IsImageEdited)
    {
        this.imageEditor.Save();
    }
}

ImageEditor inside stack layout

Vertical StackLayout

When the image editor is placed inside a vertical stack layout, users must define the required MinimumHeightRequest value. By default, this MinimumHeightRequest is set to 100.

<VerticalStackLayout>
    <imageEditor:SfImageEditor x:Name="imageEditor"
                               MinimumHeightRequest="400"
                               Source="image.jpeg">
    </imageEditor:SfImageEditor>
</VerticalStackLayout>
public MainPage()
{
    InitializeComponent();
    VerticalStackLayout verticalLayout = new VerticalStackLayout();
    SfImageEditor imageEditor = new SfImageEditor();
    imageEditor.Source = ImageSource.FromResource("MyProject.Resources.Images.image.jpeg");
    imageEditor.MinimumHeightRequest = 400;
    verticalLayout.Add(imageEditor);
    this.Content = verticalLayout;
}

Horizontal StackLayout

When the image editor is placed inside a horizontal stack layout, users must define the required MinimumWidthRequest value. By default, this MinimumWidthRequest is set to 100.

<HorizontalStackLayout>
    <imageEditor:SfImageEditor x:Name="imageEditor"
                               MinimumWidthRequest="400"
                               Source="image.jpeg">
    </imageEditor:SfImageEditor>
</HorizontalStackLayout>
public MainPage()
{
    InitializeComponent();
    HorizontalStackLayout horizontalLayout = new HorizontalStackLayout();
    SfImageEditor imageEditor = new SfImageEditor();
    imageEditor.Source = ImageSource.FromResource("MyProject.Resources.Images.image.jpeg");
    imageEditor.MinimumWidthRequest = 400;
    horizontalLayout.Add(imageEditor);
    this.Content = horizontalLayout;
}

Change the image editor background

The background of the Image Editor can be customized by setting the Background property of the SfImageEditor.

<imageEditor:SfImageEditor x:Name="imageEditor"
                              Source="imageeditordesktop.png"
                              Background="LightGreen">
   </imageEditor:SfImageEditor>

NOTE

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