Available Screen resolutions

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

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.

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)

results in the emulators for all 3 resolutions: