Telerik UI for Windows Phone by Progress

RadImageEditor supports a multitude of tools that developers can use. The tools can be used separately to edit different properties of an image. For example the brightness tool can be used to adjust the brightness of an image like this:

CopyC#
BrightnessTool brightness = new BrightnessTool();
brightness.Value = 0.5;
ImageSource brightImage = await brightness.Apply(new BitmapImage(new Uri("myImage.png", UriKind.Relative)));

The existing tools do not offer much value if inherited from. Their algorithms are private and substantial modification is not possible. New tools created from scratch however are encouraged. To see how to create a custom tool click here.

Range tools

All range tools have a value that can vary from a minimum to a maximum. The range tools are

  • ContrastTool
  • BrightnessTool
  • HueTool
  • SaturationTool
  • SharpenTool

To inspect the value range of each tool, look at the values returned by the Min and Max properties at run-time. If a value is passed to the Value property that is outside this range, it will be quietly coerced to fit in.

CropTool

CropTool is used to get a smaller sub image from a given image. CropTool has a collection called SupportedRatios which accepts objects of type CropToolRatio. Each ratio represents the aspect ratio of the selected sub image. Also, a ratio can be toggled. For example if a ratio is set as 4:3 it can be flipped to 3:4 with the help of the IsFlipped property.

CopyXAML
<telerikImageEditor:RadImageEditor>
  <telerikImageEditor:CropTool>
    <telerikImageEditor:CropToolRatio Width="1"
                                     Height="1"/>
    <telerikImageEditor:CropToolRatio Width="4"
                                     Height="3"/>
    <telerikImageEditor:CropToolRatio Width="6"
                                     Height="4"/>
    <telerikImageEditor:CropToolRatio Width="7"
                                     Height="5"/>
    <telerikImageEditor:CropToolRatio Width="10"
                                     Height="8"/>
    <telerikImageEditor:CropToolRatio Width="16"
                                     Height="9"/>

  </telerikImageEditor:CropTool>
</telerikImageEditor:RadImageEditor>

The ability to resize the crop gizmo for a given ratio is controlled with ratio's CanResize property.

To use CropTool as a stand alone tool, developers have to set the CropRect property. CropRect specifies the sub image that is to be extracted in normalized coordinates, that is, X, Y, Width and Height are all values in the [0,1] range. The reason for this is that when the end-user selects a crop rect with the crop gizmo, he/she is working with a preview image that is, in most cases, a lot smaller than the actual image. The normalized coordinates allow the selected crop rect, to be easily mapped to the size of the actual image. For example:

CopyC#
CropTool cropTool = new CropTool();
cropTool.CropRect = new System.Windows.Rect(0.25, 0.25, 0.5, 0.5);
ImageSource croppedImage = await cropTool.Apply(new BitmapImage(new Uri("myImage.png", UriKind.Relative)));

ResizeTool

The resize tool can resize an image uniformly or non-uniformly. The tool is controlled with its Width, Height, IsUniform properties. When the IsUniform property is set to true, setting the Width property will also automatically modify the Height property and vice versa in order to keep the aspect ratio of the image. Here is an example of how to use ResizeTool:

CopyC#
ResizeTool resize = new ResizeTool();
resize.Width = 200;
resize.Height = 150;

ImageSource resizedImage = await resize.Apply(new BitmapImage(new Uri("myImage.jpg", UriKind.Relative)));

OrientationTool

The OrientationTool class can be used to flip an image horizontally or vertically.

CopyC#
OrientationTool orientation = new OrientationTool();
orientation.IsFlippedHorizontal = true;

ImageSource flippedImage = await orientation.Apply(new BitmapImage(new Uri("myImage.jpg", UriKind.Relative)));

ColorEffectsTool

The color effects can be used to convert an image to greyscale, to invert its colors or to auto fix the colors. Between the IsColorFixed, IsGreyscale and IsColorInverted properties, only one can be set to true at a given time. Setting one of these properties to true, automatically sets the others to false, like radio buttons.

CopyC#
ColorEffectsTool colorEffects = new ColorEffectsTool();
colorEffects.IsGreyscale = true;

ImageSource blackWhiteImage = await colorEffects.Apply(new BitmapImage(new Uri("myImage.jpg", UriKind.Relative)));