Porting Existing Apps to large Screen Device

From Nokia Developer Wiki
Jump to: navigation, search

This Article provide describe how to make Existing WP Apps compatible to NOKIA recently lunched large Screen Devices.

Note.pngNote: This is an entry in the Nokia Imaging and Big UI Wiki Competition 2013Q4.

WP Metro Icon UI.png
WP Metro Icon Graph1.png
WP Metro Icon WP8.png
Article Metadata
Windows Phone 8
Created: SANDEEP SHARMA (14 Dec 2013)
Last edited: SANDEEP SHARMA (14 Dec 2013)



Nokia Recently Lunched Large Screen(6 inch) Lumia Device Lumia 1520 having resolution 1080 x 1920 pixels and Lumia 1320 having resolution 720 x 1280 pixels and both having 16:9 aspect ratio and powerful Hardware . both devices have powerful Hardware With these devices NOKIA step into Market of Large Screen Devices or Phablet and compete with existing Large Screen devices from other companies like Samsung Galaxy Mega, LG Optimus etc. To support these devices Microsoft provided Windows Phone Update 3 or GDR3. These update include support to 1080 resolution, powerful hardware, Layout optimization and more.

These devices support all Apps which have declared 720p Layout Support. these Apps would be scaled-up to run on these Devices. Any which don't support 720p Layout, would not be offered by Marketplace to install on these devices. and WP7.x Apps which aren't updated fro WP8 would be lettedboxed on these Device.

Porting Apps to Large Screen Devices

First and most necessary condition for a App to available to Install on large Screen Device is that it must support 720p Layout. this layout is auto supported by WP 8 Apps. To include 720p Layout to windows phone App. Open WMAppManifest.xml and include

  <ScreenResolution Name="ID_RESOLUTION_HD720P"/>

As 15:9 and 16:9 aspect ratio is support by WP devices. It is possible that controls are distorted on Large Screen Devices. to avoid this, it is recommended that controls are added in the Container and their Height and Width property is set to Auto so that these can be re-sized according to Device on which these are Installed.

Runtime Image loading

In case of Images, setting Height and width to Auto could blur the image so it is very important that images for Devices with different resolution are available and could be loaded dynamically according to screen resolution. To load Image at runtime follow Steps :

1. Set Copy to output Directory property of images to copy always.

2. This class use ScaleFactor to get resolution of Screen. Add a class named ResolutionHelper.cs in Project and add following code

 public enum Resolutions { WVGA, WXGA, HD };
 public static class ResolutionHelper
      private static bool IsWvga
            return App.Current.Host.Content.ScaleFactor == 100;
   private static bool IsWxga
            return App.Current.Host.Content.ScaleFactor == 160; 
private static bool IsHD
            return App.Current.Host.Content.ScaleFactor == 150; 
public static Resolutions CurrentResolution
            if (IsWvga) return Resolutions.WVGA;
            else if (IsWxga) return Resolutions.WXGA;
            else if (IsHD) return Resolutions.HD;
            else throw new InvalidOperationException("Unknown resolution");

3. 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
                   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);
                           throw new InvalidOperationException("Unknown resolution type");

4. In MainPage.xaml, add an Image element and bind its Source property to the Uri returned by the MultiResImageChooser.cs class.

   <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
      <Image Source="{Binding BestResolutionImage, Source={StaticResource MultiResImageChooser}}"/>

5. In App.xaml, in the <Application> element, add the following xmlns namespace mapping.


6. In App.xaml, add the following application resource.

      <h:MultiResImageChooser x:Key="MultiResImageChooser"/>

Dynamic layout

Setting Dynamic Layout enable developer to set different value of properties of controls for different screen resolution. In this case developer don't have to set Auto for Height and Width of Control. Instead he can set different value according to the Device on which it's running. to apply dynamic Layout apply following steps

1. Create a Style defined in SampleStyle.xaml. which can applied to controls on detection of Big Screen Device

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   <Style x:Key="LargeBoldText" TargetType="TextBlock">
       <Setter Property="FontFamily" Value="Segoe WP Semibold" />
       <Setter Property="FontSize" Value="22" />

2. Create a class StyleSelector.cs and describe a method SetStyle which can check device type and apply style

 class StyleSelector
       static public void SetStyle()
               var appTheme = new ResourceDictionary {
                   Source = new Uri("/DynamicLayoutSample;component/Themes/SampleStyle.xaml", UriKind.Relative)

3. Call StyleSelector's SetStyle method in App's Constructor

public partial class App : Application
       public App()
           UnhandledException += Application_UnhandledException;

4. To Apply the Style create a Text Block setting style property

      <TextBlock Grid.Row="1"
                      Style="{StaticResource LargeBoldText}"
                      Text="{Binding DataTitle}" />

On Application Starting SetStyle method is called which check if the device is a Big Screen Device and set the style of Control.

Splash Screen

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.

App Icons and Tiles

You have to include images only for WXGA resolution for App Icons and Tiles. The phone automatically scales the images to the correct size for WVGA, 720p, and 1080p screens.


Applying all above methods makes a App perfectly compatible to large Screen Devices. these helps to avoid distortion and blur-redness and make content of App looks beautiful on Large Screen Devices.

This page was last modified on 14 December 2013, at 21:41.
119 page views in the last 30 days.