Q2 2011 Xaml Tools - RadImageEditor

In our last post we were discussing the importance of good tools to developers and how they help us to perform tasks like testing, profiling, decompiling, and building applications more quickly.  Today I will take us a little further down this path as I explore one of the new ‘tools’ that we are offering in our Q2 2011 Xaml release – RadImageEditor.

A Quick Note

I had a few questions directed my way in regards to a line from the last post:

“…as well as providing controls that are out-of-the-box “tools” to bring enhanced functionality to your applications.”

Let me explain this a little further, as this is the entire topic behind this series and it somehow got buried in my line of thought last time.  At Telerik, we have been working with the WPF and Silverlight platforms since they were released and have a significant amount of experience in working with the Xaml platforms.  We have built rich controls like RadGridView, RadChart, and RadScheduleView, just to name a few, that help developers to build richer applications faster in modern development environments.  Our controls matured with these technologies, making improvements based on both customer requirements and new functionality available as the frameworks have evolved.

So what do you do when you have an industry-leading suite that has several years’ worth of maturity under its belt?  You enhance it further, both with new controls and with this new class of controls that I’m referring to as “tools”.  We’ve done the heavy lifting via architecture, design, testing, and ease-of-implementation, allowing you to drop these “tools” into your application and instantly add significant rich functionality to your application, often without writing a single line of code outside of the Xaml needed to get it to display. 

Don’t believe me?   Read on!

Let’s Edit Some Images

When working with RadRichTextBox, many customers mentioned to us the need for a few features that would greatly enhance the Word-like experience and help to make the control a complete rich text editing experience.  I’ll talk more about RadRichTextBox and the significant enhancements it is seeing in Q2 (including ImageEditor integration) later this week, but today I want to focus on the new RadImageEditor tool and how easy it is to implement in your applications. 

The team here has developed RadImageEditor with a command-based architecture that allows you to plug in as many or as few options as you would like for your end users, giving you complete control over how this new tool will be implemented in your application.  To start, we add the new RadImageEditorUI to our Xaml:

…and can instantly see the results in our designer window:

If I ran this right now, I could open images, zoom in and out, and save them back to my desktop, all with only having written a line of Xaml. 

Adding Functionality

Once we have the ability to load images into the control, the need arises to be able to do something with that image.  To get started on this, I’m actually going to direct your attention to the Q2 2011 Beta Demos so you (and I) can grab a bit of code that the team has already provided us with in the First Look demo.  You can access the code via the ‘Code’ link in the upper-right corner of the example, then select Example.Xaml from the list over on the left to get to the page we need.  We first need to set two namespaces in addition to the standard Telerik Xaml namespace:

Once those are in place, scroll through the demo code and you’ll be able to see the structure of how RadImageEditor is setup.  The basic structure for commands (as far as Xaml is concerned) is:

• ToolSections
  • ToolSection
    • ToolItem (contains ImageKey, Text, Command)
      • CommandParameter (if necessary)
        • Tool

Breaking this down a bit, a Section will hold a group of related tools and a ToolItem represents functionality that you want to perform.  If the ToolItem performs some more complex functionality that is configurable by the user, we will additionally have a CommandParameter that links to a Tool which will display within the ImageEditorUI.  As an example, here is the Rotate 90 Degrees Counter-ClockWise  (doesn’t require additional input) and the Rounded Corners ToolItems, showing the difference in how they will be represented in code:

To add all of the currently-available functionality to our instance of the RadImageEditor tool, we can simply copy and paste everything between the <telerik:RadImageEditorUI> opening and closing tags and drop that into our application.  The end result is seen below when run:

Now we can resize, flip, modify colors, crop, and more, right within our Silverlight and WPF applications. 

Wrapping Up

Normally I’ll include a project download with projects like this, but since this tool is so easy to use as well as implement, simply point your browser to the First Look demo, copy the three namespaces and the contents of the RadImageEditorUI tag to your app, and you’re good to go! 

Hopefully you can see how an easy to use ‘tool’ like RadImageEditor is a great addition to your Telerik Xaml toolbox and just how simple our team is making it to bring rich functionality to your applications.  Stay tuned for our next post in this series where we explore the new features of our rich text editing tool, RadRichTextBox, in-depth.