Image editor for Windows Phone - Q2 2013

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:

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.

I've just noticed that the SharpenTool doesn't provide the Apply method.

Error 1 'Telerik.Windows.Controls.SharpenTool' does not contain a definition for 'Apply' and no extension method 'Apply' accepting a first argument of type 'Telerik.Windows.Controls.SharpenTool' could be found (are you missing a using directive or an assembly reference?)

It looks like you need to correct the source code in the end of article. Or am I missed something (extensions)?

Viktor
11 Jun 2013

Hi Eugene, you are currently exploring the beta version of the image editor. The final API will differ from the one available right now. You can use the beta to see what features are available and whether they work as you'd expect. APIs and behaviors are subject to change (albeit slightly).

Eugene Astafiev
11 Jun 2013

Hi Viktor,

So, why don't you publish the code which can be applied for beta? What can I try if you don't show any applied code (or "faked" code)?

Hi guys,
After the official Q2 2013 release, which will be out by the end of the week, we'll be working on porting the ImageEditor control to WP7. I've created an item in our feedback portal - http://feedback.telerik.com/Project/112/Feedback/Details/50905-image-editor-for-wp7
It would be great if you can cast your vote. In addition, those of you who want to receive early developer bits of the WP7 ImageEditor, please leave your email in the comments. We'll send you preview bits as soon as we have something to share. Thanks!

Thank you for re-considering your intentions regarding Windows Phone 7. I would be happy to be the one of those who can install and examine new controls and classes. So, please add my e-mail to the list of beta testers :)

Tom Walker
11 Jun 2013

I'm looking forward to trying out this control for a WP8 app idea. I'm curious to try out the cropping feature.

Can I suggest for the next update to image control is to add the ability to add text to the image.

Alessandro Del Sole
20 Sep 2013

This is great stuff indeed! Any chances to localize the control into different languages? thanks!

Just got it downloaded and am loving the imageEidtor. Quick question: is there a way of add custom filters to the slider at the bottom, and also is there a control for a default slider so that I can add my own icons for filtering the images.

One more talk just awesome post. I really enjoy for it.thank you for share with us.and this blog is very enjoyble for us.good bye.

Nguyễn Cường
23 Apr 2014

Hello.
I'm a dev WP and I using your tool, i feeling it very useful.
But I have a problem when i use Image Editor tool. Default, it save images,when it has been edited in List. But in my case,i wish it save one image edited. But i don't know what i to do.
Pls,help me. it's very important with me.
Thank so much