Create a resolution-adaptive Windows Phone 8 application

Create a resolution-adaptive Windows Phone 8 application

1 Introduction

    The Windows Phone 7 platform only supports devices with WVGA resolution (480*800), which is advantageous for the UI design of the application, because designers do not need to consider the impact of multi-resolution on the layout of UI controls. However, the Windows Phone 8 platform broke this situation and supports three resolutions, namely WVGA, WXGA (768*1280) and 720p (720*1280). The question that follows is, how should developers deal with the impact of multi-resolution on applications? This seems to bring us back to the multi-resolution era of Windows Mobile. At that time, our response was to use the Docking and Anchoring properties of the control, or use native code to create Orientation-Aware and Resolution-Aware applications. In fact, on the Windows Phone 8 platform, the way we deal with it is similar.

2. Resolution comparison

    The resolutions supported by Windows Phone 8 and Windows Phone 7 platforms are shown in the following table:




Windows Phone 7

Windows Phone 8


480 × 800


stand by

stand by


768 × 1280


not support

stand by


720 × 1280


not support

stand by

Table 1: Resolution comparison between Windows Phone 7 and Windows Phone 8

    Figure 1 below shows the rendering of the same page on three different resolution devices. Note that Figure 1 takes the height of 640 as the reference, and scales the Start pages of the three resolutions in equal proportions.

Figure 1: Start page of three resolution devices

3. Control adaptive layout

    From the perspective of the screen ratio, Windows Phone 8 supports 15:9 and 16:9 ratios, so the appearance and layout of the controls will show different effects at these two resolutions. In order to make the control display a proper appearance under devices with different resolutions, developers should not set fixed height and width values ​​when designing the XAML layout. For example, in order to create an adaptive control layout interface, developers can use a Grid-like container, put other controls into the container, and set the height and width values ​​of its rows and columns to "*" and "Auto". In this way, the application will adaptively stretch the UI interface elements according to the actual resolution of the user device. On the contrary, if the width and height of the control are set to fixed values ​​in the code, the interface layout will not be adaptively adjusted according to the actual resolution of the device.

    The following XAML code is a good example:

  1: <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
  2: <Grid.RowDefinitions>
  3: <RowDefinition Height="Auto"/>
  4: <RowDefinition Height="*"/>
  5: <RowDefinition Height="*"/>
  6: <RowDefinition Height="*"/>
  7: <RowDefinition Height="*"/>
  8: <RowDefinition Height="*"/>
  9: </Grid.RowDefinitions>
 10: <Grid.ColumnDefinitions>
 11: <ColumnDefinition Width="*"/>
 12: <ColumnDefinition Width="*"/>
 13: <ColumnDefinition Width="*"/>
 14: <ColumnDefinition Width="*"/>
 15: </Grid.ColumnDefinitions>
 17: <Border Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="4"
 18: BorderThickness="3" BorderBrush="White" Padding="4" 
 19: Margin="12">
 20: <TextBlock Text="423 + 61 = 484" FontSize="35" Padding="6" Height="69"/>
 21: </Border>
 22: <Button Grid.Row="1" Grid.Column="0" Content="Clear"/>
 23: <Button Grid.Row="1" Grid.Column="1" Content="/"/>
 24: <Button Grid.Row="1" Grid.Column="2" Content="*"/>
 25: <Button Grid.Row="1" Grid.Column="3" Content="-"/>
 26: <Button Grid.Row="2" Grid.Column="0" Content="7"/>
 27: <Button Grid.Row="2" Grid.Column="1" Content="8"/>
 28: <Button Grid.Row="2" Grid.Column="2" Content="9"/>
 29: <Button Grid.Row="2" Grid.Column="3" Content="+" Grid.RowSpan="2"/>
 30: <Button Grid.Row="3" Grid.Column="0" Content="4"/>
 31: <Button Grid.Row="3" Grid.Column="1" Content="5"/>
 32: <Button Grid.Row="3" Grid.Column="2" Content="6"/>
 33: <Button Grid.Row="4" Grid.Column="0" Content="1"/>
 34: <Button Grid.Row="4" Grid.Column="1" Content="2"/>
 35: <Button Grid.Row="4" Grid.Column="2" Content="3"/>
 36: <Button Grid.Row="4" Grid.Column="3" Content="=" Grid.RowSpan="2"/>
 37: <Button Grid.Row="5" Grid.Column="0" Content="0" Grid.ColumnSpan="2"/>
 38: <Button Grid.Row="5" Grid.Column="2" Content="."/>
 39: </Grid>

    The XAML code is shown in Figure 2 below on devices with three different resolutions:

Figure 2: Application program interface of three resolution devices

    From the figure, we can find that in the WXGA and WVGA device interfaces, the proportions of the controls are the same, while on the 720p resolution interface, the proportions of the controls are adjusted adaptively. In addition, developers can use the MinHeight and MaxHeight properties to set the minimum height and maximum height of the control, because when the height is less than 8mm, the application may become unreliable when receiving user fingertip operations.

4. Create backgrounds and resources related to device resolution

    Application resources include files such as pictures, videos, audios, icons, etc., which often occupy a large proportion of the application space. If you say that there are three different resolution resources in an application, you can imagine the program space it occupies. In general, we recommend that developers only include WXGA resolution resource files in the project. Because the resolution of WXGA resolution resources is already very high, and it can be automatically scaled under WVGA and 720p resolutions.

    Of course, for the background image of the application, if the developer wants to use different background images for different resolutions, then we can use the following steps to dynamically load them.

(1) Add three different resolution pictures in the project, such as wvga.jpg, wxga. jpg and 720p. jpg.

(2) Modify the Copy to Output Directory attribute of the picture to copy always.

(3) Add a class file named ResolutionHelper.cs to the project, and add the following code:

  1: public enum Resolutions {WVGA, WXGA, HD720p };
  3: public static class ResolutionHelper
  4: {
  5: private static bool IsWvga
  6: {
  7: get
  8: {
  9: return App.Current.Host.Content.ScaleFactor == 100;
 13: private static bool IsWxga
 14: {
 15: get 
 16: { 
 17: return App.Current.Host.Content.ScaleFactor == 160; 
 21: private static bool Is720p
 22: {
 23: get 
 24: { 
 25: return App.Current.Host.Content.ScaleFactor == 150; 
 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");

This class uses the ScaleFactor property to obtain the resolution of the current device.

(4) Add a class file named MultiResImageChooser.cs and add the following code.

  1: using System.Windows.Media.Imaging;
  3: public class MultiResImageChooserUri
  4: {
  5: public Uri BestResolutionImage
  6: {
  7: get
  8: {
  9: switch (ResolutionHelper.CurrentResolution)
 10: {
 11: case Resolutions.HD720p:
 12: return new Uri("Assets/720p.jpg", UriKind.Relative);
 13: case Resolutions.WXGA:
 14: return new Uri("Assets/.jpg", UriKind.Relative);
 15: case Resolutions.WVGA:
 16: return new Uri("Assets/wvga.jpg", UriKind.Relative);
 17: default:
 18: throw new InvalidOperationException("Unknown resolution type");
 21: }
 23: }

This class uses the methods in ResolutionHelper.cs to get the resolution of the current device, and then returns the corresponding BitmapImage .

(5) In the xaml file of the main page, add the Image element and bind its Source property to the Uri returned by the MultiResImageChooser.cs class. code show as below:

  1: <!--ContentPanel-place additional content here-->
  2: <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
  3: <Image Source="{Binding BestResolutionImage, Source={StaticResource MultiResImageChooser}}"/>
  4: </Grid>

(6) In the <Application> element of the App.xaml file, add the following mapping of the xmlns namespace:

          xmlns:h="clr-namespace: MultiResolutionDemo "

(7) In the <Application.Resources> element of the App.xaml file, add:

  1: <!--Application Resources-->
  2: <Application.Resources>
  3: <h:MultiResImageChooser x:Key="MultiResImageChooser"/>
  4: </Application.Resources>

The XAML code is shown in Figure 3 below on devices with three different resolutions:

Figure 3: Application background of three resolution devices

5. Create application splash screen related to device resolution

    The application splash screen (also called splash screen) is the picture screen that the application presents to the user during this period of time after the application is started and before the first page is displayed. It has two important functions: one is to remind the user that the application is in the process of starting, and the other is to display specific information such as trademarks or logos.

    Generally speaking, we can use a WXGA resolution picture (768 x 1280) as the splash screen, because for the other two resolution devices (WVGA and 720p), the application will automatically stretch the picture. Make it fit this screen.

    If we want to set different splash screens for different devices, then we can add three jpg images with corresponding resolutions to the application. Note that they need to be added in the root directory of the application, and the file names are: SplashScreenImage.screen. -WVGA.jpg, SplashScreenImage.screen-720p.jpg and SplashScreenImage.screen-WXGA.jpg. Also, the Build Action property of the three files must be set to Content. As shown in Figure 4 below.

Figure 4: Splash screen file settings

Reference link:

1. Multi-resolution apps for Windows Phone 8

2. How to create a splash screen for Windows Phone

Source code download: Click here to download.

Reference: Create a resolution adaptive Windows Phone 8 application-Cloud + Community-Tencent Cloud