Localizing your Windows Phone App

Hey folks, We are going to localize your app. That’s right. Localizing makes your great app even better. Make it more user friendly, enabled with multiple languages. Which will make your app reach out to wider range of users. Apart from English, the most used languages are Chinese, Spanish, Russian, and Italian. So it will be great for your app downloads and reviews. So enough talk, Let’s get to it..

First you need to download the “Multilingual App Toolkit” provided by Microsoft from here. Download and install it. The toolkit will integrate with Visual Studio.

After you are done installing the toolkit Open up Visual Studio and create a now project from the project templates.

Once its done, lets build a simple UI from 2 TextBlocks. Insert this XAML code in to the Grid named “ContentPanel”.

[code language=”xml”]
<StackPanel>
<TextBlock Margin=”12,0"
Text=””
TextWrapping=”Wrap”
Style=”{StaticResource PhoneTextLargeStyle}”
/>
<TextBlock Name=”txtBloack”
Margin=”12,24,0,0"
Text=””
TextWrapping=”Wrap”
Style=”{StaticResource PhoneTextLargeStyle}”
Foreground=”{StaticResource PhoneSubtleBrush}”
/>
</StackPanel>
[/code]

Next up is, to edit the AppResource file to add the strings you want to localize and use in your UI. To open up AppResource file in the Solution Explorer open the Resources folder and in there you can see a file called AppResources.resx. Double click and open it. In there you can see Name Value pairs of strings. These strings can be used in the XAML code and C# code by referencing the Key/Name associated with it. So im going to add following key value pairs to the AppResources.resx file.

ApplicationTitle Localization Demo

MainPageTitle multilingual

ApplicationBodyCode This is another sample text set using C# code.

ApplicationBodyXAML This is the content of the application. This is used to test the multilingual toolkit provided by Microsoft. This text is set using XAML

After adding the strings build the project by pressing F6 or by Build -> Build Solution menu selection so the changes are available for IntelliSense. After that we need to data bind those strings to the UI. To do that we use the following binding statement

[code language=”xml”]
Text=”{Binding Path=LocalizedResources.<<KeyValue>>, Source={StaticResource LocalizedStrings}}”
[/code]

You need to replace the <<KeyValue>> with the Key you added to the AppResources.resx file. To bind the data in XAML replace the old lines with the following lines.

To change the application title and page title add this code to the StackPanel named “TitlePanel” with the following

[code language=”xml”]
<TextBlock Text=”{Binding Path=LocalizedResources.ApplicationTitle, Source={StaticResource LocalizedStrings}}”
Style=”{StaticResource PhoneTextNormalStyle}”
Margin=”12,0"/>
<TextBlock Text=”{Binding Path=LocalizedResources.MainPageTitle, Source={StaticResource LocalizedStrings}}”
Margin=”9,-7,0,0"
Style=”{StaticResource PhoneTextTitle1Style}”/>
[/code]

Then you need to build the project to see the changes. Next up we need to add the other text to the UI. For that past in the following line of code inbetween the double quotes of the Text property of the first textBlock in the ContentPanel

[code language=”xml”]
{Binding Path=LocalizedResources.ApplicationBodyXAML, Source={StaticResource LocalizedStrings}}
[/code]

What this does is reference the ApplicationBodyXAML key and get the associated value which is a string and put it there as the text of the TextBlock. The complete code should look like this.

[code language=”xml”]
<StackPanel>
<TextBlock Margin=”12,0"
Text=”{Binding Path=LocalizedResources.ApplicationBodyXAML, Source={StaticResource LocalizedStrings}}”
TextWrapping=”Wrap”

/>
<TextBlock Name=”txtBloack”
Margin=”12,24,0,0"
Text=””
TextWrapping=”Wrap”
Foreground=”{StaticResource PhoneSubtleBrush}”
/>
</StackPanel>
[/code]

You are almost done. No :D just kidding.. only halfway there. Well close to halfway J. Next we need to set the text property of the second TextBlock using C# code. For that go to the code view of the MainPage.xaml file and in the constructor of the MainPage add the following code

[code language=”csharp”]
txtBloack.Text = AppResources.ApplicationBodyCode;
[/code]

And for this to work you need to add a using statement to the .cs file for the AppResources class. For that after typing AppResources properly at the end of the word press ctrl + . key to get the IntelliSense help and select the first option to add the using statement. The using statement should look like this.

using <<Your Project Name>>.Resources; // In this case <<Your Project name>>=LocalizationDemo

[code language=”csharp”]
using LocalizationDemo.Resources;
[/code]

Ok. Now you are half way there. Run the project on the emulator to see if all is working well. Guys, Its time to add the languages. :D

First you need to enable Multilingual App Toolkit in your project. For this from the Tools menu select “Enable Multilingual App Toolkit” and the toolkit is activated. Then you should see that in the Resources folder in the solution explorer there is a new file added called “AppResources.qps-ploc.xlf”. This is the pseudo language that is used to test applications. This resources file will house the keys and the translated strings for that language. The AppResources.resx file is the source for the translation.

Before starting take a good look at the Resources folder in the solution explorer and what are the files in it. Only AppResources.resx file. Well for now. :D Right click on the project and from the menu select “Add translation languages” and you will get a dialog box titled “Translation Languages”.

From the dialog box select the languages you want to add to your project. I will select Chinese Simplified and Russian for this demo. After you click ok notice the changes to your Resources folder in the solution explorer.

You can see 2 entries named “AppResources.ru-RU.xlf” and “AppResources.zh-Hans.xlf” are added to the folder. These are the resources file for the languages you selected. Now let us translate. Before continuing you need to ensure that you have internet connectivity for your development PC because the translation is done using internet. So internet connectivity is CHECK. We are good to go. :D

There are 2 ways of doing this. One is to right click on one of the newly added files and select “Generate machine translations”. After this you can see a progress bar and the strings are translated using internet connectivity. The second thing is to double click on the newly added file and a dialog box will open up. This is the Multilingual Editor. Here you can see the key value pairs and u can use this editor to manually edit/translate the strings. But we are going to use the Bing translator to do that. Notice that on the bottom section of the windows both Source and Translation sections have the same values. After the next step see what happens :D

On the toolbar there is a button called translate. From the dropdown select Translate All. Again you will see the same process bar and this time too it is translated. After it’s done. Now you can see the text is translated to the other language in this case its Chinese Simplified.

Click the save button and you are DONE. That’s it. Just a small bit of more work and you are ready..

Time to test the app. But fisrt. You need to know. To see the proper changes. You need to change the regional settings and language used by the phone from the phone’s Settings -> region+language settings. This takes time and phone/emulator needs to restart for the changes to take effect there is an esay way to test the app.

Open up the App.xaml.cs file and navigate to the constructor of the page that is App().. in here if you are familiar you can see a new method call is added namely InitializeLanguage(); we need to go to the definition of this method. To do that select it and press F12 or right click and select Go to definition on the menu. This will take you to the definition and there u can see some code enclosed in a try catch block. Within the try block add the following code.

[code language=”csharp”]
Thread.CurrentThread.CurrentCulture = new CultureInfo(“ru-RU”);
Thread.CurrentThread.CurrentUICulture = new CultureInfo(“ru-RU”);
[/code]

By adding this we are manually setting the Current Culture and Current UI culture to whatever the language code we give as the parameter to the construction. In this case it’s Russian. This code should not execute on the users device. So we enclose it in an if statement. Like this.

[code language=”csharp”]
if (Debugger.IsAttached)
{
Thread.CurrentThread.CurrentCulture = new CultureInfo(“ru-RU”);
Thread.CurrentThread.CurrentUICulture = new CultureInfo(“ru-RU”);
}
[/code]

This will make sure that the code will only run when the debugger is attached to the execution of the app. So guys we are DONE. :D one more thing to do. Test the app. Run it. And see the language is translated in to Russian. Great right? :D see how easy is to localize your app to any language you wish.. Some points to take away, if you have the resources always review the translations done by the computer. They may be wrong.

So there we go folks, you have localized your app. Congrats. :D Hope you have learned something. See you soon with another article. Later…

[contact-form][contact-field label=’Name’ type=’name’ required=’1'/][contact-field label=’Comment’ type=’textarea’ required=’1'/][/contact-form]