What is Localization?

Localization is the process of adapting an application for a particular country, region or group by adding locale-specific components and by translating the strings used in the UI. Doing so will expand the reach of your application into new, distinct markets that may otherwise not use your product. For each locale/culture you wish to target, you will need a separate unique set of resources that match that local/culture.

This process involves making certain your application is “Internationalized” so that it can be easily adapted without structural changes. The types of things your application will want to be able to adapt to include mostly:

1. Language

For language, you will need to match the alphabet/script, numerals, writing direction and spelling/word variants that are used for the local/culture. For example, in the US we say “trunk” where as in the UK they say “boot”. Think there are only a few differences? Think again.

2. Culture

When it comes to culture you will need to adapt for images, colors, names, titles, phone numbers, postal codes, currency, weights, measures, paper sizes and more.

3. Writing Conventions

Each locale may also have its own writing conventions. This includes number formatting, time zones and date/time format.

Cultures are represented by a string that has the language and region denoted. Examples for German include:

   de-DE      German
   de-AT       German (Austria)
   de-DE      German (Germany)
   de-CH      German (Switzerland)
   de-LI         German (Liechtenstein)
   de-LU       German (Luxembourg)

For a complete list see this link.

Localizing Your Silverlight Application

There are a number of steps needed to get your application localized in Silverlight. In this tutorial,  I will walk you through each and every step needed to setup localized strings for your application.

Make certain to follow each of these steps carefully as missing one step will can easily lead to ambiguous errors.

Step #1: Creating the Silverlight Application.

Create a Silverlight application using Visual Studio 2010 (I called mine Tip7_LocalizedApp).

Step #2: Add a Resource Folder.

Create a folder and give it a name like “Resources” in your Silverlight application project. I will be placing all localized string resource files in this folder.

Step #3: Add a Default Resource File

Right click on the Resource folder, choose “Add New Item” and select Resource. Name it something like “Strings” and click the “Add” button when ready. To the resource add a string called “AppName” and give it a value. Also, make certain to set the access modifier to Public so we can bind to it later. See the screenshot below.

Step #4: Add Another Resource File for Another Language

Repeat step #4 but this time let’s add a resource for Japanese based strings. The format you will want to use is Strings.<locale>.resx so let’s call in Strings.ja-jp.resx. In the example below, I have set the AppName to be 火炎球 which means ‘Fireball’ in Japanese. Keep the Access Modifier set to “No code generation” since we only need the code for the default one.

Step #5: Add a Namespace to MainPage.xaml

With your resources now created open up the file MainPage.xaml. In the UserControl declaration at the top of the file add an XML namespace that points to your application like this:

xmlns:local="clr-namespace:Tip7_LocalizedApp.Resources"

Step #6: Reference your String Resources.

Add a UserControl.Resource section that references the string resources we added. Give it a required key also that you will use to reference from your controls as seen here:

<UserControl.Resources> 

    <local:Strings x:Key="AppStrings"></local:Strings> 

</UserControl.Resources>

Step #7: Bind to your String Resources

Next, let’s add a TextBlock control that binds to the AppName of our application. This is done via the following syntax:

<TextBlock Text="{Binding AppName, Source={StaticResource AppStrings}" />

At this point you might think you are good to go. However, if you were to run your application you would get an unhandled exception! This is due to a known issue/bug in the modifier for Visual Studio. Even though we set the Access Modifier = Public the constructor of the class is still set to be internal. Open up Strings.Designer.cs and change the constructor to be public:

public Strings() { }

Every time you open the resource designer and make a chance you will need to change this from internal to public. Fortunately,  there is a work around. Create a resource wrapper class that instantiates and returns the resource object as such:

public class ResourceWrapper 

{ 

    private Resources.Strings appString; 

    public ResourceWrapper() { appString = new Resources.Strings(); } 

    public Resources.Strings AppStrings 

    { 

        get { return appString; } 

    } 

}

Now, in your XAML, you can reference your resource through this class.

New Namespace Declaration:

xmlns:my="clr-namespace:Tip7_LocalizedApp"

Resource addition:

<UserControl.Resources> 

    <local:Strings x:Key="LocStrings" /> 

    <my:ResourceWrapper x:Key="MyLocStrings"></my:ResourceWrapper> 

</UserControl.Resources>

New binding:

<TextBlock  Text="{Binding AppStrings.AppName, Source={StaticResource MyLocStrings}}" />

Step #8: Specify SupportedCultures in your Silverlight Project File

In order to switch between Japanese and English you will need to specify the SupportedCultures in our Silverlight projects file (Make note this is not the web site project but the Silverlight project).  It’s a pain, but to accomplish this, right click on your Silverlight project node in the Visual Studko solution explorer and choose “Unload Project”. Right click again and choose “Edit Project”. Add the following to the <PropertyGroup> section:

<SupportedCultures>en-US;ja-JP</SupportedCultures>

Right click yet again and select “Reload project”.

Step #9. Target a Locale in your Web Page

Specify your target Locale in your web page to be Japanese. To accomplish this, open up your default ASPX page that contains your Silverlight control and add the following param types declarations to your Silverlight object:

<param name="culture" value="ja-JP" /> 

<param name="uiculture" value="ja-JP"/>

Run the application and you will see the following text in your TextBlock as expected:

Now try changing the culture and uiculture to be “en-US” in your ASPX page. Run it again and you will see the following:

Thank you,

–Mike

A common place to put styles in Silverlight applications is the App.xaml file. Any style declared in App.xaml is automatically picked up by any of your custom controls in your application. However, if you create a Silverlight Class Library you will notice there is no App.xaml file to put styles in.

In order to create styles in a Silverlight Class Library there are primarily two steps you can take in order for your controls to pick up on the statically declared styles.

Step #1. Add a Silverlight Resource Dictionary

Using Visual Studio, from your class library project in the solution explorer, right click and choose “Add New Item”. From there, choose “Silverlight Resource Dictionary” as seen in the screenshot below giving it any name you want.

Step #2: In your controls, add a reference to the resource you just added.

<UserControl.Resources> 

    <ResourceDictionary> 

        <ResourceDictionary.MergedDictionaries> 

            <ResourceDictionary Source="StyleDictionary.xaml"/> 

        </ResourceDictionary.MergedDictionaries> 

    </ResourceDictionary> 

</UserControl.Resources>

At this point, you can now reference any style you have declared in this resource dictionary from your controls.

Example:

<Button Style="{StaticResource GlossyButton}" Content="Hi" Grid.Row="3"/>

Thank you,

–Mike