Commands

The commands of RadImageEditor allows you to execute actions over the image element, like rotate, flip, undo and more.

The RadImageEditor commands apply an effect over the image or execute an action like undo, redo and open/save image. The commands are defined in the ImageEditorCommands, ImageEditorRoutedCommands and ImageCommands classes.

ImageEditorCommands

An instance of the ImageEditorCommands class is created and assigned to the Commands property of RadImageEditor which can be used to access the commands. The ImageEditorCommands instance is associated with the corresponding RadImageEditor control and it executes the commands over its image.

Example 1: Using an image editor command in XAML

<Grid> 
    <Grid.RowDefinitions> 
        <RowDefinitions/> 
        <RowDefinitions Height="Auto"/> 
    </Grid.RowDefinitions> 
    <telerik:RadImageEditor x:Name="radImageEditor"/> 
    <telerik:RadButton Content="Open image" Command="{Binding ElementName=radImageEditor, Path=Commands.Open}" Grid.Row="1"/> 
</Grid>

Example 2: Using an image editor command in code

this.radImageEditor.Commands.Open.Execute(null);

The following list shows the available commands in the ImageEditorCommands class.

OpenImageCommand: Opens a dialog that allows you to select an image file which will get loaded into the corresponding RadImageEditor element. The CommandParameter of the command is optional and it expects a string describing the file extension filter of the file dialog.

Example 3: Using OpenImageCommand
```
    this.radImageEditor.Commands.Open.Execute("Image Files(.BMP;.JPG;.GIF)|.BMP;.JPG;.GIF|All files (.)|."); 
```
SaveImageCommand: Opens a dialog that allows you to select where on the file system the current image will get saved. The CommandParameter of the command is optional and it expects a string describing the file extension filter of the file dialog.

Example 4: Using SaveImageCommand
```
    this.radImageEditor.Commands.Save.Execute("Image Files(.BMP;.JPG;.GIF)|.BMP;.JPG;.GIF|All files (.)|."); 
```
UndoCommand: Undo the last change applied to the image. This command doesn't use the CommandParameter.

Example 5: Using UndoCommand
```
    this.radImageEditor.Commands.Undo.Execute(null); 
```
RedoCommand: Executes a redo action over the current image. This command doesn't use the CommandParameter.

Example 6: Using RedoCommand
```
    this.radImageEditor.Commands.Undo.Execute(null); 
```
Rotate90ClockwiseCommand: Rotates the image by 90 degrees clockwise. This command doesn't use the CommandParameter.

Example 7: Using Rotate90ClockwiseCommand
```
    this.radImageEditor.Commands.Rotate90Clockwise.Execute(null); 
```
Rotate90CounterclockwiseCommand: Rotates the image by 90 degrees clockwise. This command doesn't use the CommandParameter.

Example 8: Using Rotate90CounterclockwiseCommand
```
    this.radImageEditor.Commands.Rotate90Counterclockwise.Execute(null); 
```
Rotate180Command: Rotates the image by 180 degrees clockwise. This command doesn't use the CommandParameter.

Example 9: Using Rotate180Command
```
    this.radImageEditor.Commands.Rotate180.Execute(null); 
```
InvertColorsCommand: Inverts the colors in the image. This command doesn't use the CommandParameter.

Example 10: Using InvertColorsCommand
```
    this.radImageEditor.Commands.InvertColors.Execute(null); 
```
FlipVerticalCommand: Flips the image vertically. This command doesn't use the CommandParameter.

Example 11: Using FlipVerticalCommand
```
    this.radImageEditor.Commands.FlipVertical.Execute(null); 
```
FlipHorizontalCommand: Flips the image horizontally. This command doesn't use the CommandParameter.

Example 12: Using FlipHorizontalCommand
```
    this.radImageEditor.Commands.FlipHorizontal.Execute(null); 
```
ExecuteToolCommand: Executes a tool. The CommandParameter is required and it expects an object of type ITool.

Example 13: Using ExecuteToolCommand
```
    ITool tool = new BlurTool(); 
    this.radImageEditor.Commands.ExecuteTool.Execute(tool); 
```
ImageCommands

The ImageCommands class contains static commands that apply image adjustments like crop, blur, resize, draw, etc. The adjustments are executed via classes that implement the IImageCommand interface.

The actions in the ImageCommands class are not dependent on the RadImageEditor control. Instead they work with an instance of RadBitmap which in the context of RadImageEditor holds its current picture. Each command expects a RadBitmap object and returns a modified copy after the corresponding adjustments are applied.

The following list shows the available commands in the ImageCommands class.

FlipCommand: Flips the image horizontally or vertically. The context expected by the command is of type FlipCommandContext which contains information about the flip orientation.

Example 14: Using ExecuteToolCommand

    var context = new FlipCommandContext(Orientation.Vertical); 
    RadBitmap newImage = ImageCommands.Flip.Execute(this.radImageEditor.Image, context); 
    this.radImageEditor.Image = newImage;

The command also provide two public static methods that can be used instead of the Execute method.

Example 15: Using FlipCommand static methods

    RadBitmap horizontallyFlippedImage = FlipCommand.FlipHorizontal(this.radImageEditor.Image); 
    RadBitmap verticallyFlippedImage = FlipCommand.FlipVertical(this.radImageEditor.Image);

RotateCommand: Rotates the image by the specified degree. The context expected by the command is of type RotateCommandContext which contains information about the rotation degrees and the color of the background that will be shown behind the rotated image.

Example 16: Using RotateCommand
```
    var context = new RotateCommandContext(22, Colors.Green); 
    RadBitmap newImage = ImageCommands.Rotate.Execute(this.radImageEditor.Image, context); 
    this.radImageEditor.Image = newImage; 
```
ContrastCommand: Changes the contrast and brightness of the image. The context expected by the command is of type ContrastCommandContext which contains information about the level of brightness and contrast that will be applied over the image. The default brightness is 0 and the allowed values are between -1 and 1. The default contrast is 1.5 and the allowed values are between 0 and 2.

Example 17: Using ContrastCommand
```
    var context = new ContrastCommandContext(brightness: 0.25, contrast: 0.25); 
    RadBitmap newImage = ImageCommands.Contrast.Execute(this.radImageEditor.Image, context); 
    this.radImageEditor.Image = newImage; 
```
BlurCommand: Applies a blur effect over the image. The context expected by the command is of type BlurCommandContext which contains information about the blur amount and the input size.

Example 18: Using BlurCommand
```
    var context = new BlurCommandContext(0.5, new Size(500, 500)); 
    RadBitmap newImage = ImageCommands.Blur.Execute(this.radImageEditor.Image, context); 
    this.radImageEditor.Image = newImage; 
```

SharpenCommand: Sharpens the image. The context expected by the command is of type SharpenCommandContext which contains information about the blur amount and the input size.

Example 19: Using SharpenCommand

    var originalImage = this.radImageEditor.Image; 
    var context = new SharpenCommandContext(0.5, new Size(originalImage.Width, originalImage.Height)); 
    RadBitmap newImage = ImageCommands.Sharpen.Execute(originalImage, context); 
    this.radImageEditor.Image = newImage;

HueShiftCommand: Applies a hue shift effect over the image. The context expected by the command is of type HueShiftCommandContext which contains information about hue offset.

Example 20: Using HueShiftCommand
```
    var context = new HueShiftCommandContext(40); 
    RadBitmap newImage = ImageCommands.HueShift.Execute(this.radImageEditor.Image, context); 
    this.radImageEditor.Image = newImage; 
```

InvertColorsCommand: Inverts the colors in the image. This command doesn't use a context object.

Example 21: Using InvertColorsCommand

    RadBitmap newImage = ImageCommands.InvertColors.Execute(this.radImageEditor.Image, null); 
    this.radImageEditor.Image = newImage;

SaturationCommand: Applies saturation to the image. The context expected by the command is of type SaturationCommandContext which contains information about saturation.

Example 22: Using SaturationCommand
```
    var context = new SaturationCommandContext(40); 
    RadBitmap newImage = ImageCommands.Saturation.Execute(this.radImageEditor.Image, context); 
    this.radImageEditor.Image = newImage; 
```
CropCommand: Crops the image. The context expected by the command is of type CropCommandContext which contains information about the top left position where the crop starts and the final size of the cropped image.

Example 23: Using CropCommand
```
    var context = new CropCommandContext(10, 10, 250, 250); 
    RadBitmap newImage = ImageCommands.Crop.Execute(this.radImageEditor.Image, context); 
    this.radImageEditor.Image = newImage; 
```
ResizeCommand: Resizes the image. The context expected by the command is of type ResizeCommandContext which contains information about the new width and height of the image.

Example 24: Using ResizeCommand
```
    var context = new ResizeCommandContext(250, 250); 
    RadBitmap newImage = ImageCommands.Resize.Execute(this.radImageEditor.Image, context); 
    this.radImageEditor.Image = newImage; 
```

CanvasResizeCommand: Resizes the canvas. The context expected by the command is of type CanvasResizeCommandContext which contains information about the image alignment, the new size of the canvas and the background color.

Example 25: Using CanvasResizeCommand

    var context = new CanvasResizeCommandContext(Colors.Green, HorizontalAlignment.Left, VerticalAlignment.Top, 250, 250); 
    RadBitmap newImage = ImageCommands.CanvasResize.Execute(this.radImageEditor.Image, context); 
    this.radImageEditor.Image = newImage;

RoundCornersCommand: Adds round corners around the image. The context expected by the command is of type RoundCornersCommandContext which contains information about the corner radius, the border and the background.

Example 26: Using RoundCornersCommandd
```
    var context = new RoundCornersCommandContext(10, Colors.Green, 2, Colors.Black); 
    RadBitmap newImage = ImageCommands.RoundCorners.Execute(this.radImageEditor.Image, context); 
    this.radImageEditor.Image = newImage; 
```

DrawTextCommand: Draws text over the image. The context expected by the command is of type DrawTextCommandContext which contains information about text and its position.

Example 27: Using DrawTextCommand

    var context = new DrawTextCommandContext(16, Colors.Green, "My text", new Point(100, 100), 0); 
    RadBitmap newImage = ImageCommands.DrawText.Execute(this.radImageEditor.Image, context); 
    this.radImageEditor.Image = newImage;

DrawCommand: Draws a shape path over the image. The context expected by the command is of type DrawCommandContext which contains information about the drawn path.

Example 28: Using DrawCommand

    var path = new Path(); 
    path.Data = new EllipseGeometry(new Point(100, 100), 10, 10); 
    path.Fill = Brushes.Green; 
    path.Stroke = Brushes.Red; 
    path.StrokeThickness = 3; 
    var requiredParent = new Grid(); 
    requiredParent.Children.Add(path); 
    var context = new DrawCommandContext(path); 
    RadBitmap newImage = ImageCommands.Draw.Execute(this.radImageEditor.Image, context); 
    this.radImageEditor.Image = newImage;

ImageEditorRoutedCommands

The ImageEditorRoutedCommands class contains static RoutedCommands which wrap few of the commands of the ImageEditorCommands class.

The following list shows the available commands in the ImageEditorRoutedCommands class.

FlipHorizontal
FlipVertical
Rotate90Clockwise
Rotate90Counterclockwise
InvertColors
ExecuteTool
Undo
Redo
Open
Save

Example 29: Using the ImageEditorRoutedCommands

<Grid> 
    <telerik:RadImageEditor x:Name="radImageEditor" /> 
    <telerik:RadButton Content="Invert Colors"  
                       Command="commands:ImageEditorRoutedCommands.InvertColors" 
                       CommandTarget="{Binding ElementName=radImageEditor}"/> 
</Grid>

The commands namespace declaration points to the following namespace:

xmlns:commands="clr-namespace:Telerik.Windows.Media.Imaging.ImageEditorCommands.RoutedCommands;assembly=Telerik.Windows.Controls.ImageEditor"

Commands

ImageEditorCommands

Example 1: Using an image editor command in XAML

Example 2: Using an image editor command in code

Example 3: Using OpenImageCommand

Example 4: Using SaveImageCommand

Example 5: Using UndoCommand

Example 6: Using RedoCommand

Example 7: Using Rotate90ClockwiseCommand

Example 8: Using Rotate90CounterclockwiseCommand

Example 9: Using Rotate180Command

Example 10: Using InvertColorsCommand

Example 11: Using FlipVerticalCommand

Example 12: Using FlipHorizontalCommand

Example 13: Using ExecuteToolCommand

ImageCommands

Example 14: Using ExecuteToolCommand

Example 15: Using FlipCommand static methods

Example 16: Using RotateCommand

Example 17: Using ContrastCommand

Example 18: Using BlurCommand

Example 19: Using SharpenCommand

Example 20: Using HueShiftCommand

Example 21: Using InvertColorsCommand

Example 22: Using SaturationCommand

Example 23: Using CropCommand

Example 24: Using ResizeCommand

Example 25: Using CanvasResizeCommand

Example 26: Using RoundCornersCommandd

Example 27: Using DrawTextCommand

Example 28: Using DrawCommand

ImageEditorRoutedCommands

Example 29: Using the ImageEditorRoutedCommands

See Also

Getting Started

Support Resources

Community