Windows Phone 8 Development – Screen Resolutions

WP8 Development Serie

1. Introduction
2. Screen resolutions (this post)
3. MVVM
4. Localization

This post will focus on the different screen resolutions that are now supported in Windows Phone 8.

3 Screen resolutions
resolutions

Windows Phone 8 supports three different resolutions and the first question that pops into mind is; Do I have to do three different UIs? Well actually no, but you can do custom things when you have different resolutions, but  we as developers work with device independent pixels, the OS applies a scale factor to the actual resolution so that we do not have to worry about that.

Resolution Aspect ratio Scale Factor Scaled resolution
WVGA 800 x 480 15:9 1.0x scale 800 x 480
WXGA 1280 x 768 15:9 1.6x scale 800 x 480
720p 1280 x 720 16:9 1.5x scale, 80 pixels taller (53 pixels, before scaling) 853 x 480

If we would like to do custom UI we can, and we can also select what resolutions the application supports (double-click the WMAppManifest.xaml file and check the Supported resolutions) but if we do not specifically specify supported resolutions, all are supported and the OS handles the scaling.

Images

In most cases, you should supply images targeting the WXGA (1280 x 768) screen

  • WXGA assets are of the highest quality
  • Will automatically scale down on WVGA phones
  • Still look great on 720p (1280 x 720)

Although if we want to give the users maximum user experience then we should consider supplying images with three resolutions.

E.g. Logo.screen-wvga.png, Logo.screen-wxga.png and Logo.screen-720p.png and then at runtime get Application.Current.Host.Content.ScaleFactor to determine the current resolution of the screen on the phone and write custom code to load the correct corresponding image. ScaleFactor returns 100 for WVGA, 160 for WXGA and 150 for 720p.

One common way is to create a resolution helper class

public enum Resolutions { WVGA, WXGA, HD720p };

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 Is720p
   {
      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 (Is720p) return Resolutions.HD720p;
         else throw new InvalidOperationException("Unknown resolution");
      }
   }
}

Then create a class that uses the above resolution helper to select the correct image.

using System.Windows.Media.Imaging;

    public class MultiResImageChooser
    {
        public Uri BestLogo
        {
            get
            {
                switch (ResolutionHelper.CurrentResolution)
                {
                    case Resolutions.HD720p:
                        return new Uri("Assets/Logo.screen-720p.jpg", UriKind.Relative);
                    case Resolutions.WXGA:
                        return new Uri("Assets/Logo.screen-wxga.jpg", UriKind.Relative);
                    case Resolutions.WVGA:
                        return new Uri("Assets/Logo.screen-wvga.jpg", UriKind.Relative);
                    default:
                        throw new InvalidOperationException("Unknown resolution type");
                }
            }
        }

    }

Then in xaml we can simply use the following expression to bind and get correct image for pixel-perfect result

...
xmlns:h="clr-namespace:DataBoundApp1"

...

<!--Application Resources-->
<Application.Resources>
   <h:MultiResImageChooser x:Key="MultiResImageChooser"/>
</Application.Resources>

...

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

Splash Screens

To add a splash screen to your project suitable for all resolutions, add a file as content called SplashScreenImage.jpg at 768 x 1280 resolution. This means that the framework automatically scales it to the correct size on different resolution screens. But we can also provide pixel-perfect splash screens for all resolutions, add images with the  following names:

  • SplashScreenImage.Screen-WVGA.jpg
  • SplashScreenImage.Screen-WXGA.jpg
  • SplashScreenImage.Screen-720p.jpg
  • In addition to these images, you must still include the default SplashScreenImage.jpg file

Note that Windows Phone 8 apps starts much faster than WP7.1 apps, so unless you have an app that is unusually slow on loading (might be due to amount of resources needed etc) we should omit the splash screen image. If you decide to use a splash screen, one suggestion is to create an animated splash screen to give the users something more appealing to look at, One way to do this is by creating a Popup control that displays the animation while the app resources are loading. When the app has finished loading, you can hide the Popupcontrol. For more info about animations, see Quickstart: Animations for Windows Phone.

App Icon and Tiles

  • You must supply app icon and tile images sized for WXGA
  • The framework automatically scales to the correct size for WVGA and 720p
Tile size WXGA
Application Icon 100 × 100
Small 159 × 159
Medium 336 × 336
Large 691 × 336

Happy Coding!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: