Windows Universal Apps: Localization

Article
1/17/2024

The Windows Store helps you reach a large audience. It provides support for distributing your app worldwide and takes care of all the financial intricacies. You could choose to create only an English version of your app or an app in your own language, but that would reduce your potential audience. The Windows Store serves hundreds of markets and over a hundred different languages, so ignoring them greatly reduces the audience for your app. fortunately, the Windows Runtime exposes functionality that simplifies the creation of globalized apps. Making your app world-ready involves two things- Globalization and Localization.

Globalization

Globalization is the process of making sure that your app works well in multiple cultures. It is often confused with localization, which is the process of customizing your app for a specific language and culture Globalization refers to making your app act appropriately for different markets without any changes or customizations.

Localization

Localization refers making our app to adapt new market. To localize an app we have to remove all the hard coded strings and images and instead mark such elements with a unique identifier.

Implementing Localization

http://poojabaraskar.azurewebsites.net/wp-content/uploads/2015/07/13.png

To share the view I have dragged one of the MainPage.xaml file to shared project and then deleted it from the other two projects. Now there is a common MainPage.xamlfile for both the projects. The view of project looks like this in Solution Explorer.

http://poojabaraskar.azurewebsites.net/wp-content/uploads/2015/07/22.png

Now lets us create a simple UI containing a TextBlock only. The first thing we have to do is to remove all the hardcoded strings from the Xaml file and give that element an x:Uid. The x:Uid marking is completely independent from an element’s Name. The former is specifically for the localization process, and the latter is for the benefit of code-behind. Now our code looks like this

http://poojabaraskar.azurewebsites.net/wp-content/uploads/2015/07/00.png

The next step is to create a new folder in Shared project. Name it “Strings”. In Strings folder we are going to keep all our resource file specific to each language in their specific folder. We are going to localize this app to French and our default language will be US-English. So we have to create folders for each of then. The name of folder should exactly match the language code such as fr-FR for French(France) and hi-IN for Hindi(India). We have to add as much folders as the languages we want to target and then we have to add resource file in each language specific folder which is going to contain all the translated strings. So here in our app I have created two folders Fr-FR for French and en-US for US English and added a resource file in each of them.

http://poojabaraskar.azurewebsites.net/wp-content/uploads/2015/07/0.png

To add a resource file, right click on the specific folder and select Add->New Item ->Resource File(.resw).The default name is fine, you need not to change that.

http://poojabaraskar.azurewebsites.net/wp-content/uploads/2015/07/35.png

Now open the first Resource file, here in our case it is en-US. Here in the Name section we have to mention the x:Uid of element with the property which we want to change, it can be string, color , height , width or any other property and in the value section we have to provide its value which we want to be shown if the app runs in that specific culture. In our demo app we are accessing the Text and color property of TextBlock whose X:uid was “message”

http://poojabaraskar.azurewebsites.net/wp-content/uploads/2015/07/9.png

Similarly we will change other resource file which is for French. Here in the value section of message.Text property we will put the translated text which will be in French. Now if we run the app, it will run in our default language. My default language is US English, so the output view will be from en-US resource file. Also notice the foreground color of text.

http://poojabaraskar.azurewebsites.net/wp-content/uploads/2015/07/42.png

Let us change our language to French and the run the app. To do this go to Control Panel->Clock, Language, and Region -> Language Select Add a Language and then select France. To make any selected language our default language we have to move it to top. The language here on the top of the list is automatically selected as our default language.

http://poojabaraskar.azurewebsites.net/wp-content/uploads/2015/07/6.png

Now we have changed our default language to French. Now run the app again, we have successfully localized our app to French

http://poojabaraskar.azurewebsites.net/wp-content/uploads/2015/07/7.png

Localizing Images

For localizing an image put them into language specific folder as shown in below image.

http://poojabaraskar.azurewebsites.net/wp-content/uploads/2015/07/341.png

Notice there in properties while selecting image source we don’t have to call the language specific image. Windows RT is smart enough to do that for you. Here for demo I have used images with different colors so that we can easily differentiate them. To know how your app looks at different screen sizes you can instantly view that in the Device window which you can find in Design Tab or you can also change the resolution on Simulator and Emulator at run time. This is how our app looks with devices with low resolution.

http://poojabaraskar.azurewebsites.net/wp-content/uploads/2015/07/361.png

This is how our app looks with devices with high resolution.

http://poojabaraskar.azurewebsites.net/wp-content/uploads/2015/07/381.png

If we run the app with French as our default language on PC we get this result. Also notice the app name.

http://poojabaraskar.azurewebsites.net/wp-content/uploads/2015/07/45.png

And if we run the app with English US as default language on a low resolution device we get this result

http://poojabaraskar.azurewebsites.net/wp-content/uploads/2015/07/412.png

Multilingual App Toolkit

The Multilingual App Toolkit , is an extension to Visual Studio 2012 for Windows 8. By Machine Translation service it localize our app easily. We have to download it and enable it.

http://poojabaraskar.azurewebsites.net/wp-content/uploads/2015/07/17.png

I have created another Universal blank app but we have to add and enable Multilingual App Toolkit in both the projects as sharing is not available now. Now we have an .xlf file added in a new subfolder to your project . This default .xlf file is for test only pseudo language. Here I am creating resources for Windows Store App project but we have to follow the same steps for Windows Phone also. I have created a simple UI with some TextBlock and added a default resource file with the properties that need to be localized.

http://poojabaraskar.azurewebsites.net/wp-content/uploads/2015/07/18.png

If you want to add languages, Right click on the project and select Add translation languages

http://poojabaraskar.azurewebsites.net/wp-content/uploads/2015/07/19.png

This produces a dialog box as shown

http://poojabaraskar.azurewebsites.net/wp-content/uploads/2015/07/20.png

In this dialog, Pseudo Language and our default English language is already selected, but we can scroll down and select Chinese (Traditional) [zh-Hant] from the list. After pressing OK, the MultilingualResources folder now has two .xlf files, one for Pseudo Language, and one for Traditional Chinese. Now rebuild the app. This populates each .xlf file with a translation for each item from the default language .resw file. Initially, each translation is just the duplicated English text. However, for some languages, such as the two we’ve chosen, you can generate machine translations based on the Microsoft Translator service! To do this for the entire file, right-click on each.xlf file and select Generate machine translations

. http://poojabaraskar.azurewebsites.net/wp-content/uploads/2015/07/221.png

Now we’ve got initial translations for all of our resources, which you can see by opening each .xlf file and examining the list inside the multilingual editor.

http://poojabaraskar.azurewebsites.net/wp-content/uploads/2015/07/26.png

Notice that the generated translations are automatically placed in a “Needs Review” state. And here we definitely don’t want the Blue text translated to its equivalent Chinese. This isn’t a user-visible string, and is not a valid value foreground. Instead, let’s translate it to Red, which will serve as our language specific background color. We have one more change to make. We don’t want “My English App” to be translated to Chinese, but rather “My Chinese App “so we have to correct that into the appropriate spot of the Chinese .xlf file.

http://poojabaraskar.azurewebsites.net/wp-content/uploads/2015/07/28.png

Rebuild the project and run it first with English-US as default language

http://poojabaraskar.azurewebsites.net/wp-content/uploads/2015/07/29.png

Now with Chinese as default language

http://poojabaraskar.azurewebsites.net/wp-content/uploads/2015/07/30.png

Pseudo Language

Pseudo Language is designed to test how well our app will look when it is. To test your app with Pseudo Language we have to enable it from Control Panel-> Clock, Language, and Region -> Language. Click Add a language. Pseudo Language is hidden, so we have to search for it In the search box, type qps-ploc. Select English (pseudo-qps) and click Add. And ensure that English (qps-ploc) is at the top of your preferred language list. Now you can test you app with Pseudo language

http://poojabaraskar.azurewebsites.net/wp-content/uploads/2015/07/321.png http://poojabaraskar.azurewebsites.net/wp-content/uploads/2015/07/33.png

Accessing resources from code behind

Sometimes we may need to access the resources from code behind. We can do this with the help of ResourceManager class which resides in Windows.ApplicationModel.Resources.Core namespace.

ResourceCandidate resource1 = ResourceManager.Current.MainResourceMap.GetValue

("Resources/message/Foreground", ResourceContext.GetForCurrentView());

string foreground = resource1.ValueAsString;

Tips and Best practices

Make sure your app’s default language matches the language code for your default.resw file.
Remove the resources for Pseudo Language before uploading the App to Store.
. The Multilingual App Toolkit Customer Preview incorrectly used the target culture "zh-cht" for Chinese Traditional and "zh-chs" for Chinese Simplified. This has been corrected from previous releases.To correct this error, manually modify the .xlf files that contain the incorrect codes. Change "zh-cht" to "zh-hant" and "zh-chs" to "zh-hans".

Sample program

Download the source code from here Localization Demo and Multilingual App Toolkit Demo

Reference

"Windows 8.1 Apps with XAML and C# Unleashed" (Book)

Share via