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))
    {
        return;
    }

    var imageSource = new FileImageSource
    {
        File = filePath
    };

    this.imageEditor.Source = imageSource;
}

Load images for Uri

<telerik:RadImageEditor x:Name="imageEditor" 
                        Source="https://raw.githubusercontent.com/telerik/maui-samples/main/Samples/ControlsSamples/Resources/Images/borderconfigurationavatar.png" />

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"
                                   BorderColor="DarkGray" 
                                   CornerRadius="10"
                                   AutoGenerateItems="False"
                                   BorderThickness="1"
                                   ImageEditor="{x:Reference imageEditor}">
        <telerik:ButtonToolbarItem Text="Save" Clicked="OnSaveClicked" Style="{StaticResource buttonToolbarStyle}"/>
        <telerik:ImageEditorHueToolbarItem Style="{StaticResource buttonToolbarStyle}"/>
        <telerik:ImageEditorBrightnessToolbarItem Style="{StaticResource buttonToolbarStyle}"/>
    </telerik:RadImageEditorToolbar>
    <telerik:RadImageEditor x:Name="imageEditor" 
                            Source="balloon.jpg" 
                            Grid.Row="1" />
</Grid>

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="https://raw.githubusercontent.com/telerik/maui-samples/main/Samples/ControlsSamples/Resources/Images/borderconfigurationavatar.png" >
    <telerik:RadImageEditor.BusyIndicatorTemplate>
        <DataTemplate>
            <telerik:RadBusyIndicator AnimationType="Animation2"
                                      AnimationContentHeightRequest="100"
                                      AnimationContentWidthRequest="100"
                                      AnimationContentColor="Purple"
                                      IsBusy="True" />
        </DataTemplate>
    </telerik:RadImageEditor.BusyIndicatorTemplate>
</telerik:RadImageEditor>

Add the namespace used:

xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"

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

See Also

In this article
Not finding the help you need?