How to localize your Windows Phone App

In this post, i’ll explain how to localize your Windows Phone app, which simply means that we can present the various bits of text in our app in different languages.

For example, you might want to support both English speakers and Arabic speakers opening up the number of markets you could potentially sell your app in. Now, there’s a bit more to selling in different markets than simply localizing your app. However, that would be a big step in the right direction.

So our game plan in this post is, first of all, to talk about this special file called the appresources.resx file and how it allows us to store name value pairs that you can access in your declarative XAML code. We can also do it in C# code. But Here i will only demo the XAML way. Then we’ll see how to create langauges of region-specific variations of that file using Visual Studio tools and finally we’ll learn how the windows phone 8 operating system will choose the correct version of the appresources.resx file based on the current user’s language and region selections.

So lets start making that:

if you expand the resources folder, you will see that there’s this file appresources.resx file. Screenshot (68)

Double click it to open it up, in the main area you will see a special designer that has a series of name and value pairs.

Screenshot (69)

So on the left-hand side are the names of the settings that we’re going yo bind to and on the right-hand side are the settings for a given language. Which language? we can see the very last attribute here, the resource language, is set to EN-US. EN means English and US is the region. In this case it means USA.

Therefore, these settings should be used in the USA for English speakers. It’s also the default app resources file. And you’ll see the difference between the default and the other languages and regions that was supported. The name value pairs are mostly snippets of the text that we’ll use throughout the app. However, the resource allow flow direction, right here, is a setting for which direction the characters should be representing for this particular language. So as you know, some languages are read from right to left. And this setting would be used throughout the app for this purpose.

So as you can see, there’s an application title set to my application. What if you wanted to convert the text block on our mainpage.xaml to utilize this app resources setting? Well, you would use a binding expression like so. Let’s get over there. Open the mainpage.xaml and there let’s go ahead and change this.

Screenshot (67)

So instead of hard coding “My Application”,

set the text to

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

Screenshot (73)

So, as you can see, we replaces the hard coded text to this binding expression right here.

The path attribute here of the binding expression refers to the localizedstrings.cs file here in the project. It simply just creates an instance of app resources, which provides us access to the appropriate app resources file based on the region and preferred language of the phone’s user.

So the “LocalizedResources.ApplicationTitle” names or references the specific name entry in the appresources.resx file The source attribute is bound to LozalizedStrings. Again, that’s where the compiler can find the source of the localized resources property. It’s part of the LocalizedStrings.cs file. Specifically its this class LocalizedStrings. So at this point we’re only supporting English in the USA. I’d like to supprt the Arabic Language no matter which region of the world that the user resides. So to do that,

follow the following steps:

  1. Click the project name, not the solution
  2. Right click it
  3. Select properties window
  4. Under supported cultures, select Arabic (or any other language you want to support)
  5. Save
  6. The properties tab

So now when you do that, notice that there’s a new app resources file added. It’s appresources.ar.resx Screenshot (74)

The AR is for Arabic. So let’s double click it to open it up in the main area, and you can see that by default it’s in English. So whatever you do, do not translate the names into another language. Leave them in English and then change the values to the language that you want to support. The names are tokens that are used programmatically. The values are what will be displayed to the end user. Lets run the app and use the phone emulator start button in order to change the language of the phone from English to Arabic.

Steps:

You can follow the slides for the steps or read them here

  1. Go to start button
  2. Settings
  3. System
  4. Go down to language and region and set it to Arabic instead of English US.
  5. And then if you look at the very bottom, click a button that says restart phone *restart required*.
  6. Just to let you know you’re on the right track here, you see ‘مع السلامة’
  7. Now at this point VS might disconnect from the Emulator, thats okay. You don’t need to be in debug mode in VS, just focus on the phone Emulator for now.
  8. After the Phone Emulator switched on again (It will use the last deployed version of the app)
  9. Once the phone emulator reboots, you can swipe over to the lest and see that all of the options are now in Arabic.
  10. scroll down to you app and click it.
  11. You can see that instead of “My application”, the text says “طلبى”.

The title has been replaced with the title that we entered in the appresources.ar.resx file. Very cool!

To recap, the big take away of this post was how to localize your app using the app resources files, the project properties and some binding syntax. we saw how you could set the language and region of your phone to test our localization customizations as well. There you go, you just doubled the potential for your app.

For any questions or feedback you can contact me on twitter @yasabdelhady or email me at yasmine.abdelhady@hotmail.com

Advertisements

One thought on “How to localize your Windows Phone App

  1. Pingback: Yasmine Abdelhady | Localizing Windows Phone App Bar

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s