How to make your Windows 8 App support for different Screen Resolutions

So currently I’m going through the aftermath of my Final year Project submission, waiting for the Final Presentation to be done with. The other day my friend Nisal ‘Cheezy’ called me up and talked about developing some app for Windows 8. So as usual, I opened up my Visual Studio 2012 and created a new project. Suddenly it occurred to me that I have been struggling with different Screen resolution support for couple of my past app developments. So here I thought of leaving a small note of it.

Most of the people does not realize this fact, once you develop a Windows 8 App, it usually does not support different Screen resolutions, even though it is a primary requirement in App certification. Due to this fact a lot of applications fails at the certification level. There are several number of standard screen resolutions that we need to make our apps to be supported, some of them are, 1366×768, 1920×1080, 2560×1440, 1280×800, 1920×1080, 2560×1440  and so on. But most of the Windows 8 devices, laptops, tables and PCs today are set to 1366×768 screen resolution by default. According to Microsoft statistics, most of the Windows 8 Devices uses 1366×768 screen resolution. But you will never know what our users will be using as their screen resolutions or in what kind of situations they would change their screen resolutions.

I also once went through this tragedy when someone was showcasing one of mine and Nisal’s windows store apps. Therefore it is crucial to focus on support your apps for different screen resolutions.

So below are some of the techniques that I use when I develop my windows 8 apps,

Start Development with the Lowest Resolution

Once you create a new Windows Store app project in Visual Studio 2012. The app’s layout default is set to 1366 x 768 screen resolution to start the development with. But this is not a very smart step, because 1366 x 768 is not the smallest screen resolution in Windows 8 devices. According to Microsoft 1280×800 is one of the smallest screen resolutions available and it is best to start your development with supporting to the smallest reslution as a practice. Therefore, when you starts your app development, always make sure to change the default UI designer’s screen resolution in Visual Studio to 1280×800 resolution. This can be easily done by going to the “Device” pane in your left and changing the “Display” settings. Through this page you can check how your App’s UI supports different resolutions, View states and themes. Once you start development with the lowest resolution you won’t have to worry much about dealing with the rest because then you can easily zoom in the components by using Viewbox, which we are discussing in the next paragraph.

Use Viewbox, the Life Saver ! lol

Using viewbox component you can easily set your App’s UI to scale and fit automatically for different Screen sizes with ease. You can look up in google how to use it in your code wiht examples, but for the time being below is how I usually use my ViewBoxes to fit into different screen resolutions,

<Viewbox HorizontalAlignment=”Left” Height=”auto” Width=”auto” VerticalAlignment=”Stretch” >

//………………the rest of the components goes here in your XAML…..//


Maintain a Root Grid

When you are placing your rest of the UI components, make sure you place them with in a root Grid layout and also make sure to set that grid with static Width and height. This will prevent the ViewBox zooming in your UI unnecessarily for different screen sizes.

Test your app in different Screen Resolutions using the Emulator

And finally, after combining all the above methods, do not forget to test your applications on Emulator under different screen resolution settings.

One thing I have noticed, once you optimize your apps to 1366×768 resolution, it perfectly supports all the other resolutions except 1280×800 resolution. Therefore it is always best to start from the lowest resolution and test it out every step of the way.

Here are some of the useful links which I have used before,

Well thats it from me fellow awesome Developers out there !
Cheriyo ! 😀

Stay Awesome ! xD

Leave a Reply

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

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

Google photo

You are commenting using your Google 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 )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.