Applies to: Windows Phone 8 only
Windows Phone 8 supports phones that have WVGA, WXGA, and 720p resolutions. This differs from Windows Phone OS 7.1, which supported only WVGA resolution. This topic explains the resolutions supported in Windows Phone 8 and describes how to develop apps that target phones with different resolutions.
This topic contains the following sections.
The following table describes the resolutions and aspect ratios that are supported in Windows Phone 8.
Delta from Windows Phone OS 7.1
480 × 800
None. This is the only supported resolution for Windows Phone OS 7.1.
480 × 800
768 × 1280
480 × 800
720 × 1280
1.5x scale, 80 pixels taller (53 pixels, after scaling)
480 × 853
The following illustration shows how a screen appears in phones that have different resolutions.
Because all Windows Phone OS 7.1 phones have the same resolution, you can lay out your content so that it looks good on one Windows Phone OS 7.1 phone, and know that it will look good on all Windows Phone OS 7.1 phones. You don’t have to consider the internals of how each control stretches and flows.
In Windows Phone 8, you have to lay out controls and other UI elements to look good in each of the supported aspect ratios. Since Windows Phone 8 phones can have one of two aspect ratios – 15:9 or 16:9 - controls laid out for one aspect ratio may be laid out unexpectedly at the other aspect ratio.
To make a page render correctly on phones with WVGA, WXGA, and 720p resolutions, don’t hard-code the height and width or the margins of the controls. After you drag and drop controls from the Toolbox, delete or carefully test the Margins that were added automatically.
To create an adaptable layout, you can use a container like the Grid control. Instead of hard-coding the height and width of the controls, place the controls in a grid and use * and the Auto value to set the height and width of its rows and columns. This way, the app stretches or shrinks the controls to fit the height and width of the user’s phone. If you hard-code the height and width of controls, the layout does not adapt to other resolutions.
The following XAML shows the code for a layout that uses the Grid control to implement these guidelines.
This app has a dynamic layout on WVGA, WXGA and 720p. The output box is the same size on WVGA and WXGA phones because the Height property is set to Auto, and the buttons shrink evenly to fit the rest of the available space. At the 720p resolution, the buttons will be slightly higher than at WVGA and WXGA resolutions.
You can set the MinHeight and MaxHeight properties to set minimum height and maximum height. It’s important to remember that any element on the screen under 8mm in any direction becomes hard for the user to press reliably. You can use the MinHeight properties and MinWidth to make sure that interactive elements don’t shrink more than expected. You can combine these properties to allow a layout to shrink for WVGA resolution, but not to stretch for 720p resolution.
Assets such as graphics, video, audio, and icons make up a large percentage of an app’s size. Including assets for all resolutions in your app uses a lot of space in your app. For most apps, we recommend that you include only WXGA assets. WXGA assets have the highest quality, and they automatically scale to work well for other resolutions.
Because of the aspect ratio difference between WXGA/WVGA and 720p resolutions, in some cases you might want to include unique background images for different resolutions in your app. When you want to include images for all supported resolutions in your app, use the following steps to detect device resolution, and then load the relevant image at run time.
To load resolution-dependent images at runtime
In your project file, add the images for WVGA, WXGA and 720p resolutions. In this example, we name the files MyImage.screen-wvga.png, MyImage.screen-wxga.png, and MyImage.screen-720p.png.
Set the Copy to Output Directory property of the images to copy always.
Add a class named ResolutionHelper.cs to your project, and then copy and paste the following code into the new class.
The preceding class uses the ScaleFactor property to determine the resolution of the device.
Add a class named MultiResImageChooser.cs that contains the following code. This class uses theResolutionHelper.cs class created in the previous step to determine the resolution of the device. Then it returns a new BitmapImage created from the URI of the image that corresponds to the detected resolution.
In App.xaml, in the <Application> element, add the following xmlns namespace mapping.
In App.xaml, add the following application resource.
To display a splash screen for all resolutions, use a single image file named SplashScreenImage.jpg that is 768 × 1280. The phone automatically scales the image to the correct size.
If you want to provide pixel-perfect splash screens for all resolutions, you can add images with the following file names:
All splash screen images must be in the root folder of your app project.
For more info, see How to create a splash screen for Windows Phone.