New to Telerik UI for .NET MAUI? Start a free 30-day trial

Display Images in .NET MAUI ImageEdiotor

ImageEditor control enables you to visualize images using the following property:

  • Source(of type Microsoft.Maui.Controls.ImageSource): Specifies the source of the image. For more details about the Source property check the Images in .NET MAUI article.

The images could be loaded from:

  • File
  • Uri
  • Stream
  • Resources

Load images for File

private async void OnAddImageClicked(object sender, System.EventArgs e)
    var filePicker = FilePicker.Default;
    var fileResult = await filePicker.PickAsync();
    var filePath = fileResult?.FullPath;

    if (string.IsNullOrEmpty(filePath))

    var imageSource = new FileImageSource
        File = filePath

    this.imageEditor.Source = imageSource;

Load images for Uri

<telerik:RadImageEditor x:Name="imageEditor" 
                        Source="" />

Load images for 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);

Load images for Resources

<Grid RowDefinitions="Auto,*">
    <telerik:RadImageEditorToolbar BackgroundColor="Transparent"
                                   ImageEditor="{x:Reference imageEditor}">
        <telerik:ButtonToolbarItem Text="Save" Clicked="OnSaveClicked" Style="{StaticResource buttonToolbarStyle}"/>
        <telerik:ImageEditorHueToolbarItem Style="{StaticResource buttonToolbarStyle}"/>
        <telerik:ImageEditorBrightnessToolbarItem Style="{StaticResource buttonToolbarStyle}"/>
    <telerik:RadImageEditor x:Name="imageEditor" 
                            Grid.Row="1" />

Loading Template

By default a busy indicator is shown when loading an image. You can change the indicator template using the following property:

  • BusyIndicatorTemplate(DataTemplate)—Defines the loading indicator when loading an image. When no template is specified, a default busy indicator is shown.

Example with BusyTemplate

RadImageEditor definition:

<telerik:RadImageEditor x:Name="imageEditor" 
                        Source="" >
            <telerik:RadBusyIndicator AnimationType="Animation2"
                                      IsBusy="True" />

Add the namespace used:


For the ImageEditor Busy Template example refer to the SDKBrowser Demo Application.

See Also

In this article
Not finding the help you need?