Display Images in .NET MAUI ImageEdiotor
ImageEditor control enables you to visualize images using the following property:
-
Source
(of typeMicrosoft.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.