Multi-resolution apps for Windows Phone 8
[ This article is for Windows Phone 8 developers. If you’re developing for Windows 10, see the latest documentation. ]
Windows Phone 8 Update 3 supports phones that have WVGA, WXGA, 720p, and 1080p resolutions. This differs from Windows Phone OS 7.1, which supported only WVGA resolution. This topic explains the resolutions supported in Windows Phone 8 Update 3 and describes how to develop apps that target phones with different resolutions.
For more info, see Taking Advantage of Large-Screen Windows Phones.
This topic contains the following sections.
- Supported resolutions
- Adapting your layout
- Resolution-dependent backgrounds and assets
- Splash screens
- Tile and app icons
- Related Topics
Supported resolutions
The following table describes the resolutions and aspect ratios that are supported in Windows Phone 8 Update 3.
Resolution |
Resolution |
Aspect ratio |
Delta from Windows Phone OS 7.1 |
Scaled resolution |
|---|---|---|---|---|
WVGA |
480 × 800 |
15:9 |
None. This is the only supported resolution for Windows Phone OS 7.1. |
480 × 800 |
WXGA |
768 × 1280 |
15:9 |
1.6x scale |
480 × 800 |
720p |
720 × 1280 |
16:9 |
1.5x scale, 80 pixels taller (53 pixels, after scaling) |
480 × 853 |
1080p |
1080 x 1920 |
16:9 |
1.5x scale, 80 pixels taller (53 pixels, after scaling) |
480 × 853 |
On a 1080p resolution screen, the ScaleFactor property will return 1.5, although a 2.25x scale is used internally by the OS.
The following illustration shows how a screen appears in phones that have different resolutions.
.png)
Adapting your layout
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 Update 3, you have to lay out controls and other UI elements to look good in each of the supported aspect ratios. Since Windows Phone 8 Update 3 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, 720p, and 1080p 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.
.gif "Important note") Important Note: |
|---|
Be sure to test your app on each aspect resolution (15:9 and 16:9). Testing at each pixel resolution isn’t strictly necessary unless you have different image assets for each resolution. |
The following XAML shows the code for a layout that uses the Grid control to implement these guidelines.
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="4"
BorderThickness="3" BorderBrush="White" Padding="4"
Margin="12">
<TextBlock Text="423 + 61 = 484" FontSize="35" Padding="6" Height="69" />
</Border>
<Button Grid.Row="1" Grid.Column="0" Content="Clear" />
<Button Grid.Row="1" Grid.Column="1" Content="/" />
<Button Grid.Row="1" Grid.Column="2" Content="*" />
<Button Grid.Row="1" Grid.Column="3" Content="-" />
<Button Grid.Row="2" Grid.Column="0" Content="7" />
<Button Grid.Row="2" Grid.Column="1" Content="8" />
<Button Grid.Row="2" Grid.Column="2" Content="9" />
<Button Grid.Row="2" Grid.Column="3" Content="+" Grid.RowSpan="2" />
<Button Grid.Row="3" Grid.Column="0" Content="4" />
<Button Grid.Row="3" Grid.Column="1" Content="5" />
<Button Grid.Row="3" Grid.Column="2" Content="6" />
<Button Grid.Row="4" Grid.Column="0" Content="1" />
<Button Grid.Row="4" Grid.Column="1" Content="2" />
<Button Grid.Row="4" Grid.Column="2" Content="3" />
<Button Grid.Row="4" Grid.Column="3" Content="=" Grid.RowSpan="2" />
<Button Grid.Row="5" Grid.Column="0" Content="0" Grid.ColumnSpan="2" />
<Button Grid.Row="5" Grid.Column="2" Content="." />
</Grid>
This app has a dynamic layout on WVGA, WXGA, 720p, and 1080p. 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 720p and 1080p resolutions, 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 higher resolutions.
Resolution-dependent backgrounds and assets
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/1080p 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.
public enum Resolutions { WVGA, WXGA, HD }; public static class ResolutionHelper { private static bool IsWvga { get { return App.Current.Host.Content.ScaleFactor == 100; } } private static bool IsWxga { get { return App.Current.Host.Content.ScaleFactor == 160; } } private static bool IsHD { get { return App.Current.Host.Content.ScaleFactor == 150; } } public static Resolutions CurrentResolution { get { if (IsWvga) return Resolutions.WVGA; else if (IsWxga) return Resolutions.WXGA; else if (IsHD) return Resolutions.HD; else throw new InvalidOperationException("Unknown resolution"); } } }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 the ResolutionHelper.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.
using System.Windows.Media.Imaging; public class MultiResImageChooserUri { public Uri BestResolutionImage { get { switch (ResolutionHelper.CurrentResolution) { case Resolutions.HD: return new Uri("Assets/MyImage.screen-720p.jpg", UriKind.Relative); case Resolutions.WXGA: return new Uri("Assets/MyImage.screen-wxga.jpg", UriKind.Relative); case Resolutions.WVGA: return new Uri("Assets/MyImage.screen-wvga.jpg", UriKind.Relative); default: throw new InvalidOperationException("Unknown resolution type"); } } } }In MainPage.xaml, add an Image element and bind its Source property to the Uri returned by the MultiResImageChooser.cs class.
<!--ContentPanel - place additional content here--> <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <Image Source="{Binding BestResolutionImage, Source={StaticResource MultiResImageChooser}}"/> </Grid>In App.xaml, in the <Application> element, add the following xmlns namespace mapping.
xmlns:h="clr-namespace:MultiResSnippet"In App.xaml, add the following application resource.
<!--Application Resources--> <Application.Resources> <h:MultiResImageChooser x:Key="MultiResImageChooser"/> </Application.Resources>
Splash screens
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:
SplashScreenImage.Screen-WVGA.jpg
SplashScreenImage.Screen-WXGA.jpg
SplashScreenImage.Screen-720p.jpg
Windows Phone 8 Update 3 will default to using the 720p splash screen file on a 1080p phone.
| Important Note: |
|---|
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.
Tile and app icons
For Tile and app icons, you have to include images only for WXGA resolution. The phone automatically scales the images to the correct size for WVGA, 720p, and 1080p screens. For more information about Tiles and their sizes, see Tiles for Windows Phone 8.