Telerik blogs
End-users love taking photos with their smart phones. They also like editing these photos judging by the amount of apps related to image editing in the marketplace. Couple that with the ever present need for a faster development cycle and we have an opportunity to expand our controls suite even more. With the Q2 2013 release we will include RadImageEditor in our controls for Windows Phone.

The following operations will be supported in the first version:
  • crop
  • resize
  • contrast
  • brightness
  • auto fix colors
  • blur
  • sharpen
  • hue/saturation editing
  • flip
  • convert to greyscale
  • invert colors
You can already check it out, the beta is available on our website.
Log-in with your account and after the “Download RadControls for Windows Phone 8” page has been loaded you have to scroll down to the Beta section:
Q2 2013 Beta - Automatic installation
Q2 2013 Beta - Manual installation.


On the off chance that you decided to continue reading, here’s a little more detailed breakdown of some features:

The User Interface

The UI of RadImageEditor is composed of a sort of home screen which contains all the available tools and allows the user to save the current state of the image or to discard it. The tools are not limited in any way, as much tools can be added if necessary. Developers can even create their own tools with their own UI and algorithms that can be plugged in seamlessly in the default UI infrastructure which will a blog post of its own.



Each tool has its own UI that is displayed when the tool is selected. For example here is the contrast tool editing the contrast of an image:


Also, notice the red icon next at the bottom. This is the before/after feature. When toggled it displays a vertical line which separates the edited image from the original image. Users can slide left or right to compare the differences.

Another interesting tool is CropTool. It has a completely different UI from ContrastTool. 
On the screenshot below you can see a horizontal strip of items which represent pre-defined aspect ratios. Also notice the white crop gizmo that the user can stretch and move to specify an arbitrary selection rectangle:



Show me the code

Apart from these high level features the image editor also offers a very flexible programming model. The image editor itself is designed to be used like this:
<telerikImageEditor:RadImageEditor Source="SomeImage.jpg">
    <telerikImageEditor:SharpenTool/>
    <telerikImageEditor:BrightnessTool/>
    <telerikImageEditor:ContrastTool/>
</telerikImageEditor:RadImageEditor>

Any number of tools can be added to the image editor and it is that simple.
 
You will also be able to take any single component and use it separately. You want to simply crop images in your app? Just use the CropTool class. You want to blur something? Use SharpenTool, don’t bother with the whole editor. You want that before/after feature? Use the BeforeAfterControl class etc. For example here is how the Sharpen tool will be used in the official release:
SharpenTool sharpen = new SharpenTool();
sharpen.Value = 1;
WriteableBitmap sharpImage = await sharpen.Apply(new BitmapImage(new Uri("myImage.jpg", UriKind.Relative)));
note: the above code snippet does not work with with the Beta bits

You will also be able to create a different UI for each component if necessary, minimum hassle guaranteed. All functionality of the image editor will be clearly separated into reusable view models and mini controls that you can directly use in your app. The architecture level features will be described in detail in our online help.

If you need a specific feature added to the image editor or you’d like something changed for the existing features now would be a great time to drop a message in the forums
We hope you find the new component useful given that the photo capturing capabilities of smartphones are so popular. Enjoy.


About the Author

Viktor Skarlatov

Software Developer,
Windows Phone Team

Comments

Comments are disabled in preview mode.