In the previous post we explored string localization for WinRT XAML applications. In this post the focus will be on localizing files like Images, Styles, and Custom Layouts.
Image Localization in XAML
If you are referencing the image from XAML, localizing an image is as simple as creating folders for the locals you need to support and put localized versions of the image file into the local folder. The local folder must be named with ISO Culture Names. The following image shows an example for project hierarchy for localized images of country flags.
And referencing the image in XAML is the normal relative URL without the culture code as shown in the following example.
Image Localization in Code
Using a relative URI to reference package content is not permitted in Metro XAML apps. If you tried to reference a file in code with relative Uri, you will receive “The given System.Uri cannot be converted into a Windows.Foundation.Uri.” error. Instead you have to use an absolute URI using the ms-appx scheme. The simple form of ms-appx url is ms-appx///path. So in the example we used the flag image should be referred to as ms-appx:///images/flag.png. This is a shorthand for ms-appx://[package name]/path. The following example shows how to load the flag image from code.
Contrast and Scale Conventions
The resource loader does not only support conventions for local resources, but also conventions for high contrast to enhance accessibility, and different DPI conventions to support high resolution screens.
The supported modes are:
High Contrast : contrast-black and contrast-white
Pixel Density: scale-80(start screen only), scale-100 (normal DPI), scale-140 (HD DPI), scale-180 (ultra HD)
The following screenshot showing an example project hierarchy supporting different contrast and scale scenarios
The Windows 8 Simulator has good support for simulation different DPI scenarios. You can change the resolution of the simulator to 1920*1080 which corresponds to scale 140, 2560*1440 which corresponds to scale 180, or other resolutions that will reflect scale 100. High contrast can be modified from control panel accessibility.
Custom Layouts and Styles
The conventions listed for local, contrast and scale file names are not limited to images or resw files, but to any file regardless of the extensions. Which is really useful with XAML resource dictionaries, giving designers great flexibilities not only to localize strings and images, but create totally different layouts specific to a local, contrast, or scale.
All resources in Metro project are analyzed using a tool called makepri.exe, the tool generates a binary metadata file that can be dumped into XML with “makepri dump”. Inspecting PRI dumps is useful in debugging resource related issues, and parsing resource maps. In the next post we will dig deeper into PRI files and their structure.