8 days of Windows Phone 8 | Day 4: New Screen Resolutions

 8 days of windows phone 8

Welcome back to my series of blog posts called 8 days of Windows Phone 8. Today, the 4th day of this series we’ll dive into the new screen resolutions of Windows Phone 8 and what you should do to support these as a Windows Phone developer.

  • Day 1: SDK Overview
  • Day 2: Live tiles and Lock screen
  • Day 3: Emulator & Simulation dashboard  
  • Day 4: New screen resolutions
  • Day 5: .net 4.5 & C# 5.0
  • Day 6: Speech
  • Day 7: Proximity capabilities
  • Day 8: Wallet and In-App purchases

     

    day4

    Available Screen resolutions

    3 screen resolutions are supported in Windows Phone 8: WVGA, WXGA and 720p.

      Resolution Ratio
    WVGA 480*800 15:9
    WXGA 768*1280 15:9
    720P 720*1280 16:9

    The most important thing to notice is there are 2 different screen ratio’s. 15:9 and 16:9. If you look at the picture below that is a representation of the 3 resolutions the WVGA (480*800) and the WXGA (768*1280) share the same Ratio so apps build for WVGA can be scaled to WXGA or the other way around. the 720P resolution however uses a 16:9 ratio that is higher so you have to make sure your UI layout is capable of using this longer screen estate.

    wp8 resolutions

    So what should you do to support all these resolutions? The first thing is all the assets Tile image etc should be used in the largest sizes. The OS will resize them to the right size for you. In your app however you should create a flexible UI that will scale certain UI elements like list boxes to change depending if the screen is longer as in the 720p resolution or shorter as in the other 2 resolutions. Also something to keep in mind is that WXGA is 1.6x the resolution of WVGA the canvas is still 480*800. all UI elements will be scaled to 160%. You don’t have to change your UI for WXGA compared to WVGA except for images. You can check for the current device resolution in code.

    To check the current resolution in code you can use the properties in the Application.Current.Host object. In the example project I’ll print these properties on the screen so you can see the actual values in the screenshots below. We’ll also use these values to select appropriate images for the resolution.

    First we’ll add some text fields to the main page XAML together with an image. In the code behind we’ll set these text boxes to the actual screen height/width/scale and resolution name properties.

       1: <StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

       2:     <StackPanel Orientation="Horizontal">

       3:         <TextBlock Style="{StaticResource PhoneTextNormalStyle}">Height</TextBlock>

       4:         <TextBlock x:Name="TextHeight" Style="{StaticResource PhoneTextNormalStyle}"></TextBlock>

       5:     </StackPanel>

       6:     <StackPanel Orientation="Horizontal">

       7:         <TextBlock Style="{StaticResource PhoneTextNormalStyle}">Width</TextBlock>

       8:         <TextBlock x:Name="TextWidth" Style="{StaticResource PhoneTextNormalStyle}"></TextBlock>

       9:     </StackPanel>

      10:     <StackPanel Orientation="Horizontal">

      11:         <TextBlock Style="{StaticResource PhoneTextNormalStyle}">Scale</TextBlock>

      12:         <TextBlock x:Name="TextScale" Style="{StaticResource PhoneTextNormalStyle}"></TextBlock>

      13:     </StackPanel>

      14:     <StackPanel Orientation="Horizontal">

      15:         <TextBlock Style="{StaticResource PhoneTextNormalStyle}">Resolution</TextBlock>

      16:         <TextBlock x:Name="TextResolution" Style="{StaticResource PhoneTextNormalStyle}"></TextBlock>

      17:     </StackPanel>

      18:     <Image Height="100" x:Name="ScaledImage"></Image>

      19: </StackPanel>

       1: TextHeight.Text = Application.Current.Host.Content.ActualHeight.ToString();

       2: TextWidth.Text = Application.Current.Host.Content.ActualWidth.ToString();

       3: TextScale.Text = Application.Current.Host.Content.ScaleFactor.ToString();

       4:  

       5: //use the scale to check which resolution you're using

       6: switch (Application.Current.Host.Content.ScaleFactor)

       7: {

       8:     case 100:

       9:         ScaledImage.Source = new BitmapImage(new Uri("Assets/wvga.png", UriKind.Relative));

      10:         TextResolution.Text = "WVGA";

      11:         break;

      12:     case 150:

      13:         ScaledImage.Source = new BitmapImage(new Uri("Assets/720p.png", UriKind.Relative));

      14:         TextResolution.Text = "720P";

      15:         break;

      16:     case 160:

      17:         ScaledImage.Source = new BitmapImage(new Uri("Assets/wxga.png", UriKind.Relative));

      18:         TextResolution.Text = "WXGA";

      19:         break;

      20: }

     

    The 3 images: wvga, wxga and 720p are images scaled to the correct size. the WVGA image is 432*100 (the same size as the image width and height in the XAML). the 720p and WXGA are both larger the 720p emulator is 1.5x the size of the WVGA image and the WXGA image is 1.6x the size of the WVGA image. this image is chosen dynamically by the scale property as shown in the code above.

    used images: (text font size is the same on all images to give you an idea of the image quality. click the image to see the actual size)

    wvga

    720p

    wxga

    results in the emulators for all 3 resolutions:

    resolution wvga resolution 720p

    resolution wxga 

     

  • So now we know how to handle images in your UI. the last part you need to know is that apps on the 720p resolutions have a higher height compared to the WVGA and WXGA resolution (as you can see in the screenshots above). If you fix your design on 800 pixels high you’ll have an empty piece of screen on the bottom that is not used by your app. It’s better to design your app with certain parts with dynamic heights of your page like a listbox, map control or scrollviewer so they will fill up the screen with just a bit longer list, map etc.

    Hopefully this gives you an idea on how to build apps supporting all resolutions.

    You can download the sample project here: http://sdrv.ms/QSJ2yx

    Thanks for reading my 4th post in this series of 8 about the new features in Windows Phone 8. Tomorrow a post on some new features in the .net framework 4.5 and the C# 5.0 language which can be important for you as a Windows Phone developer.

    Geert van der Cruijsen

    Share on Facebook
    Kick It on DotNetKicks.com
    Shout it
    Post on Twitter

    Comments are closed.