Getting Started with the .NET MAUI ImageEditor control
This guide provides the information you need to start using the Telerik UI for .NET MAUI ImageEditor by adding the control to your project.
At the end, you will achieve the following result.
Prerequisites
Before adding the ImageEditor, you need to:
The ImageEditor is rendered through the SkiaSharp graphics library.
Define the Control
1. When your .NET MAUI application is set up, you are ready to add an ImageEditor control and the built-in Toolbar to your page.
<Grid RowDefinitions="Auto,*">
<telerik:RadImageEditorToolbar ImageEditor="{x:Reference imageEditor}"/>
<telerik:RadImageEditor x:Name="imageEditor" Grid.Row="1"/>
</Grid>
var imageEditor = new RadImageEditor();
imageEditor.Source = ImageSource.FromStream(streamFunc);
var toolbar = new RadImageEditorToolbar();
toolbar.ImageEditor = imageEditor;
var grid = new Grid();
grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });
grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Auto) });
grid.Add(imageEditor, 0, 0);
grid.Add(toolbar, 0, 1);
2. Add the following namespace:
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
3. For the demo the image is loaded in the ImageEditor from a stream:
Func<CancellationToken, Task<Stream>> streamFunc = ct => Task.Run(() =>
{
Assembly assembly = typeof(ImageEditorGettingStartedXaml).Assembly;
string fileName = assembly.GetManifestResourceNames().FirstOrDefault(n => n.Contains("imageavatar.png"));
Stream stream = assembly.GetManifestResourceStream(fileName);
return stream;
});
this.imageEditor.Source = ImageSource.FromStream(streamFunc);
4. Register the Telerik controls through the Telerik.Maui.Controls.Compatibility.UseTelerik extension method called inside the CreateMauiApp method of the MauiProgram.cs file of your project:
using Telerik.Maui.Controls.Compatibility;
public static class MauiProgram
{
public static MauiApp CreateMauiApp()
{
var builder = MauiApp.CreateBuilder();
builder
.UseTelerik()
.UseMauiApp<App>()
.ConfigureFonts(fonts =>
{
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
});
return builder.Build();
}
}
For the ImageEditor Getting Started example refer to the SDKBrowser Demo Application.
Additional Resources
- .NET ImageEditor page
- .NET MAUI ImageEditor Forum Page
- Telerik .NET MAUI Blogs
- Telerik .NET MAUI Roadmap