Universal Applications: be ready for Windows 10 (part 3)

Last time we discussed some approaches which should help to make universal XAML interfaces for Windows 8.1 and Windows Phone 8.1. It’s easy to create universal interface for base screen resolutions using VisualState manager and other stuff there. But we still need to discuss some questions around universal interfaces like DPI and images.

Today you can find many devices in the market with different screen sizes and different resolutions. It’s easy to buy a 7 inch tablet or 24 inch display which can support the same resolution. So, how can we target all these devices? Frankly speaking, in many cases, you don’t need to think about it at all because Windows can scale your interface based on DPI. It’s easy to scale XAML interface and Windows scales it depending on pixel density. So, your applications will looks similar on devices with different screen sizes. Store applications support the following scaling parameters: 100%, 140% and 180% for Windows 8.1 and 100%, 140% and 240% for Windows Phone.

But there is a problem. If you are using just XAML for building your interface it will work fine but in case of images you can discover a problem because it’s not easy to scale images and save the same quality. So, the best solution to manage the problem is using vector images or preparing the same image for different scaling parameters.

There are two approaches related to vector images: SVG and XAML Geometry API. You can use SVG if you are using JavaScript for building your applications. In this case Windows will scale your image without any problem. If it’s possible you can use Geometry API to create image from scratch. Windows Runtime contains many methods which allow creating base objects like ellipse and rectangle as well as more complex objects using path.

But if you are using C# and it’s not possible to create your image directly in XAML you still have a chance to manage the problem using different images based on current pixel density. Good news there is that you should not select the right image manually and you can rely on Visual Studio and Windows Runtime. The idea is simple and based on suffixes: if you need to use an image in your project (for example, logo.png), you just need to place three different images to your project using the following suffixes: .scale-100, .scale-140 and .scale-180 (in our case we will have logo.scale-100.png, logo.scale-140.png, logo.scale-180.png) and you can continue to use the image name (logo.png) in your project but Windows Runtime will use the right image from your resources. So, you just need to create images for different scale factors and that’s all.

This post is short but I believe that it will help you create better applications. Especially today then we have screens of all sizes.