Windows Phone 8 App Localization

Introduction

Windows Phone 8 Project templates now include built-in support for localization of apps. What is localization? When you develop a Windows Phone app and need to target a different region's language then you need to localize the app, in simple terms the localization process refers to translation of the application user interface (UI) or adapting graphics for a specific culture, it is the step when you actually take your content and create specific versions of it for various locales and not only the content it also covers swapping icons and graphics or even sounds and other audio for particular cultures.

Let's create an app in Windows Phone 8 to see how we can localize an app, in this application I am showing how to localize your application title.

The first thing you need to do is ensure you have chosen "Windows Phone OS 8.0" as the target platform while creating a new app.

Step 1: Create a new Windows Phone 8 app project with the target platform 8.0.

As I said, built-in support for localization is available in the 8.0 version; it is not created with the 7.1 template, you can see the difference in the image below, when you create a Windows Phone 8.0 app, a resource file is located in the "Resources" folder for each supported culture and a class named "LocalizedStrings" is created and used as a XAML binding helper construct.

windowsphone8-localization1.gif

A default instance of the "LocalizedStrings" helper class is created in the App.xaml file.

windowsphone8-localization2.gif

Step 2: Now bind the application title on the main page to a specific property of the global resource.

 <!--TitlePanel contains the name of the application and page title-->
 
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
 
     <TextBlock Text="{Binding Path=LocalizedResources.ApplicationTitle}"
                
 Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
 
     <TextBlock Text="{Binding Path=LocalizedResources.MainPageTitle}" Margin="9,-7,0,0"
 
                 Style="{StaticResource PhoneTextTitle1Style}"/>
 
</StackPanel>

Visual Studio also initializes the string table values of the language parameters to match the language of the resource file's locale and the traditional flow direction of its script. The InitializeLanguage() function in the App.xaml.cs file sets the app's RootFrame.Language based on the value of the AppResoures.ResourceLanguage resource, and its RootFrame.lowDirection based on the value of the AppResources.ResourceFlowDirection resource. See that in the following image:

windowsphone8-localization3.gif

Step 3: Add new language/culture which-ever you want to add. How?

Go to the project properties and under the Application tab you can choose the languages you want. As I add German (Germany).

windowsphone8-localization4.gif

After adding new languages, for each culture, one new resource file has been created automatically in the Resources folder.

windowsphone8-localization5.gif

All resource files contain all the details and you can check the details without running the application. By just opening the resource file as in the following figure:

When you open both the Resources.resx files you will see the ApplicationTitle in various languages.

windowsphone8-localization6a.gif

windowsphone8-localization7a.gif

Step 4: Now test your application in the emulator to just run your application and you will see the ApplicationTitle in the default language.

windowsphone8-localization13.gif

Now to test the new culture, you need to switch your emulator to a different language in the "Settings" area.

To change the emulator language use the following procedure.

Step 1: Click the Start button, and then click the arrow icon.

windowsphone8-localization8.gif

Step 2: Choose Settings from the item list and then click region & language.

windowsphone8-localization9.gif

windowsphone8-localization10.gif

Step 3: Choose the display language of your added Culture Name. As I choose Deutsch for German(Germany).

windowsphone8-localization11.gif

windowsphone8-localization12.gif

Step 4: Click Tap here to accept changes and restart your phone.

windowsphone8-localization15.gif

The emulator changes the setting, and returns to the Start Screen.

Then start your application and then the app indeed presents a translated UI.

windowsphone8-localization14.gif

Thank You..


Similar Articles