Wednesday, April 4, 2012

Building Global Windows 8 Metro XAML Apps Part 2 Localizing Files and Custom Layouts

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.

project-hierarchy-images

And referencing the image in XAML is the normal relative URL without the culture code as shown in the following example.

ImageTag

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.

ImageinCOde

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

project-hierarchy-contrast

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.

7 comments:

Jonas said...
This comment has been removed by the author.
Yasser Makram said...

Jonas,
You don't need to use ms-appx to localize your splash screen. All you need to do is to create a folder with the locale qualifier and put your local Splash screen in this folder.

Sara Silva said...

Hello Yasser, great post :)
If is possible verify the information in
Image Localization in Code

and use:

ms-appx:///


ms-appx:// is wrong

Yasser Makram said...

Sara, You are right, ms-appx:/// is a shorthand for ms-appx://[package name]/[resource path]. In part 3 of this series I have more about this topic.

Anonymous said...

thanks for the great explanation. Is part 3 already up, I couldn't find the link

Anonymous said...

thanks for the great explanation. Is part 3 already up, I couldn't find the link

hemcoined said...

The locale qualifier and put your local Splash screen in this folder.
Fall Protection Systems