Getting Started with the .NET MAUI ImageEditor
26 Sep 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:
- Install .NET 7 SDK or later is installed.
- 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
- Go to File > New > Project and choose the .NET MAUI App template.
- Name the project and choose a location. Then click Next.
- Select the .NET framework version and click Create.
Visual Studio Code
- Open the command palette by pressing
Ctrl+Shift+P
and type .NET:New Project and enter. - Choose the .NET MAUI App template.
- Select the project location, type the project name and press Enter.
- Then choose Create project.
Step 2: Install the Syncfusion .NET MAUI ImageEditor NuGet Package
- In Solution Explorer, right-click the project and choose Manage NuGet Packages.
- Search for Syncfusion.Maui.ImageEditor and install the latest version.
- 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
- To initialize the control, import the
Syncfusion.Maui.ImageEditor
namespace into your code. - 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:
- Locate the “Resources” folder in your .NET MAUI project. This folder is typically located in the project’s root directory.
- Right-click on the “Resources” folder in the project structure view or Solution Explorer.
- From the context menu, select “Add” and then “Existing Item.” This will open a file selection dialog.
- Browse to the location on your computer where the image file is stored.
- Select the image file you want to add to the “Resources” folder.
- Click “Add” to add the image file to the project.
- 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;
}
}
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
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>