Localization of a Metro app

While porting your app from Windows Phone to Windows 8, you’ll see that a lot of the code can be reused without much of trouble. Most of the changes have to be done in the design front as more screen real estate is available as compared to a standard 480×800.

Localization is defined by MSDN as

the translation of application resources into localized versions for the specific cultures that the application supports.

There are few differences in the way localization is done in Windows Phone and Windows 8. The resource file is named as a .resw file and not a resx file.  If you are porting the .resx as it is, I would suggest to name your elements the same as in the .resx file. Although you can localize using Bindings, I prefer associating the x:Uid which definitely makes the XAML code easier to read.

1. Firstly we need to create a folder in the project into which all the strings in the app needs to go. Here I have named it Strings

2. Inside the Strings folder, we create subfolders for each language. eg: en, fr.

3. Then we create individual resource file for every culture. [Right-Click on folder > Add > New Item > Resource File (.resw) .By convention name it as Resources.resw

After the above steps your solution explorer will look like this

Next is how we bind the xaml elements to these strings and how we can access the resw strings from the code-behind.

XAML

1. For every xaml element you create and has a string that need to be localized, associate a x:Uid attribute with it.

For eg,


<TextBlock x:Uid="calPageTitle" Grid.Column="1" Text="" Style="{StaticResource PageHeaderTextStyle}"/>

2. Now, in your Resource.resw file add the string that needs to appear in your TextBlock. Add the x:Uid of the element and the property. Here I’ve added the Text property ie the string should display “Calendar”.

3. We then set the Neutral language of the app to en-US.

To set the neutral language, Right Click the project in the Solution Explorer > Properties > In the Application Tab which is highlighted by default, click Assembly Information >In the neutral language option select the default language we want. Here I’m selecting English(United States)

Now when you run the app, the Textblock named pageTitle should have displayed “Calendar”.

For the other languages add the appropriate text in the corresponding resw.

Accessing the string from code behind

Declare a new object, loader of ResourceLoader type. You may have to include

using Windows.ApplicationModel.Resources;

Use GetString function to obtain the necessary string. I have noticed that the string in the resw which is bound to the xaml x:Uid cannot be used in the code behind. Some how string calPageTitle  or calPageTitle.Text does not seem to fetch the string. So I declare another string in the resw file called calPageTitle2 which has the same string “Calender”.

var loader = new ResourceLoader();
pageTitle.Text = loader.GetString("calPageTitle2")

So when I run the app once with the x:Uid removed , “Calender” is displayed again.

To test for different languages, change the simulator language from the control panel.

As in windows phone, there is no need of writing a separate class for fetching the strings and we do not need to make changes to the <SupportedCulture> in the cs.proj file.

🙂 I have my app localized!!

May the code be with you 🙂

Ref: Quickstart: Using string resources (Metro style apps using C#/VB/C++ and XAML).