Written by:
7/27/2011 9:21 AM 

Getting Started

First, create the app as you normally would.  I’m just creating a simple Windows Phone application (Source at the end).  First, create the app, and then close it.  Yes, close it.  Now, navigate in Windows Explorer to the *.csproj file, and open it in notepad.  You’re going to add the supported cultures here.  You would think you could do this from within Visual Studio, but no, you can’t.  In the SupportedCultures tag, you’re going to add the supported cultures, separated by (and ending with) a semicolon.

Save the file and close it.  Go back to Visual Studio and open it.  Go to the Project Properties, and select a Neutral Language.  One must be selected.  Since most of my target audience is going to be American, I’m choosing English (United States).  Then click ok and close the project properties.

To keep things organized, create a new folder in the project, call it Resources.  Now, right click that folder and add a New Item.  Choose Resource File, and name it AppResources.resx.  When that resource file opens, change the Access Modifier (at the top) to Public (this caused me a problem until I figured it out).

This file will contain all the strings for your Neutral Language.  Each string will have a name, which is how you will refer to it in your code/markup, and a value, which is what will be displayed when that string name is referenced.  The comment column is optional, but I like to put the English version of the string in that column, that way when I copy the original resource file in order to make other languages, I always have a reference as to what the string means in my language.

Now in the Resources folder, at a new class, and call it LocalizedStrings.cs.  The LocalizedStrings class should look like this:

This is the class that will access your AppResources file, which contains all your localized strings.

Now let’s open the App.xaml file.  You need to add the following to the Application.Resources tag, replacing LocalizedApp with your namespace, of course.

This is so that you can use the localized strings in your xaml code.  Now let’s go back to the resource file.  In our simple app, there are title and page name textblocks.  Let’s localize them first.  We’ll add a couple of other strings as well.  Create a few strings as follows:

Ok.  Let’s go look at the markup on MainPage.xaml. 

These text bindings, LocalizedResources.Name, are all we need to bind strings to our textblocks.  Let’s see what it looks like in the emulator:

Ok, so I really like the look of that blue Nokia Sea Rey!  Back to the point – our localized strings appear just fine.  Now let’s add a button, a messagebox, and an applicationbar.  To add the applicationbar, you can’t do it in xaml.  This is because the ApplicationBar control is not a part of Silverlight, so it cannot be bound.  So we’ll have to do it in code.  Add a using for Microsoft.Phone.Shell, and while you’re at it, add one for LocalizedApp.Resources (substituting your namespace).  I’m also going to add an image for my button, directly to the root directory, since there will only be one image and this is just a demo.

Here’s what my xaml looks like now:

Notice that I’ve bound the Content property of the button to the LocalizedResource.  Next, the code.

The using for LocalizedApp.Resources is necessary for the bindings to the AppResources file, and the using Microsoft.Phone.Shell is necessary for the ApplicationBar.  Notice that instead of putting text into the MessageBoxes, the ApplicationBarMenuItems, or the ApplicationBarMenuButtons, there are bindings to the AppResources file. 

We’re now done with the English version of our app, so let’s take it for a spin:

Yes, I want Nokia to make a CDMA phone very badly, so I can use it on Verizon.  Notice that never did we put a string in code.  They are all in the resource file.  Now let’s move on to translating it into Spanish.

Adding Languages

First, how about a few translation tips:

·         Translate both directions

o   Whether using Bing, Babelfish, Google, or some other translator, translate the word or phrase, then translate it back to English to see if you get back what you expect.

o   Your translations coming back to English may not be exact, but do they mean the same thing?

·         Remove capital letters

o   Use lower case when translating.  Some languages won’t translate properly with caps

o   Some languages return caps on some words.  If they do, leave it – it does matter.

·         If it doesn’t translate as you would expect, try a different word that is similar

o   Instead of

·         Avoid constructing strings dynamically

o   Word order is different in different languages

o   Create entire strings in the AppResources file (see MessageBoxText in the Resource file above)

·         Allow for greater string length (some languages will take more space to say the same thing)

o   Use the TextWrapping property to allow wrapping in TextBlocks

o   Allow about 40% more space for strings than required in English

·         Do not reuse strings

o   Sometimes the same word can be used in other places in English, but context causes another word to be appropriate in another language (esp. words that can be nouns OR verbs)

Now, let’s get on with the Converting.  First, in Solution Explorer, select your AppResources.resx file and make a copy of it in the same folder.  Rename that copy to AppResources.es-ES.resx.  Each language you use will have a different identifier.  These can be found at http://msdn.microsoft.com/en-us/library/ms533052%28v=vs.85%29.aspx with the first two letters being the language in lower case, followed by a hyphen, then the two letter country code in upper case. 

Open the new AppResources.es-ES.resx file, and in the value column, translate all those strings.  This is why I like to use the comment column – I can see the original meaning.  Once you’re done, rebuild the project, and you’re ready to test it.  Oh – but OOPS!  How do you get your emulator to speak Spanish?  You can’t.  At least not the way you would expect to.  If you go into settings and change the region and/or language, it has to reset, and then it ends up back to English.  No good.  So we’ll have to add code to trick it into displaying Spanish.  Add a using for System.Threading and System.Globalization.  Then add the following to the constructor of App.xaml.cs:

This will cause the emulator to run this program in Spanish.  Substitute any language you wish to test in.  Now let’s see what we get:

Notice how the text in most cases is longer than in English?  This is why it is important to account for extra space for text.  Here is an example that didn’t do so:

See how the TextBlocks overlap the TextBoxes?  It looks just plain unprofessional.  And since this is my own app (before making fixes, of course), I don’t feel bad criticizing it.  It is an unfinished work in this screenshot, after all.  ;)

There is one last thing to do.  Localize the Tile.  This can be a fairly uncomplicated project in which you create a C++ project to make the dll files that will allow the localization of the tiles as explained here http://msdn.microsoft.com/en-us/library/ff967550%28v=VS.92%29.aspx, or you can use this tool, http://patrickgetzmann.wordpress.com/wp7-localize/ created by Patrick Getzmann.  I choose to use Patrick’s tool.  I did get it to work using the Microsoft way, but why go to all the trouble when Patrick created this beautiful tool.  Also, if you are using Visual C# Express, you won’t be able to create a C++ project.  It’s very simple, and self-explanatory.  Once you create the necessary .dll files, select them in the solution explorer, right-click and select properties, and change the build action to "content".

The problem with testing tiles is that the only way you can test it, once created, is to put the app on an actual phone, and switch that phone to the language you want to test.  Since most phones don’t have many languages, and some only have one, this can be a problem.  My phone has Spanish as well as English, so I’ve tested with Spanish and just assume that the remaining languages work. 

As far as supported languages for tile localization, in NoDo there are only five (other than default, which I am not sure is just English, or whatever language your phone is in).  Those are English (en-GB), Spanish (es-ES), French (fr-FR), German (de-DE), and Italian (it-IT).  There will be more languages for Mango, though I have not yet researched what those will be.

I have a friend who is validating my language translations for me, and when she gets done, I will be submitting my updated, localized app to the Marketplace.  We shall see what the tedious process is for that.  Keep in mind when translating, that you will need to do translations for your Marketplace descriptions and your keywords as well.  Resource types other than strings can be used in the resource file as well.  Videos, images, and more.  This blog is just meant to be an introduction to the subject, and sticks with strings.

Here are the bits.

Thank you for taking the time to read my first blog post ever.

Rich

Additions:

I did not do this in the attached project.  I forgot all about it.  But after you use the above mentioned tool to create the necessary .dll files to localize the Titles, yyou need to edit the WMAppManifest.xml file as follows:

 <App xmlns="" 
		   ProductID="{10bc688e-8ca8-48fd-9870-f11d21149dae}" 
		   Title="@AppResLib.dll,-100"
		   RuntimeType="Silverlight" 
		   Version="1.0.0.0" 
		   Genre="apps.normal"  
		   Author="LocalizedApp author" 
		   Description="Sample description" 
		   Publisher="LocalizedApp">

Change the Title to refer to the .dll, AND:

Change the Title tag to refer to the .dll file.  These two steps are what will get you localized tiles.

Also, a commenter noted that you can test the localization of the tiles in the emulator by changing the language in the emulator settings.  In my experience, the language setting can be changed, but part of that process is the reboot of the phone (or emulator), and on reboot, you come back up with the standard image that is in English, so that doesn't work for me.

Copyright ©2011 Rich Hopkins

Trackback Print

Tags:

Categories:

Location: Blogs Just Another Windows Phone Blog

Your name:
Your email:
	(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Add Comment   Cancel