Controls / RadImageEditor / Features

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

See Also

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