App in a snap: Localizing your app

If you want to create Your first Windows 8 app with App in a snap, you’ll probably notice that all the labels and texts in the app are in Dutch. This could potentially pose a problem with certification if you want to use non-Dutch content sources in your app. Luckily, this is easily fixed by localizing your app with resource files.

As the language-specific labels and texts in App in a snap are hard-coded, we can choose to simply translate them, but there’s a more elegant solution. This post will go over the process of localizing App in a snap, based on the Quickstart: Translating UI resources article on MSDN.

Adding the resource file

To start, we’ll add a folder to our project to hold our solution files. The Quickstart article on MSDN suggests you name it strings, but you can use another name if you wish. To keep things fresh, let’s create a Resources folder on the root level of our project and create another folder inside called en. After that, right-click the en folder and select Add > New Item….

Add item to resources folder

In the Add New Item dialog, scroll down to Resources File (.resw), keep the default name of Resources.resw and click on Add to add the file. You’ll now be presented with the UI editor of the Resources file, where you can simply add items by supplying a Name, a Value and optionally a Comment.

Specifying your app’s language

To specify our app’s new language (or rather, the default language), we need to open up the App Manifest and edit the Default language attribute. We can do this by double-clicking on the Package.appxmanifest file in Solution Explorer and changing the Default language value to en.

Default language

Modifying the hard-coded values

To modify the hard-coded labels and texts, we need to make changes to the app in two ways: in XAML we will use the built-in mechanism to localize apps and in code we will use the Windows.ApplicationModel.Resources.ResourceLoader class to load our localized strings.

XAML

First, let’s modify a value in XAML. Open up the PrivacyPolicyFlyout.xaml page to localize our Privacy Statement. Click on the text in the designer to jump to this line in XAML:

To automatically change the text into our localized string, we need to add a Uid to the element like so:

Note that we can remove the Text=”…” property entirely, but it’s nice to keep it in place to have some design-time data. Now that we’ve done the XAML bit, open up the Resources.resw file again and click on the first cell under the Name column. Here we’ll enter PrivacyStatement.Text to indicate we want the string to be used on the Text property of the element with the Uid PrivacyStatement. As a value, enter something along the lines of “While this app uses the internet connection on your machine, no personal information is collected or transmitted from this app.”.

Now when we run our app, we can bring up the Privacy Statement flyout UI by going to our Settings charm and clicking on Privacy Statement. We now see our localized text in the flyout as opposed to the original Dutch string.

Code

As mentioned, to use our localized string in code, we can use the Windows.ApplicationModel.Resources.ResourceLoader class to get the desired value. Let’s start by changing the labels of the sections in our Settings charm to be localized. Open up the SettingsCharm.cs file in the Charms folder and begin by instantiating a ResourceLoader in the class on line 20:

Make sure you also add the using statement (using Windows.ApplicationModel.Resources;) at the top of the page, to make sure we can actually use the ResourceLoader class. Now that we have access to a ResourceLoader, we’ll change the code in the SettingsCharm_CommandsRequested method to:

Because we are using the values in code, we simply add the same values as we use in the GetString(“…”) method to our Resources.resw file as a name and provide a value (Name: Value listed below).

Now when we run our app and bring up our Settings charm UI, we’ll see our new localized values.

Date format

In the App in a snap source we also hard-code the date/time format of our articles to the Dutch format. To change this so the app will use the default language’s date/time format, open up the ItemViewModel.cs file and on line 42 change the following line:

to become:

Localization overview

In summary, here’s a list of labels/texts you should localize to have your app completely available in the target language. Use the above XAML and code techniques to do so.

  • PrivacyPolicyFlyout.xaml text
  • AboutFlyout.xaml text
  • SettingsCharm.cs labels
  • ItemViewModel.cs Subtitle
Pin It

Leave a Reply

Your email address will not be published. Required fields are marked *