Controls / ImageEditor

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

Migrating the ImageEditor from Xamarin to .NET MAUI

Telerik .NET MAUI ImageEditor control preserves the same API as Xamarin.Forms ImageEditor with a few changes and improvements listed in the tables below:

Migrating the Namespaces

Control Control name XAML Namespcace C# Namespace
Xamarin ImageEditor RadImageEditor xmlns:telerikImageEditor="clr-namespace:Telerik.XamarinForms.ImageEditor;assembly=Telerik.XamarinForms.ImageEditor" using Telerik.XamarinForms.ImageEditor;
Xamarin ImageEditorToolbar RadImageEditorToolbar xmlns:telerikImageEditor="clr-namespace:Telerik.XamarinForms.ImageEditor;assembly=Telerik.XamarinForms.ImageEditor" using Telerik.XamarinForms.ImageEditor;
.NET MAUI ImageEditor RadImageEditor xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui" using Telerik.Maui.Controls;
.NET MAUI ImageEditorToolbar RadImageEditorToolbar xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui" using Telerik.Maui.Controls;

Modifying the API

When migrating the ImageEditor from Xamarin to .NET MAUI, consider the following differences in the API:

Xamarin ImageEditor .NET MAUI ImageEditor
N/A support for exporting images as Gif
N/A support for exporting images as Bmp
N/A UndoCommand
N/A RedoCommand
N/A RotateBackwardCommand
N/A SaturationInteractiveCommand
N/A BrightnessInteractiveCommand
N/A BlurInteractiveCommand
N/A ContrastInteractiveCommand
N/A HueInteractiveCommand
N/A SharpenInteractiveCommand

When migrating the ImageEditorToolbar from Xamarin to .NET MAUI, consider the following differences in the API:

Xamarin ImageEditorToolbar .NET MAUI ImageEditorToolbar
IsMultiLine with true and false values OverflowMode with DropDown, Scroll and Wrap(multiline) values
N/A OverflowMenuButtonVisibility
OverflowButtonTemplate OverflowMenuButtonTemplate
OverflowButtonText, OverflowButtonTextColor and OverflowButtonFontFamily OverflowMenuButtonStyle - Style the overflow button
TransformsToolbarItem ImageEditorTransformationsToolbarItem
CropToolbarItem for mobile and desktop ImageEditorCropToolbarItem
N/A ImageEditorCropOptionsToolbarItem
ResizeToolbarItem ImageEditorResizeOptionsToolbarItem
RotateLeftToolbarItem ImageEditorRotateLeftToolbarItem
RotateRightToolbarItem ImageEditorRotateRightToolbarItem
FlipHorizontalToolbarItem ImageEditorFlipHorizontalToolbarItem
FlipVerticalToolbarItem ImageEditorFlipVerticalToolbarItem
EffectsToolbarItem for mobile and desktop ImageEditorFiltersToolbarItem for mobile
N/A ImageEditorFilterOptionsToolbarItem for desktop
TransformsToolbarItem ImageEditorTransformationsToolbarItem
HueToolbarItem ImageEditorHueToolbarItem
SaturationToolbarItem ImageEditorSaturationToolbarItem
BrightnessToolbarItem ImageEditorBrightnessToolbarItem
ContrastToolbarItem ImageEditorContrastToolbarItem
BlurToolbarItem ImageEditorBlurToolbarItem
SharpenToolbarItem ImageEditorSharpenToolbarItem
UndoToolbarItem ImageEditorUndoToolbarItem
RedoToolbarItem ImageEditorRedoToolbarItem
ResetToolbarItem ImageEditorResetToolbarItem
ApplyToolbarItem ImageEditorApplyToolbarItem
CancelToolbarItem ImageEditorCancelToolbarItem
TemplateToolbarItem Review the toolbar items RadToolbar control provides
CommandToolbarItem Review the toolbar items RadToolbar control provides
ZoomToFitToolbarItem ImageEditorZoomToFitToolbarItem
N/A ImageEditorZoomInToolbarItem
N/A ImageEditorZoomOutToolbarItem
N/A ImageEditorZoomToolbarItem
N/A ImageEditorZoomToOriginalToolbarItem

The code snippets below represent the Xamarin and .NET MAUI definitions of the ImageEditor and ImageEditorToolbar with all predefined toolbar items.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <telerikImageEditor:RadImageEditor x:Name="imageEditor">
        <telerikImageEditor:RadImageEditor.Source>
            <OnPlatform x:TypeArguments="ImageSource" Default="cat4.jpeg">
                <On Platform="UWP">Assets\cat4.jpeg</On>
            </OnPlatform>
        </telerikImageEditor:RadImageEditor.Source>
    </telerikImageEditor:RadImageEditor>
    <telerikImageEditor:RadImageEditorToolbar Grid.Row="1" ImageEditor="{x:Reference imageEditor}" AutoGenerateItems="False">
        <telerikImageEditor:EffectsToolbarItem AutoGenerateItems="False">
            <telerikImageEditor:BackToolbarItem/>
            <telerikImageEditor:ContrastToolbarItem AutoGenerateItems="False">
                <telerikImageEditor:CancelToolbarItem HorizontalOptions="Start" />
                <telerikImageEditor:TemplateToolbarItem>
                    <telerikImageEditor:TemplateToolbarItem.Template>
                        <DataTemplate>
                            <Slider Maximum="2" Minimum="0" Value="{Binding Value}" />
                        </DataTemplate>
                    </telerikImageEditor:TemplateToolbarItem.Template>
                </telerikImageEditor:TemplateToolbarItem>
                <telerikImageEditor:ApplyToolbarItem HorizontalOptions="End" />
            </telerikImageEditor:ContrastToolbarItem>
        </telerikImageEditor:EffectsToolbarItem>
        <telerikImageEditor:CropToolbarItem/>
        <telerikImageEditor:RotateLeftToolbarItem/>
        <telerikImageEditor:RotateRightToolbarItem/>
        <telerikImageEditor:UndoToolbarItem/>
        <telerikImageEditor:RedoToolbarItem/>
    </telerikImageEditor:RadImageEditorToolbar>
</Grid>

```XAML
<Grid RowDefinitions="Auto,*">
    <Grid RowDefinitions="Auto,Auto,60,Auto" ColumnDefinitions="*,*,*,*" ColumnSpacing="5" RowSpacing="5" Margin="0,0,0,10">
        <Button Text="Brightness" Grid.ColumnSpan="2" Command="{Binding BrightnessInteractiveCommand, Source={x:Reference imageEditor}}">
            <Button.CommandParameter>
                <telerik:BrightnessCommandContext Brightness="{Binding Value, Source={x:Reference brightness}, Mode=TwoWay}"/>
            </Button.CommandParameter>
        </Button>
        <Slider Grid.Column="2" Grid.ColumnSpan="2" Minimum="-50" Maximum="50" x:Name="brightness"/>
        <Button Text="Hue" Grid.Row="1" Grid.ColumnSpan="2"  Command="{Binding HueInteractiveCommand, Source={x:Reference imageEditor}}">
            <Button.CommandParameter>
                <telerik:HueCommandContext Hue="{Binding Value, Source={x:Reference hue}, Mode=TwoWay}" />
            </Button.CommandParameter>
        </Button>
        <Slider Grid.Row="1" Grid.Column="2" Grid.ColumnSpan="2" Minimum="-100" Maximum="100" x:Name="hue" />
        <Button Grid.Row="2" Text="Interactive Crop" Grid.ColumnSpan="2" Command="{Binding CropInteractiveCommand, Source={x:Reference imageEditor}}" />
        <Button Grid.Row="2" Grid.Column="2" Text="Apply" Command="{Binding ApplyInteractiveCommand, Source={x:Reference imageEditor}}" />
        <Button Grid.Row="2" Grid.Column="3" Text="Cancel" Command="{Binding CancelInteractiveCommand, Source={x:Reference imageEditor}}"/>
        <Button Grid.Row="3" Text="Flip –" Command="{Binding FlipHorizontalCommand, Source={x:Reference imageEditor}}"/>
        <Button Grid.Row="3" Grid.Column="1" Text="Flip |" Command="{Binding FlipVerticalCommand, Source={x:Reference imageEditor}}" />
        <Button Grid.Row="3" Grid.Column="2" Text="Rotate &lt;" Command="{Binding RotateLeftCommand, Source={x:Reference imageEditor}}" />
        <Button Grid.Row="3" Grid.Column="3" Text="Rotate &gt;" Command="{Binding RotateRightCommand, Source={x:Reference imageEditor}}" />
    </Grid>
    <telerik:RadImageEditor x:Name="imageEditor" 
                            Grid.Row="1"
                            Source="https://raw.githubusercontent.com/telerik/maui-samples/main/Samples/ControlsSamples/Resources/Images/borderconfigurationavatar.png" />
</Grid>

See Also

In this article
Related articles
Not finding the help you need? Improve this article