Resolution scaling of Windows 8 Metro apps

The short story

A high DPI screen is scaled so you can always ask for Bounds and get the normal DPI (dots per inch) result for a screen of that size.

For example, set the simulator to 1920×1080 for a 10.6″ screen and the Window.Current.Bounds will say ~ 1371×771 – which is close enough to 1366×768 which is the resolution for a normal DPI screen.

Why does this matter? Well – you can adjust and adopt your UI to different screen sizes and resolutions by looking at the Bounds property.

 

Actual values of the Bounds property at different resolutions for same screen size:

Normal DPI

 bp_1366

Higher DPI

 bp_1920

Highest DPI

 bp_2560

And how to switch resolution on the simulator:

bp_simulator_resolutions

 

The long story

Windows 8 Metro apps has something very clever called resolution scaling. What this means is that they want items on the screen to be about the same physical size on different screens, independent of the DPI of your screen.

The system has three different scaling levels; 100%, 140% and 180% – the theory behind this is well described in the blog post from March 2012: Scaling to different screens.

Microsoft have official Guidelines for scaling to screens, and there’s a great blog post that first showed me the ResolutionScale property that can be used to check the current scaling level, read ‘Obtaining screen resolution scale details’ here.

 

Now go out there and make use of all those giant screens whilst keeping your content good-looking on small screens! It’s not easy, but nonetheless important.

This Post Has 3 Comments

Leave a Reply

Close Menu