November30

WP8 Multiple Screen Resolutions

I am working on a lock screen wallpaper app for Windows Phone 8 and had some interesting findings to share with the community at large.  The lock screen is customizable in Windows Phone 8 for the first time!  You can have custom PP app specified wallpaper, notifications, and icon tiles.  See the MSDN Lockscreen Article for more information.

More Resolution!

First lets take a quick look at all three of the emulators running at 50% resolution.  You will immediately notice the two on the left are larger (duh).  They are the new resolutions, with the one on the far right being the WVGA of the WP 7 resolution.

image

Name

Resolution

Device Example

720p 720x1280 Lumia 920
WXGA 768x1280 HTC 8x
WVGA 480x800 Original WP7
     

This does complicate things a bit if you have existing apps that you want to look pixel perfect on Windows Phone 8.  Your XAML code will just scale and look correct.  But if you have images (like a splash screen) that you want to take advantage of all that resolution there is a bit more you need to know.

Now the reason you don’t have to worry too much as a XAML developer is that all of the elements on the screen get scaled by a factor to make them look correct on the new phones.  This actually works really well, but there is one case you have to be aware of: the 720p resolution ends up with a few extra pixels due to the change in aspect ratio.   As long as you used stack panels with an * for the height your page will resize to fill in the new area.  If you hard coded the sizes you will end up with a little black band at the bottom of the page.

Splash Screen Changes

Of course these new resolutions need new splash screens!  You can make just one splash screen and let the OS scale it for you. If you provide one image at 768x1280 names SplashScreenImage.jpg in your XAP that will be used for all of the resolutions.  But where is the fun in that?  You can provide a custom splash screen per resolution by using the chart below.

Resolution Screen Filename
480 x 800 WVGA SplashScreenImage.Screen-WVGA.jpg
768 x 1280 WXGA SplashScreenImage.Screen-WXGA.jpg
720 x 1280 720p SplashScreenImage.Screen-720p.jpg

Add these files to the root of your project as Content files.

image

That’s it.  The OS will automatically take care of showing the correct image at startup.

Comments (1) -

05/12/2012 03:55 #

Scott Hanselman

Super helpful. Thank you!

Scott Hanselman

Comments are closed