Multi-Resolution support in Windows Phone 8 Made Easy

Introduction

Hello again!

Now that the Windows Phone 8 controls from Telerik have been released and we’ve taken a look at several wireframes for our Windows 8 / Windows Phone 8 app that we will be building, it’s time to continue our look at how these controls will be beneficial in our Conference Buddy app as well as your own app.

Let’s begin with a few new controls specific to Windows Phone 8.

• Speech Recognition – Was covered earlier and it allows your end-users to navigate and interact with your app using their voice. This is a very powerful control and I would encourage you to review the blog post I wrote on it as well as the Telerik Picture Gallery sample app.
• MultiResolutionImage – Is the focus of today’s post and it makes it easy for Windows Phone 8 developers to support images in the various screen resolutions supported in Windows Phone 8. This is going to be extremely important to us as we will be using images in our Conference Buddy app for displaying new events.
• DataForms – This new component improved in SP1, allows you to automatically generate the UI for your input forms, with support for validation and custom layouts. We will be covering this in more depth in a future post as it is a vital component in our Conference Buddy app.
• Along with many others detailed here.

As stated earlier, in this post we are going to explore the MultiResolutionImage control provided by Telerik that you can grab now from your account.

Multi-Resolution Support in Windows Phone 8

Before we get started, let’s take a look at a list of screen resolutions supported by Windows Phone 8. Pay special attention to the resolution field as we will be coming back to this later.

After glancing at this chart, we can see three resolutions are supported by Windows Phone 8. In the past, users didn’t have to worry about this because all devices were running at 480*800. So, you could specify width/height attributes on Images without fear of the Image being stretch or out of place on a physical device.

Now with Windows Phone 8, our users can be running our app with 3 different types of resolutions. Because of the aspect ratio differences between the three resolutions, you might want to include unique images for all supported resolutions in your app. But first, you will need to detect the device resolution and load the relevant image at run time.

Let’s stop for a moment and take a look at an early app design preview for our Conference Buddy app.

From this early app design preview, you may notice that when we create a new event, it asks us to select an image. Once that image is selected, then it needs to scale to the appropriate resolution based upon the device the user is using. So, how exactly do you do that? Let’s compare and contrast the built-in way vs. the RadControls for WP8 way!

So how are users doing it without RadControls for Windows Phone 8?

Before we take a look at how we implement this in Telerik’s MultiResolutionImage control, let’s look at how current users are doing it.

They typically create a class called ResolutionHelper.cs as shown below:

   1: public enum Resolutions { WVGA, WXGA, HD720p };

   2:  

   3: public static class ResolutionHelper

   4: {

   5: private static bool IsWvga

   6:    {

   7:       get

   8:       {

   9: return App.Current.Host.Content.ScaleFactor == 100;

  10:       }

  11:    }

  12:  

  13: private static bool IsWxga

  14:    {

  15:       get 

  16:       { 

  17: return App.Current.Host.Content.ScaleFactor == 160; 

  18:       }

  19:    }

  20: 

  21: private static bool Is720p

  22:    {

  23:       get 

  24:       { 

  25: return App.Current.Host.Content.ScaleFactor == 150; 

  26:       }

  27:    }

  28:  

  29: public static Resolutions CurrentResolution

  30:    {

  31:       get

  32:       {

  33: if (IsWvga) return Resolutions.WVGA;

  34: else if (IsWxga) return Resolutions.WXGA;

  35: else if (Is720p) return Resolutions.HD720p;

  36: else throw new InvalidOperationException("Unknown resolution");

  37:       }

  38:    }

  39: }

This class supports the three supported resolutions, but the key is the Scale Factor which simply gets the value by which the application content area scales its content. If the Scale Factor is 100 then it is WVGA, 150 is 720p, 160 then WXGA.

They can then wrap this inside of a switch statement and return the proper image depending on the resolution used by the device.

   1: switch (ResolutionHelper.CurrentResolution)

   2:      {

   3: case Resolutions.HD720p:

   4: return new Uri("Assets/MyImage.screen-720p.jpg", UriKind.Relative);

   5: case Resolutions.WXGA:

   6: return new Uri("Assets/MyImage.screen-wxga.jpg", UriKind.Relative);

   7: case Resolutions.WVGA:

   8: return new Uri("Assets/MyImage.screen-wvga.jpg", UriKind.Relative);

   9: default:

  10: throw new InvalidOperationException("Unknown resolution type");

  11:      }

In this instance, we can see that they created three images and placed them inside of the Assets folder, they could now set the Image Source property depending on the current resolution.

While this method works, it contains a lot of code that needs to be maintained and what if you have multiple images that you want to use? This is where Telerik RadControls for Windows Phone 8 comes in again and saves the day. No code-behind is necessary to maintain and a simple straightforward way of loading different images depending on the resolution.

Taking a look at the Telerik MultiResolutionImage Control in RadControls for Windows Phone 8.

Now that we have seen what Microsoft provides out of the box, let’s examine how to implement using our control in our app.

After you obtain RadControls for Windows Phone 8 you are ready to get started.

Begin by creating a new VS2012 Windows Phone 8 project and adding references to:

• Telerik.Windows.Controls.Primitives
• Telerik.Windows.Core

We are going to use the RadMultiResolutionImage in this demo, so let’s begin by adding some images to our application. If you don’t have any images readily available, then download the sample project and use mine. We are going to create a folder called, “Images” in the current solution and add several images to this folder with the following name.

• Grass.Screen-WVGA.png - the image that will be used for the WVGA resolution (480x800)
• Grass.Screen-720p.png - the image that will be used for the 720p resolution (720x1280)
• Grass.Screen-WXGA.png - the image that will be used for the WXGA resolution (768x1280)

Your Solution Explorer should look like the following now:

Adding ONE line of XAML to MainPage.xaml to accomplish the same thing

Our UI is simply going to be the RadMultiResolutionImage control taking up the entire screen. Let’s go ahead and add the proper XML namespaces as shown below:

   1: xmlns:telerikPrimitives="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Primitives"

This is all that is needed to allow us to reference this control in XAML.

Let’s go ahead now and replace the existing Grid with the following code snippet.

   1: <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

   2: <telerikPrimitives:RadMultiResolutionImage x:Name="multiImage" Source="Images/Grass.jpg"/>

   3: </Grid> 

In this sample, we are adding a RadMultiResolutionImage control and setting its Source to Images/Grass.jpg.

You may be thinking at this point, but we don’t’ have an image named Grass.jpg in the Images folder.

This shows the power of using this control, it simply looks in the Images folder with images starting with “Grass” and uses them according to whatever device the current user is running. No code left over to manage and if we wanted multiple images with this same functionality, then we just create a new instance of this control in XAML as shown earlier. We can easily test this by using the various emulators included in the Windows Phone 8 SDK. Of course, you could see this better on an actual device, but this shows the proper images are used according to the device the application is running on.

Conclusion

We have seen with just ONE line of XAML, Telerik’s RadControls for Windows 8 takes care of the new resolutions supported by Windows Phone 8 with assets such as images. While Windows Phone 8 is brand new, we are already involved in making your life easier developing new Windows Phone 8 applications.

We strive to be number 1 for Windows Phone 8, but we need your help. What can we do to make things better? What controls/features would you like included in the suite. So feel free to drop a comment below or contact me on twitter. Don’t forget that the source code for this sample project is available for download as well.

Before I go, I’d like to remind you to join the Nokia premium developer program to get RadControls for Windows Phone for free. They also have a vast variety of resources available to help you get your next app into the marketplace.

Thanks for reading!

-Michael Crump (@mbcrump)