Localization in Silverlight

• Download source - 124.38 KB

Introduction

From this article, you will understand how to select user interface culture according to the user locality in Silverlight. This article is all about localization in Silverlight. You can also download the source code from here.

Background

When the dynamics website came into the picture, their first motto was to provide only the feature for which it was developed. Their target audience was limited and the culture which they preferred was only English or Chinese or Japanese. But it was hard for them to convert a site that was developed in English language to other languages. They had to manually convert each and every field into the respective language.

Why Do We Need to Read this Article?

This article will give you knowledge about how to create a Silverlight application which is independent of user language. The user will be able to see website controls/fields in his/her own language. With main concept, you can also learn how to use Binding in Silverlight and how to use Resource file in any application.

Enough Talk, Let's Start

Open your favorite editor (I prefer VS2010, but you can use any other editor where you can debug and run Silverlight application).

1. Create a new project:

   

2. Select Silverlight Application and write UICultureDemo name of the project.

   

3. Create 2 Textblocks and 1 click button on the MainPage.xaml page.

   

   <!-- Xaml -->
   <TextBlock Margin=“96,8,96,2” 
                        x:Name=“FirstName” 
                        Text=“FirstName” 
                        TextWrapping=“Wrap” 
                        HorizontalAlignment=“Center” 
                        FontSize=“13.333” 
                        Foreground=“#FF371818” />
   <TextBlock Margin=“96,8” 
                        x:Name=“LastName” 
                        Text=“LastName” 
                        TextWrapping=“Wrap”
                        HorizontalAlignment=“Center”
                        FontSize=“13.333”/> 
   <Button    Height=“29” Margin=“87,4,96,4” 
                        x:Name=“ClickMe”
                        Width=“142”          
                        HorizontalAlignment=“Center” />

4. In App.xaml.cs file, add the following code in Application_Startup method.

   private void Application_Startup(object sender, StartupEventArgs e)
   {
       CultureInfo culture = new CultureInfo("es");
       Thread.CurrentThread.CurrentCulture = culture;
       Thread.CurrentThread.CurrentUICulture = culture;  
   
       this.RootVisual = new MainPage();
   }

   Include 2 namespaces at the top of header, otherwise it gives you error while building.

   using System.Globalization;
   using System.Threading;

5. Add 2 resource files, NameFromStrings.resx and NameFromStrings.es.resx files in the UICultureDemo solution.

   

6. Open the NameFromStrings.resx file and change the access modifier to public and also enter some values whose culture should vary depending on the UI culture.

   

7. Enter same name as key values in NameFromStrings.es.resx but different values.

   

8. Unload the UICultureDemo project as show below. (Right Click on UICulture demo and click on Unload Project.)

   

9. Edit UICultureDemo.csproj file as shown below:

   

10. Add en;es language in SupportedCultures element as shown below:

    

11. Save the Changes and Reload Project.

    

12. Add the resource namespace and add application resource key in App.xaml file:

    <!-- Xaml -->
    <Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
                 x:Class="UICultureDemo.App"
                 xmlns:reource="clr-namespace:UICultureDemo"
                 >
        <Application.Resources>
            <reource:NameFromString x:Key="myResource" />
        </Application.Resources>
    </Application>

    Resource namespace is:

           xmlns:reource="clr-namespace:UICultureDemo"

    And add resource is:

        <Application.Resources>
            <reource:NameFromString x:Key="myResource" />
        </Application.Resources>

13. Bind the Text Property with the respective name in the resource file with binding source myResource like:

     Text="{Binding FirstName, Source={StaticResource myResource}}" 

    Example:

    <TextBlock Margin=“96,8,96,2” 
                     x:Name=“FirstName” 
                     Text=“{Binding FirstName, Source={StaticResource myResource}}” 
                     TextWrapping=“Wrap” 
                     HorizontalAlignment=“Center” 
                     FontSize=“13.333” 
                     Foreground=“#FF371818” />
    <TextBlock Margin=“96,8” 
                     x:Name=“LastName” 
                     Text=“{Binding LastName,Source={StaticResource myResource}}” 
                     TextWrapping=“Wrap” HorizontalAlignment=“Center” 
                     FontSize=“13.333” />
    <Button    Content=“{Binding ClickMe,Source={StaticResource myResource}}” 
                     Height=“29” 
                     Margin=“87,4,96,4” 
                     x:Name=“ClickMe” Width=“142” 
                     HorizontalAlignment=“Center” />

14. Now Build and Run the project.
15. To change the Culture, change the CultureInfo parameter in the App.xaml.cs file:

     CultureInfo culture = new CultureInfo("es");

16. Run the application and you will see the following window (Style would be different):

    

If you see the above window after changing the culture, that means "All Is Well" or you can download this project code from here.

Next Article

In the next article, I will explain how to use Expression Blend to bind user control and how to use class library to share the same resource file among different projects. Thank you very much for reading this article.

History

• 1^st November, 2010: Initial post