Silverlight 4 + RIA Services - Ready for Business: Localizing Business Application

To continue our series, let’s look at localizing our business applications.  In today’s global village, it is often no longer OK to support only one language.   Many real world business applications need to support multiple languages.  To demonstrate the pattern, let’s look at localizing the Silverlight Business Application Template.

Update (3/28): I added a bit more explanation about setting culture in Visual Studio..   

You can download the completed solution.

 

Here it is in English side-by-side with a localized version (notice the Hebrew is rendered Right-To-Left correctly):

image 

image

 

 

Let’s start by creating a new Silverlight Business Application.   Notice there is a server and a client project in the solution.   The strings that are needed in both the server and client project are located in the server project and those that are only ever needed in the Silverlight client are in the client project.  Let’s start with the server.  

image

In the Resources folder we see two sets of resources.  One for the Error messages and another for registration details.  These are in a the ResX format which is an Xml file format that has been around for a long time.. there are many localization tools outside of VS that support this format.  Here I will show the localization in VS. 

 

One setup step before we get started.  You need to explicitly tell Visual Studio what languages are supported in by the Silverlight application.  Unfortunately, this is not supported by the VS Project Properties dialog, so you need to edit the Silverlight Applications csproj file directly.   

Right click on the Silverlight project and unload

image

Right click again and select “Edit MyApp.csproj

image

Then find the SupportedCultures attribute and add the full list of cultures your application supports.

image

Then right click on the project and re-load project. 

 

Ok, done with the setup, on to the actual localization.

The first step is to create a copy of each of these files with the [Local].resx extension.  For example, I created one called “ErrorResources.he.resx”.  Here is a full list of cultures codes

Then open the file in VS and you see a nice editing experience.  Simply replace the English text with the translated version.

Below is the translation experience in progress:

image

Repeat for the RegistrationDataResources.resx file. 

Next we need to make these new *.he.resx accessible from the client.   First let’s find the client resources directory.  Notice the English resources are already linked in here.  We need to add the Hebrew ones we just created. 

image

 

Right click and add an Existing Item

 

image

Then browser to the ErrorResources.he.resx file in the web project.

image

Then select add as Link

image

Repeat for the other localized files from on the client.

image

In ApplicationStrings.resx and ApplicationStrings.he.resx I added one additional value to indicate flow direction

image 

 

I then made two very small tweaks to the template to use this value.  In each top level window, I need to set the flow direction.

in Main.xaml:

 <UserControl 
  x:Class="LocalizedBusinessApplication.MainPage"
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  FlowDirection="{Binding Path=ApplicationStrings.FlowDirection, Source={StaticResource ResourceWrapper}}" >

and in View\LoginRegistrationWindow.xaml

 <controls:ChildWindow
  x:Class="LocalizedBusinessApplication.LoginUI.LoginRegistrationWindow"
  x:Name="childWindow" 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  Width="400" 
  Title="{Binding Path=ApplicationStrings.LoginWindowTitle, Source={StaticResource ResourceWrapper}}"
  Style="{StaticResource LogRegWindowStyle}"
  FlowDirection="{Binding Path=ApplicationStrings.FlowDirection, Source={StaticResource ResourceWrapper}}" 
  Closing="LoginWindow_Closing">

 

Now, we are ready to run the app. 

image

It looks great, but it is all English.. how can we test the localization?  Simply change your language in the browser.

In IE that is Tools\Internet Options

image

Make sure Hebrew is first. Then hit refresh on the page and…

image 

 

What I showed here was how to localize a Silverlight application using the Business Application Template. 

 

Enjoy!