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….
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.
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:
|
1 |
<Run Text="Hoewel deze applicatie gebruik maakt van het internet worden geen privacy gevoelige gegevens verstuurd vanuit deze applicatie."/> |
To automatically change the text into our localized string, we need to add a Uid to the element like so:
|
1 |
<Run x:Uid="PrivacyStatement" Text="Hoewel deze applicatie gebruik maakt van het internet worden geen privacy gevoelige gegevens verstuurd vanuit deze applicatie."/> |
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:
|
1 2 3 4 5 6 |
18: public static class SettingsCharm 19: { 20: static ResourceLoader _loader = new ResourceLoader(); 21: 22: public static void InitializeForCurrentView() 23: { |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
SettingsCommand aboutCommand = new SettingsCommand("aboutCmdId", _loader.GetString("AboutCharmSection"), (cmd) => { ShowFlyout<AboutFlyout>(346); }); args.Request.ApplicationCommands.Add(aboutCommand); SettingsCommand privacyPolicyCommand = new SettingsCommand("privacyPolicyCmdId", _loader.GetString("PrivacyStatementCharmSection"), (cmd) => { ShowFlyout<PrivacyPolicyFlyout>(346); }); args.Request.ApplicationCommands.Add(privacyPolicyCommand); var supportUri = App.ApplicationData.GetSupportUri(); if (supportUri != null) { SettingsCommand supportEmailCommand = new SettingsCommand("supportCmdId", _loader.GetString("SupportCharmSection"), async (cmd) => { await Launcher.LaunchUriAsync(supportUri); }); args.Request.ApplicationCommands.Add(supportEmailCommand); } |
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).
|
1 2 3 |
AboutCharmSection: About PrivacyStatementCharmSection: Privacy statement SupportCharmSection: Contact/support |
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:
|
1 |
get { return Published.ToString("F", new CultureInfo("nl-nl")); } |
to become:
|
1 |
get { return Published.ToString("F"); } |
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