Supporting multiple resolutions in Windows 8.1 apps
[This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation]
Windows Store apps can run on a wide variety of screen sizes and resolutions, and bitmaps can suffer if scaled.
Your apps can run on a wide variety of screen sizes and resolutions, and you need to be flexible with both content design and your use of bitmaps. Use the Simulator to test your apps at different screen sizes, and use the equivalent to creating images with @2x.png extension for iOS Retina displays to help your bitmaps look sharp.
Screen sizes
Windows 8 supports many different screen sizes, resolutions and orientations. Your app should take advantage of larger screens to show more data, rather than huddle everything in the top-left corner. There are two ways to deal with this:
Scale the existing controls to fit the new screen size.
This approach may suit an app with a display that always contains the same number of elements, such as a game. You might have initially designed your game for a screen resolution of 1024 by 768, but you still want your app to use the entire screen when it's running on a device with a resolution 1920 by 1080 or higher.
In this case, you should place your screen content within a ViewBox control (Viewbox XAML control,Vewbox WinJS control), Windows 8 will scale the content to fit the screen. Your bitmaps will also be scaled, and in order to avoid ugly scaling artifacts you should provide artwork in multiple resolutions (see the next section) or use vector based art.
Note XAML controls (such as an app bar control) will automatically resizes themselves, and should not be placed inside a ViewBox.
Adapt the view to make the most of the new screen size, by displaying more or different content.
When developing for iOS devices, you probably made use of springs and struts or the newer Autolayout settings to automatically resize and reposition your controls. Windows 8 takes more an adaptive web page approach, and provides container controls and grid layouts which can resize themselves to best match the current screen size.
In fact, if you are using controls such as GridView or ListView, you will probably get this resizing support for free. This makes it straightforward to create apps which display information in rows or columns, and have them look good in all manner of situations. The key is to make your app smart: if there is room to show an extra column of data on a larger screen, do it.
Image resolutions
In the same way that Retina displays on your iOS device require different image assets to look their best (the @2x.png file extension), Windows Store apps also supports the use of various-sized versions of the same image. At run-time, the best image for the display will be selected automatically. Although using this feature is optional, it will help make your apps look great even on large, high-resolution screens (although using XAML drawing tools rather than bitmaps can look better still: see Skinning and animating a button).
As on iOS, it is simply a matter of providing the assets and letting the app use what is best. On Windows 8 devices there is support for three different scaling factors: 100%, 140% and 180%.
Imaging you are writing a game with a sprite that starts out at 128 pixels square on a small screen size (say, 1024 by 768). To look good on larger screens, you should also make a version that is 176 pixels square, and third that is 230 pixels square. Creating new images rather than simply shrinking or expanding one base image in a paint program will keep lines crisp and details clear. Your designer should be working in a vector graphics program, such as Adobe Illustrator, and so they can produce the bitmaps for you at any size.
There are two ways to place the images in Visual Studio so the correct ones are used at run-time. You can either use a special naming convention for each image, or you can place the files within specially named folders. Here's an example of both options, for a file named mySprite.png:
.png){kind=icon}
Determining resolution scale at run-time
If you need to know which resolution scale is currently in use (perhaps you want to load images dynamically), you can use DisplayProperties, like this:
// Add: using Windows.Graphics.Display;
Uri uri = null;
if (DisplayProperties.ResolutionScale == ResolutionScale.Scale100Percent)
uri = new System.Uri("ms-appdata:///local/images/logo-100.png");
if (DisplayProperties.ResolutionScale == ResolutionScale.Scale140Percent)
uri = new System.Uri("ms-appdata:///local/images/logo-140.png");
if (DisplayProperties.ResolutionScale == ResolutionScale.Scale180Percent)
uri = new System.Uri("ms-appdata:///local/images/logo-180.png");
var file = Windows.Storage.StorageFile.GetFileFromApplicationUriAsync(uri);
Related topics
Topics for iOS devs
Windows 8 controls for iOS devs
Windows 8 cookbook for iOS devs
Image scaling topics
Guidelines for scaling to screens (Windows Store apps)
Guidelines for scaling to pixel density (Windows Store apps)
Optimizing images for different screen resolutions (Windows Store Apps)