With the advent of Windows Phone 8.1, developers have the option of using WinRT native XAML stack as opposed to the Silverlight XAML the only option with early Windows Phone iterations.
One of the differences between WinRT XAML and Silverlight XAML is scaling and like with fonts, & images, scaling can have a significant effect on the look and feel of an app.
The default behavior with Windows Phone 8 was the inherent Silverlight behavior of scaling the image to fit. This meant that unless a high-resolution image was used, the image would end up looking blurred. Windows Runtime takes a different approach.
Windows 8x supports multitudes of screen sizes, resolutions and DPI. Windows Phone now supports 4 resolutions. The way Windows Runtime deals with this is by allowing developer to specify multiple images to match certain scale factors.
| Windows Store Apps |
Windows Phone Store Apps |
| 1.0 (100% no scaling) |
1.0 (100% no scaling) |
| 1.4 (140% scaling) |
1.4 (140% scaling) |
| 1.8 (180% scaling) |
2.4 (240% scaling) |
The runtime would determine the scaling factor to use depending upon the screen size, resolution, DPI and the form factor of device in question. The developer is required to supply images for scaling 1; the other scale factors are optional. If they are supplied, they will be used if necessary.
There are two ways of supplying images to support multi-scaling support.
- Specify image scale within the file name e.g. Image.scale-100.png or Image.scale-140.png
- Create direct for each image scale and place images inside without specifying scaling like in 1. E.g. scale-100/Image.png or scale-140/Image.png
The attached project includes examples of both ways.
To use this and enable auto-scaling support, you specify the image as specified below
<Image Source="Assets/Iris.png" />
<Image Source="Assets/Iris2.png" />
Occasionally it is necessary to set the images from code. In those instances, one should query the windows runtime to determine the current scaling factor and return appropriate image resource.
var uri = new System.Uri("ms-appx:///Assets/Iris.png");
var file = await StorageFile.GetFileFromApplicationUriAsync(uri);
This will correctly detect the scaling factor and get appropriate file.
Alternatively, for Windows 8x, we can use DisplayProperties.ResolutionScale to determine current scaling and for Windows Phone, we can use DisplayInformation.RawPixelsPerViewPixel.
Uri uri = null;
#if WINDOWS_PHONE_APP
var rawpixelperview = Windows.Graphics.Display.DisplayInformation.GetForCurrentView().RawPixelsPerViewPixel;
var Width = Convert.ToInt32(Window.Current.Bounds.Width * rawpixelperview);
var Height = Convert.ToInt32(Window.Current.Bounds.Height * rawpixelperview);
if(Width == 480 && Height == 800)
{
uri2 = new System.Uri("ms-appx:///Assets/scale-100/Iris2.png");
}
else if((Width == 720 && Height == 1280 ) || (Width == 768 && Height == 1280))
{
uri2 = new System.Uri("ms-appx:///Assets/scale-140/Iris2.png");
}
else
{
uri2 = new System.Uri("ms-appx:///Assets/scale-240/Iris2.png");
}
#else
switch (DisplayProperties.ResolutionScale)
{
case ResolutionScale.Scale100Percent:
uri2 = new System.Uri("ms-appx:///Assets/scale-100/Iris2.png");
break;
case ResolutionScale.Scale140Percent:
uri2 = new System.Uri("ms-appx:///Assets/scale-140/Iris2.png");
break;
case ResolutionScale.Scale180Percent:
uri2 = new System.Uri("ms-appx:///Assets/scale-180/Iris2.png");
break;
}
#endif
var file = await StorageFile.GetFileFromApplicationUriAsync(uri);
It worth noting that images set in xaml and those done codebehind behave differently at least as far as size on screen is concerned. The only way to achieve correct size as visible in xaml is to set size to that of scale 1.0 image.
Supporting Accessibility
Windows Store apps support high contrast mode. The two available options are
- Black background and white foreground
- White background and black foreground.
To additionally support these two accessible image formats, you need to provide scale factor 1 images named / placed appropriately. I have excluded the high contrast images from sample as windows phone was using that by default.
Assets/Iris.scale-100_contrast-black.png
Assets/Iris.scale-100_contrast-white.png
or
Assets/scale-100_contrast-black/Iris2.png
Assets/scale-100_contrast-white/Iris2.png
Downloadable sample code can be downloaded here
Invoke IT Limited 