.NET MAUI ImageEditor Commands

This article shows all the commands available in the ImageEditor for .NET MAUI.

All built-in and interactive commands

ImageEditor for .NET MAUI provides commands for programmatically editing the image without the usage of the ImageEditorToolbar. The available commands are:

• CropCommand(ICommand)—Crop the image. The CropCommandContext object is passed as a parameter to the CropCommand. The CropCommandContext has the following properties:

  • Geometry(of type Telerik.Maui.Controls.RadGeometry)—Specifies the geometry of the crop selection.
  • Bounds(of type Rectangle)—Used to get the current crop bounding rectangle.

• CropInteractiveCommand(ICommand)—Initiates the crop action.

• ResizeCommand—For image resizing. The ResizeCommandContext object is passed as a parameter to the ResizeCommand. The ResizeCommandContext has the following property:

  • Size(of typeMicrosoft.Maui.Graphics.Size)—Specifies the size which will be used to resize the image.

• ResizeInteractiveCommand—For image resizing.

• BlurCommand—Applies blur to the image. The BlurCommandContext object is passed as a parameter to the BlurCommand. The BlurCommandContext has the following property:

  • Blur(int)—Specifies the blur value.

• BlurInteractiveCommand(ICommand)—Initiates the blur action.

• BrightnessCommand(ICommand)—Changes the brightness of the image. The BrightnessCommandContext object is passed as a parameter to the BrightnessCommand. The BrightnessCommandContext has the following property:

  • Brightness(double)—Specifies the brightness value.

• BrightnessInteractiveCommand(ICommand)—Initiates the brightness action.

• ContrastCommand(ICommand)—Changes the image contrast. The ContrastCommandContext object is passed as a parameter to the ContrastCommand. The ContrastCommandContext has the following property:

  • Contrast(double)—Specifies the contrast value.

• ContrastInteractiveCommand(ICommand)—Initiates the contrast action.

• HueCommand(ICommand)—Changes the image hue. The HueCommandContext object is passed as a parameter to the HueCommand. The HueCommandContext has the following property:

  • Hue(double)—Specifies the hue value.

• HueInteractiveCommand(ICommand)—Initiates the hue action.

• SaturationCommand(ICommand):—Changes the image saturation. The SaturationCommandContext object is passed as a parameter to the SaturationCommand. The SaturationCommandContext has the following property:

  • Saturation(double)—Specifies the saturation value.

• SaturationInteractiveCommand(ICommand)—Initiates the saturation action.

• SharpenCommand(ICommand)—Changes the image sharpness. The SaturationCommandContext object is passed as a parameter to the SharpenCommand. The SharpenCommandContext has the following property:

  • Sharpen(int)—Specifies the sharpen value.

• SharpenInteractiveCommand(ICommand)—Initiates the sharpen action.

• FlipHorizontalCommand(ICommand)—Flips the image horizontally.

• FlipVerticalCommand(ICommand)—Flips the image vertically.

• FilterCommand(ICommand)—Applies a composite filter to the image.

• FilterInteractiveCommand(ICommand)—Initiates the composite filter action of the image.

Commands which cancel/apply the changes made in interactive commands:

• CancelInteractiveCommand—Cancels the changes done in interactive command such as Telerik.Maui.Controls.RadImageEditor.CropInteractiveCommand.

• ApplyInteractiveCommand—Applies the changes done in interactive command such as Telerik.Maui.Controls.RadImageEditor.CropInteractiveCommand.

When using the Interactive Commands you can apply the changes using ApplyInteractiveCommand and cancel the changes using CancelInteractiveCommand.

• ZoomToFitCommand(ICommand)—Gets the command which zooms the image to fit the available screen space.

• RotateLeftCommand(ICommand)—For image rotation 90 degree to the left.

• RotateRightCommand—For image rotation 90 degree to the right.

• UndoCommand(ICommand)—Gets the command for the undo action.

• RedoCommand(ICommand)—Gets the command for the redo action.

• ResetCommnad(ICommand)—Reset all changes applied to the image.

• RotateBackwardCommand(ICommand)—Rotates the image backwards.

Commands Inherited from the Toolbar control

• NavigateCommand(ICommand)—Gets a command for navigating to the next level of the toolbar hierarchy. The command accepts a collection of Telerik.Maui.Controls.ToolbarItems as a parameter.
• NavigateBackCommand(ICommand)—Gets a command for navigating back to the previous level of the toolbar hierarchy. The previous Telerik.Maui.Controls.ToolbarItems stored in the navigation stack from the last invocation of the Telerik.Maui.Controls.RadToolbar.NavigateCommand are restored in the toolbar.
• ScrollForwardCommand(ICommand)—Gets a command for scrolling the contents of the toolbar in a forward direction. This command is applicable when the RadToolbar.OverflowMode is set to Scroll.
• ScrollBackwardCommand(ICommand)—Gets a command for scrolling the contents of the toolbar in backward direction. This command is applicable when the RadToolbar.OverflowMode is set to Scroll.

Example with Interactive Commands and Rotate Left and Right

1. The ImageEditor definition in XAML with Brightness, Hue, Crop, Flip, Rotate, Cancel and Accept commands:

<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>

2. Add the following namespace:

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

For the runnable ImageEditor Commands example, see the SDKBrowser Demo Application and go to ImageEditor > Features.

See Also

• Custom Toolbar
• Toolbar Styling