Localizing your Windows Phone app – why and how?

Localizing your Windows Phone app – why and how?

  • Comments 1

 

Christian HissibiniWindows Phone developer Christian Hissibini (Histech Solutions) shares how he created apps that target multiple languages and countries. His apps have been successful in both the French France and Canadian English and French stores.

Note from Susan: I hope Christian’s story helps you build better apps for multiple markets, don’t forget Canadian developers can earn rewards for their apps through Developer Movement!

This blog post is also available in French/cet post est aussi disponible en francais

Now take it away Christian!

Generally, when you start creating a new application, that’s part of a brilliant an idea, or a completely absurd idea, we secretly hope it will become “The Next Big Thing” :).

Mission Objective: “The Next Big Thing”

The trick is to seduce the maximum number of users… To this end, the Windows Phone platform offers you the option of making your application available across the entire world or to restrict it to specific countries.

But to guarantee lots of downloads and good adoption, the application needs to be inviting for a specific public, culture, geographic area and language; hence the practice of localization.

In this post we will cover

  • What is localizing an application
  • How to prepare your application for an international market
  • Globalizing a Windows Phone application
  • Localizing a Windows Phone application
  • How do you add a new language to your application
  • How do you test your localized applicaiton

What is localizing an application?

You have probably already guessed, localizing an application is adapting it to other languages, markets, cultures and regions.

There are actually two aspects to consider: Globalization and localization.

Globalization allows an application, when running, to consider cultural aspects for the user (date format, currency, etc…)

localization is about setting up the application to consider the language and regional parameters of the user. This consists of translating text, reading direction, suitable visuals, etc.

Now that we have a better understanding of the concepts, let’s take a look at a few advantages of localizing, to try and convert the skeptics.

What are the advantages of localization?

  • The user experience is far better
  • It allows you to reach a greater market (the whole world)
  • You get more downloads
  • The adoption rate of the application is much higher
  • Etc.

Put simply, this will help your app become “the Next Big Thing” :). All these points have a positive impact on your application sales in different markets and generate more traffic and users for your application.

Convinced? Well then lets see how to prepare our application so it’s ready to conquer the world!

How to prepare your application for an international market?

Planning to introduce localization from the early stages is easiest, but even if you have a completed project, don’t worry because thanks to the .NET infrastructure, integration is super easy to put in place. Globalization and localization become child's play.

1. Globalizing a Windows Phone application

As we said earlier, globalization is all about giving the user a more familiar cultural environment.

To do this we access the CultureInfo class. This contains language codes for different countries. For example, en-US for US English or fr-CA for French Canada. (which is different from fr-FR for French-France). The instance is ready to be used to format all your local strings (dates, times, currencies).

Here is a code snippet showing how you can modify the current culture using CultureInfo

String cul; 
cul = "fr-CA";
CultureInfo newCulture = new CultureInfo(cul); 
Thread.CurrentThread.CurrentCulture = newCulture;
Thread.CurrentThread.CurrentUICulture = newCulture;

MSDN includes a tutorial “How to build a globalized app for Windows Phone”. In this document you will find different ways to globalize an application and a sample globalized application you can download.

2. Localizing a Windows Phone application

Note: in this context, localizing means adapting to the local language and has nothing to do with GPS location…

Here again, the platform makes our lives easier, because when we create a new Windows Phone project, a resources folder (Resources) is automatically added to the solution. This folder contains a file called AppResources.resx. This file contains strings that you will need to translate. image

When you click on the AppResources.resx file, the resource editor opens.

image

 

As you can see, by default, this file controls values such as ResourceLanguage (which is our application’s default language), ResourceFlowDirection (which determines if the text is read right to left or left to right).

How do you add a new element to the resources file?

To add a new element, you just click on a new line and add the name and value for the entry. Couldn’t be simpler right? :)

Well, still it never hurts to include a screenshot

image

Now that we know how to add new values to the resources file, let’s see how we can access these values from our code.

How to access the resource file from our code?

The link to the resources file is done through the XAML.

basically, you just replace the hard-coded text of your attributes with the name of the corresponding resource.

An example is worth a thousand words.

Suppose we want to include the following text “If you lie to the compiler, it will get its revenge” a wonderful quote from Henry Spencer which we will need to translate later.

Without localization, our code would look like this:

<TextBlock Text="Si on ment à un compilateur, il prendra sa revanche." 
Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>

After localization, the code looks like this :

<TextBlock Text="{Binding Path=LocalizedResources.CitationHenry, Source={StaticResource LocalizedStrings}}" 
Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>

In the second example, the TextBlock reads it’s value for the Text attribute from the resource called CitationHenry in the file AppResources.resx.

In order for this to work, we would of course need to add another entry to our resources file.

image

 

The more observant among us will no doubt have noticed that the when you create a new project, if you look at the comments in the default MainPage.xaml of your solution, there are comments regarding localization.

 <!-- 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.
 -->

So it is important to look at those little green comments in the generated files when you create a new project :)

In the preceding example we saw how to localize our text, but what about images?

Localizing images

In practice, localizing an image is the same principle as localizing text. It’s just a matter of specifying the URI for your resource as follows.

  <Image Source="{Binding Path=LocalizedResources.ImageURI, Source={StaticResource LocalizedStrings}}"/>       

Now that we have a grasp on the principles of localization, it’s time to see how we can make our application accessible to the greatest possible audience and as you have no doubt guessed, that’s done by making it multilingual!

How do you add a new language to your application?

Adding one or more languages to your application comes back to adding additional resource files.

To my knowledge there are 2 ways to do this:

Method 1 – Manually

To do it manually, just open the project properties by double clicking on “Properties” in the  Solution Explorer and then selecting the languages you want to support in the “Supported Cultures” list box and the rebuilding the solution to create the corresponding resource files.

Once the AppResources files are created, you will need to update each file with appropriate corresponding values.

image

Method 2 – Using the Multilingual App Toolkit

This is my favorite method :) and you will quickly see why…

First you will need to download and install the Multilingual App Toolkit. This is an extension for Visual Studio which simplifies translation.

When you download the toolkit, choose the language you prefer to work with.

Once installation is complete, in the Visual Studio menu, choose Tools | Enable Multilingual Toolkit.

In Solution Explorer, right click on the project and choose Add translation languages.

A window will open and you can select the desired languages and then when you click OK, the additional resource files are automatically generated.

image

here you can see my application ( the original code was in French, so you can see the US English resource files added)

image

If you click on this new resource file, you will see that all the entries from your original AppResources file are there, but none of them are translated.

At this point, you have the choice between translating everything manually or to use the Translation tool provided by the toolkit (check out the Translate button).

image

The translation won’t be perfect, so it’s a VERY good idea to proof read or to have a friend who speaks the language proof read your translations, this will avoid confusion and accidental international incidents :)

Now we have a new language integrated into our project. It’s time to test it and hopefully whoop with joy at our success!

How to test the application?

We start by building our solution and launching it in the emulator (or on our phone).

In the emulator, select Settings | Language + region  then modify the Phone language to French (or whatever language you want to test) then click Restart Phone.

The application will restart on the emulator (or on your phone) and now??? You have just climbed one more summit towards your goal of world domination!!! Remember our mission objective: The Next Big Thing!!

We can’t finish this party without sharing a few best practices that will help with strong localization.

Best practices for localization

  • Separate the resource strings from the code (i.e. avoid having code that sets a hard coded string value, this allows your code to be independent of the language and makes it easier to support additional languages)
  • Do not feel you have to localize everything (you probably don’t need to start localizing button icons, that said there may be times…)
  • Be prepared for longer text strings (often a translated phrase or word is longer than the original)
  • Localize phrases rather than separate words (The sentences will make more sense)
  • Make sure you list parameters in the right order (if your list is in alphabetical order, and you translate the strings, is it still in alphabetical order?)
  • Use unique attributes to identify your resources
  • Pick the right method for translation

For more details on best practices, check out MSDN “Localization best practices for Windows Phone

Going further…

Here are some online resources I found useful both in researching this article and for my own applications. They will help you get further into the world of localization.

- The superb tutorial « How do you add French to an English Phone app? », by Susan Ibach (@HockeyGeekGirl) (Note from Susan who is reading this because she is translating Christian’s blog post from the original French…thank you, glad you found the post helpful)

- MSDN article « How to build a globalized app for Windowws Phone».

- MSDN article « How to build a localized app for Windows Phone »

- MSDN article « Localization best practices for Windows Phone »

Conclusion

We have seen that localizing a Windows Phone application brings some big advantages and it’s important to consider localization logic right from the design phase and finally that making it happen is really child’s play.

If there is anything in this article you had trouble following, please don’t hesitate to ask questions!
Good luck with your attempt at the “The Next Big Thing” :)

P.S. A quick note from Susan – first of all: another great post Christian, thank you! Second, a reminder that Canadian Developers can earn rewards as they learn to code and publish apps on the Windows platforms, visit Developer Movement to find out how you can earn points and cash them in for rewards!

Leave a Comment
  • Please add 3 and 1 and type the answer here:
  • Post
  • Excelent post, my friend! Very useful!

    Thank you.

Page 1 of 1 (1 items)