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>

Migrating the ImageEditor from Xamarin to .NET MAUI

Migrating the Namespaces

Modifying the API

See Also

Sample Applications

Support Resources

Community