The multilingual toolkit for Windows Phone allows you to support multiple languages and will even help do the translation!

Hello/Bonjour!

In Canada we have a specific need to support both French and English with our applications. In fact any phone developer can publish their app to countries around the world. You might be surprised to see where your app takes off. Supporting other languages can open your application to new audiences.

Chances are you built your app in English.

Take this simple page on a phone app, it has a button, and a label. All the text is in English

image

Strings you can switch from English to French (or any other language) are stored in a resources file.

image

If you open this file you will see that the text for my button and my title are not currently listed or read from this file.

image

In order to use the multilingual features, I need the app to read all the strings I will want displayed in other languages (titles, labels, buttons, error messages, etc.) from the resource file.

Step 1 Add strings to the resource file

Add the strings you will want to translate to the resource file. You can give them any Name you want, but you will probably want some sort of naming convention so you can remember which name goes with which string.

image

Step 2 Edit code to read strings from resource file

Edit the XAML for those controls to indicate I want the text strings read from the Resources file instead of directly from the properties of the control.

If you have just created a new project, there should be comments at the top of your XAML file showing you how you bind a property to a value from a resource file

<!-- LOCALIZATION NOTE:
            To localize the displayed strings copy their values to appropriately named
            keys in the app's neutral language resource file (AppResources.resx) then
            replace the hard-coded text value between the attributes' quotation marks
            with the binding clause whose path points to that string name.

            For example:

                Text="{Binding Path=LocalizedResources.ApplicationTitle, Source={StaticResource LocalizedStrings}}"

            This binding points to the template's string resource named "ApplicationTitle".

            Adding supported languages in the Project Properties tab will create a
            new resx file per language that can carry the translated values of your
            UI strings. The binding in these examples will cause the value of the
            attributes to be drawn from the .resx file that matches the
            CurrentUICulture of the app at run time.
         -->

Here is the XAML for my page title and button before

<TextBlock Text="Welcome" 
      Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
<Button    Content="Say Hello" HorizontalAlignment="Left" 
      Margin="161,220,0,0" VerticalAlignment="Top" 
      Height="85" Width="191"/>
  

and after I change the XAML to read the values from the resources file.

            <TextBlock Text="{Binding Path=LocalizedResources.PageTitle, 
                       Source={StaticResource LocalizedStrings}}"
                       Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
            <Button Content="{Binding Path=LocalizedResources.ButtonHelloLabel, 
                  Source={StaticResource LocalizedStrings}}" HorizontalAlignment="Left" 
                    Margin="161,220,0,0" VerticalAlignment="Top" Height="85" Width="191"/>

Okay now we have an app with strings read from a resource file, you could just set up resource files for each language with all the translated strings, but WAIT! You might want to consider this alternative

Step 3 Install the Multilingual App Toolkit

Download and install the Multilingual App Toolkit. (Note: I installed the English Language toolkit for this example.)

After you install it, from the menu in Visual Studio select Tools | Enable Multilingual App Toolkit

Step 4 Add your new language

In solution explorer, right click your project file and select Add Translation Languages.

When the windows is displayed select the language you wish to add. Given that I am in Canada, I will choose French Canada. (fr-CA)

image

When I click OK, the tool generates a French resources file for me

image

If you open that file, you will see that the strings are all listed. The strings are still listed in English.

image

Step 5 Have Microsoft Translation Provider translate the strings

Here’s the cool part of the translation tool! Now I choose Translate | Translate All from the toolbar and the tool goes to the Microsoft translation provider to translate my strings into French. It may not be perfect, but it’s a great start!

image

Here’s the list of my strings after the translation is completed. Of course I will still want to proof read the translations, but this could still be a great way to do a first cut of your translation. You can even send the .xlf file to a friend to proof read. They can install the Translation toolkit and use that to view and edit the file.

image

Step 6 Test it

Build your solution

Run the application in the emulator (it will show up in English)

In the Emulator choose Settings

image

Choose Language + region

image

Change the language to French

image

At the bottom of the screen you will see a red message saying restart required, so select the button saying restart phone within the emulator. This will also cause your app to stop debugging.

Launch your app in the emulator again and…

image

If you want to know more about the toolkit, I recommend checking out this blog and video by the Windows Phone team “Localization made easy with the Windows Phone Toolkit”

Happy coding!