The blog of dlaa.me

While it might be convenient if everybody spoke the same language (or communicated via telepathy), that's not the world we live in. :) Therefore, building applications that can be easily translated to other languages is an important consideration. Fortunately, it's easy - and it's covered in the MSDN article How to: Build a Localized Application for Windows Phone. But what's not covered is how to localize the controls in the Silverlight for Windows Phone Toolkit. As you might expect, it's fairly similar, but I've had a few people ask about this explicitly and I decided to do a quick post on the topic. As long as I was at it, I figured I'd show the entire process from start to finish just to make things a little easier...

 

Prepare the emulator/phone

In order to monitor our progress as the sample application gets localized, it's helpful to work in a non-default language which makes it easy to identify the un-localized parts. I run an English operating system, so I'll use Spanish for this example:

1. Open the Settings application

2. Choose region & language

3. Open the Display language picker

4. Change to "Español"

5. Tap the link to restart the emulator/phone:

   

 

Create a new application

We'll start with a brand new application using the default template provided by the Visual Studio 2010 development tools:

1. From the File menu, choose New, then Project...

2. Go to the "Silverlight for Windows Phone" section and create a "Windows Phone Application" with the name of your choice

3. From the Project menu, choose Add New Item...

4. Select "Resources File" and name it AppResources.resx

5. Add an entry for Name="Title" and Value="welcome"

6. Open MainPage.xaml.cs and add the following to the end of the constructor to set the text of the existing PageTitle element:

   PageTitle.Text = AppResources.Title;

7. Run the application to see the custom title in English:

   

 

Localize the application

Now let's localize the sample application so it uses the proper language for the user's settings. In the steps below, we'll add support for Spanish (via the "es" language code), but adding other languages is a simple matter of repeating these steps using the other language's code and translations. It's a little bit of effort, but it's all quite simple:

1. In the Solution Explorer window, select AppResources.resx by clicking on it

2. Press Ctrl+C, then Ctrl+V to create a copy of AppResources.resx

3. Select Copy of AppResources.resx and press F2 to rename it to AppResources.es.resx

4. Staying in the Solution Explorer window, right-click the project root node and choose Unload Project

5. Right-click the project node again and choose Edit [ProjectName].csproj

6. Change the existing SupportedCultures element to be:

   <SupportedCultures>es</SupportedCultures>

7. Back in the Solution Explorer window, right-click the project node and choose Reload Project

8. Open AppResources.es.resx and change "welcome" to "bienvenido"

9. Run the application and verify the custom title now shows up in Spanish (no code changes necessary!):

   

 

Add the Windows Phone Toolkit project

Now we'll modify the sample application to reference the Windows Phone Toolkit. (You can read more about the Windows Phone Toolkit in my introductory post.) Rather than adding a binary reference to the Toolkit, we'll add a project reference and build the Toolkit code as part of the sample application (for reasons that will become clear soon):

1. Go to http://silverlight.codeplex.com/ and download the "Silverlight for Windows Phone Toolkit Source & Sample" ZIP file

2. Unblock the ZIP file (see the notes at the end of this post for instructions)

3. Right-click the ZIP file and choose Extract All... to extract all files to the directory of your choice

4. From the File menu in Visual Studio, choose Add, then Existing Project...

5. Choose the Microsoft.Phone.Controls.Toolkit.csproj file found in the same-named directory of the extracted content

6. Click on the application project node in Solution Explorer to make it active again

7. From the Project menu, choose Add Reference...

8. Switch to the Projects tab and pick the Microsoft.Phone.Controls.Toolkit project

9. Press F6 and verify the solution builds both projects successfully:

   ------ Build started: Project: Microsoft.Phone.Controls.Toolkit, Configuration: Debug Any CPU ------
   ...
   ------ Build started: Project: LocalizedPhoneApplicationWithToolkit, Configuration: Debug Any CPU ------
   ...
   ========== Build: 2 succeeded or up-to-date, 0 failed, 0 skipped ==========

 

Add some Windows Phone Toolkit controls

Now it's time to add two of those handy-dandy Windows Phone Toolkit controls (both covered in the aforementioned blog post): DatePicker and ToggleSwitch. We'll follow the usual steps for referencing third-party controls which should be pretty familiar to everyone:

1. Open MainPage.xaml and switch to XAML view

2. Add the following to the top of the file along with the other xmlns definitions:

   xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

3. Paste the following inside the empty "ContentPanel" Grid:

   <StackPanel>
       <toolkit:DatePicker/>
       <toolkit:ToggleSwitch/>
   </StackPanel>

4. Optional: Follow the steps in the notes of my Windows Phone Toolkit introduction to add the DatePicker Application Bar icons to the project

5. Run the application to see the text of the Toolkit controls in English:

   

   Note: The day and month names are already in Spanish because they come from the operating system which knows to use the current language for dates. The Spanish-correct day/month/year formatting (vs. the United States default of month/day/year) is automatically provided by the DatePicker control.

 

Localize the Windows Phone Toolkit controls

Finally, we'll localize the Toolkit controls using the same process we did for the sample application itself:

1. In Solution Explorer, expand the "Properties" folder for the Toolkit and click Resources.resx

2. Press Ctrl+C, then Ctrl+V to create a copy of Resources.resx

3. Select Copy of Resources.resx and press F2 to rename it to Resources.es.resx

4. Open Resources.es.resx and change "CHOOSE DATE" to "ELIGE UNA FECHA", "cancel" to "cancelar", "done" to "listo", "Off" to "Desactivado", and "On" to "Activado"

5. Run the application and verify the Toolkit control text is also in Spanish now:

   

   Note: If you get the error Unable to copy file "obj\Debug\Microsoft.Phone.Controls.Toolkit.dll" to "..\Bin\Debug\Microsoft.Phone.Controls.Toolkit.dll". The process cannot access the file '..\Bin\Debug\Microsoft.Phone.Controls.Toolkit.dll' because it is being used by another process. when compiling, close all documents in Visual Studio via Window/Close All Documents, then restart Visual Studio itself.

 

At the end of the day, translating an application isn't just a nice thing to do, it's good business! We operate in a global marketplace and that means localized products can have a big advantage over their single-language-only competitors. While good localization can't save a bad application from itself, it can make a good application stand out. So please think about localization in your next marketplace application - your customers will appreciate it!

Gracias. :)

 

Notes:

• People sometimes ask why the Windows Phone Toolkit (or the Silverlight Toolkit, for that matter) isn't already localized to the same set of languages the host platform supports. While I personally think it should be, doing so would take time and money and those two things can be in rather short supply at times. :) While I hope to see Toolkit localization become official some day, the good news for now is that things have been implemented such that they're easily localizable.

• I've taken the quick/easy route of assigning the localized text resource directly to PageTitle.Text in the application's constructor, but that is not the recommended technique. Instead, what's generally preferred is what's described in the second half of the "Replacing hard-coded strings with strings in a resource file" section of the MSDN documentation: use a property Binding in XAML to reference the localized resources via a custom object as a StaticResource. It's a little unintuitive at first, but a very reasonable solution in practice. :)

• After downloading the ZIP file for the Windows Phone Toolkit source code, you should "unblock" it before extracting its contents to avoid warnings from Visual Studio like Security Warning, You should only open projects from a trustworthy source. and The "ValidateXaml" task failed unexpectedly. System.IO.FileLoadException: Could not load file or assembly .... Unblocking is a simple matter of right-clicking on the ZIP file, choosing Properties from the context menu, clicking the Unblock button in the lower, right-hand corner of the resulting dialog, and hitting OK or Apply: