Introduction

Hello everyone, I am pleased to announce our Q2 2013 Beta is now live. Included in this release is a new feature that provides Async support in RadMessageBox and a new control, ImageEditor. So before we start exploring the new features, you can download the beta here. You will need to log-in, and after the “Download RadControls for Windows Phone 8” page has been loaded, then you will need to scroll down and find the Beta section. There you’ll find the following downloads:

  • Q2 2013 Beta - Automatic installation
  • Q2 2013 Beta - Manual installation

Let’s go ahead and dive into each of these controls.

Async Support in RadMessageBox

RadMessageBox now utilizes the async/await pattern by providing async overloads for the Show method.

Previously, to show a Message Box in your WP app, using our RadMessageBox you had to:

  1. Call the Show() Method
  2. Handle the user’s response by providing a callback that will be invoked when the message box closes.

The disadvantage of using this is that your logic of handling the user’s response had to be placed in that callback message as shown in Listing 1.

private void rmbOldWay_Click(object sender, RoutedEventArgs e)
{
    RadMessageBox.Show("Title of RadMessageBox",
        MessageBoxButtons.YesNo, "Your Message", null, false, false,
        HorizontalAlignment.Stretch, VerticalAlignment.Stretch,
 new Action<MessageBoxClosedEventArgs>(OnMessageClosed));
}
 
private void OnMessageClosed(MessageBoxClosedEventArgs e)
{
 if (e.Result == DialogResult.OK)
    {
 // do something
    }
 else
    {
 // do something else
    }
}

Listing 1: The old way of showing a RadMessageBox Dialog.

Note: If you try to use the Show() method in the current beta release, you will see that method is marked obsolete with green squiggly lines in Visual Studio.

Using the Async/Await Keywords with RadMessageBox

The same code written with the Async and Await Keywords looks like the following shown in Listing 2.

private async void rmbNewWay_Click(object sender, RoutedEventArgs e)
{
    var userResponse = await RadMessageBox.ShowAsync("Title of RadMessageBox",
        MessageBoxButtons.YesNo, "Your Message", null, false, false,
        HorizontalAlignment.Stretch, VerticalAlignment.Stretch);
 
 if (userResponse.Result == DialogResult.OK)
    {
 // do something
    }
 else
    {
 // do something else
    }
 
}

Listing 2: Using the async and await keywords with a RadMessageBox Dialog.

This method is marked async and the response uses the await keyword. The new method to display a message box is called, ShowAsync(). This code is cleaner and enhances the overall responsiveness of your apps. It also helps eliminate performance bottlenecks.

Introducing RadImageEditor

If you are a developer working on a productivity or entertainment app, you may need to allow your users to manipulate images inside your app and save them. RadImageEditor will provide this functionality as well as more advanced features like automatically color correction -levels, HSV editing, invert colors, various effects, etc. The current list of features included in the control are:

  • Blur
  • Contrast / Histogram equalization
  • HSL and HSV Editing
  • Sharpen
  • Brightness
  • Invert Colors
  • Flip
  • Crop
  • Resize
  • Convert to Grayscale

Let’s take a look at several of these features and how you may implement them into your next app. But before, we begin let’s setup a basic layout that we will reuse. Switch over to your MainPage.xaml file and add the following code snippet in:

<Grid x:Name="LayoutRoot">
 <Grid>
 <Grid.RowDefinitions>
 <RowDefinition Height="*" />
 <RowDefinition Height="Auto" />
 </Grid.RowDefinitions>
 <telerik:RadImageEditor x:Name="imageEditor" Source="Assets/bike.jpg" />
 <StackPanel Grid.Row="1">
 <TextBlock Text="Blur" Margin="10"/>
 <Slider Grid.Row="1" Minimum="0" Maximum="1" SmallChange="0.1" Value="0"
 ValueChanged="Slider_ValueChanged_1" />
 
 </StackPanel>
 </Grid>
</Grid>

We simply have declared a RadImageEditor instance and gave it a name along with a Source file. We have also added a Slider control where you can see the change take effect real-time.

Blur

Using the blur effect with the following code snippet, we can achieve the following shown in Figure 1:

private void Slider_ValueChanged_1(object sender, RoutedPropertyChangedEventArgs<double> e)
{
 this.imageEditor.Blur=e.NewValue;
}

 

12

3

Figure 1: The blur effect at 0, 0.5 and 1.

Brightness

Using the brightness effect with the following code snippet, we can achieve the following shown in Figure 2:

private void Slider_ValueChanged_1(object sender, RoutedPropertyChangedEventArgs<double> e)
{
 this.imageEditor.Brightness = e.NewValue;
}

 

45

6

Figure 2: The brightness effect at 0, 0.5 and 1.

HSL

Using the HSL effect with the following code snippet, we can achieve the following shown in Figure 3:

private void Slider_ValueChanged_1(object sender, RoutedPropertyChangedEventArgs<double> e)
{
 this.imageEditor.Hsl=new HslColor()
            {
                S=null,
                L=null,
                H=e.NewValue
            };
 
}

 

78

9

Figure 3: The HSL effect at 0, 50 and 100.

Sharpen and Contrast

Sharpen and contrast look like the following shown in Figure 4 & 5:

1011

Figure 4 and 5: The Sharpen and Contrast effect at 50 %.

This can also be achieved with just toggling the Contrast and Sharpen property.

Other Notable Effects

Other notable effects are Inverting Colors, Converting an Image to GreyScale, Flipping the Image horizontally or vertically, which can simply be turned on or off through the exposed properties.

1213

1415

Crop and Resize

You may also Crop or Resize the Image as shown below:

16

This crops the picture to the top left corner and can be accomplished with the following code:

imageEditor.CropRect = new Rect(new Point(), new Size(200, 250));

Resizing the image is also very straight forward and looks like the following:

17

This code snippet resizes the picture so that is 300 pixels width and height.

imageEditor.ImageSize = new Size(300, 300);

But wait, there is more! Cloud Data Sync with Offline Support Coming Soon!

So, what exactly is "Cloud Data Sync with Offline Support?" Suppose you create an app that needs the ability to work offline as well as online without having to manage a local database and developing a reliable synchronization mechanism. Cloud Data Sync with offline support enables developers to build disconnected apps with ease. You can build mobile apps that are fully functional in both (online and offline) modes and any data changes made while the app is offline are saved and once an internet connection is restored, the data is automatically synced to the server. This provides great customer value and allows you to focus more on the core functionality of your app.

More details coming soon!

Conclusion

We looked at a new control today called ImageEditor that boasts a number of new features as well as async support in RadMessageBox. This example will hopefully get you started in thinking of new and unique ways to use these controls in your apps. As a reminder, we also have design templates that will help you accomplish building your app even faster and can be found by reading this blog post. Also, don’t forget the official controls come out on June 12th, so mark your calendars. If you have any questions or comments, then please leave them below.

Michael Crump (@mbcrump)

WP8_Trial_10_2013_Beta (3)


MichaelCrump
About the Author

Michael Crump

is a Microsoft MVP, Pluralsight and MSDN author as well as an international speaker. He works at Telerik with a focus on everything mobile.  You can follow him on Twitter at @mbcrump or keep up with his various blogs by visiting his Telerik Blog or his Personal Blog.

Related Posts

Comments