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.
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.
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.
WVGA (Wide Video Graphics Array)
Windows Phone 7.1 Devices only (Samsung Focus, HTC Titan, etc.)
WXGA (Wide eXtended Graphics Array)
Windows Phone 8 Devices Only (Nokia Lumia 920)
Windows Phone 8 Devices Only (HTC 8X)
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.
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!
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:
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.
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.
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:
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.
Your Solution Explorer should look like the following now:
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:
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.
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.
WVGA 480x1280 Image Used
WXGA 768x1280 Image Used
720P 720x1280 Image Used
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)
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.
Subscribe to be the first to get our expert-written articles and tutorials for developers!
All fields are required