Globalization And Localizationin Silverlight

Introduction

We always want our application to be language dependent. When I say language dependent, definitely we want our application to support multiple languages. It doesn't matter what the language is set for the browser; for any user, we want our web application to support that language. Again, in a windows application whatever language is set for the operating system, my application should support that language. And to do that globalization and localization is useful. We can get various articles describing globalization and localization but here in this article we will look at the implementation of it in Silverlight.

Setting Up Silverlight Project

Let's create a Silverlight application; in my case I have called it "UsingGlobalizationAndLocalization". And let's add a few controls to the very first page MainPage.xaml. So the screen will look something like:



Let's move step-wise through the implementation of localization and globalization:

1. We need to determine first which languages we want to support, so let's say for our application we want it to support three languages; let us say English, French and German. So the very first step will be creating three resource files. So let's create them and after creation the folder structure will look like:



2. Now Add the content of the controls being used and their corresponding value in the resource file. Let me tell you something about the resource files; these files keep the data in name/value pairs, for example "Employee ID" in English will be "Mitarbeiter ID" in German and employee ID in French. So the Employee ID will be the name for all the resource files and regional translation will be the value. And if you look we have maintained a consistent naming convention; our default resource file which I am considering for English is Resource.resx and resource file for French language Resource.fr.resx and respectively Resource.de.resx for German. This is the naming conventions needed to be used. So let's populate these three resource files with content which
the control will display. Finally we will land up with three files with these data populated :



                                                         Resource.Resx



                                               Resource.fr.resx



                                                            Resource.de.resx

Here we have to make a change; for each resource file the access specifier should be Public. Again when we will look into the Resource.Designer.cs we will find the code of the constructor using internal access specifier. We need to change it to public manually:

internal Resource()
 {
 } 

We have to change it to:

public Resource()
 {
 }

3. Now our resource files are ready for use. Let's move to our MainPage.xaml; here we need to declare a namespace to refer to the resource file so after adding that the corresponding xaml will be something like:



4. Again to use this resource we have to declare the reference in UserControl.Resources in the same xaml and it will look like:



5. Finally the content of the various controls should come through the resource file so we have to use the resource declared and bind the content of control as

<Grid x:Name="LayoutRoot" Background="White">
        <StackPanel x:Name="employeeStackPanel">
            <StackPanel Orientation="Horizontal" Margin="0,10,0,0" >
                <sdk:Label x:Name="employeeIDLabel" Content="{Binding EmployeeID,Source={StaticResource resource}}"  Width="120" Margin="5,0,0,0" />
                <TextBox Width="200" Height="23" Margin="5,0,0,0" Text="{Binding EmployeeID, Mode=TwoWay}" />
            </StackPanel>
            <StackPanel Orientation="Horizontal" Margin="0,10,0,0">
                <sdk:Label x:Name="employeeAddressLabel" Content="{Binding EmployeeAddress,Source={StaticResource resource}}" Width="120" Margin="5,0,0,0" />
                <TextBox Width="200" Height="23" Margin="5,0,0,0" Text="{Binding EmployeeAddress, Mode=TwoWay}"  />
            </StackPanel>
            <StackPanel Orientation="Horizontal" Margin="0,10,0,0">
                <sdk:Label x:Name="employeeNameLabel" Content="{Binding EmployeeName,Source={StaticResource resource}}" Width="120" Margin="5,0,0,0" />
                <TextBox Width="200" Height="23" Margin="5,0,0,0" Text="{Binding EmployeeName, Mode=TwoWay}" />
            </StackPanel>
            <StackPanel Orientation="Horizontal" Margin="0,10,0,0">
                <sdk:Label x:Name="employeeDepartmentLable" Content="{Binding EmployeeDept,Source={StaticResource resource}}" Width="120" Margin="5,0,0,0" />
                <TextBox Width="200" Height="23" Margin="5,0,0,0" Text="{Binding EmployeeDepartment, Mode=TwoWay}" />
            </StackPanel>
            <StackPanel Margin="100,10,0,0" HorizontalAlignment="Left"  >
                <Button x:Name="AddEmployeeButton" Width="100" Height="30" Content="{Binding AddEmployee,Source={StaticResource resource}}"  />
            </StackPanel>
        </StackPanel>
    </Grid>

6. We have to give supported culture information to csproj file of the Silverlight application so that information of the supported culture should be available with .xap. Right-click on the Silverlight application, unload the project. Again right-click on the same; you will get an option to edit the csproj file. Click that and add the following:

<SupportedCultures>de,fr</SupportedCultures>


7. Run The application and you will find that all the data is coming from the resource file.
You will get following screen coming up.



8. Let's change the culture info of the page. Let's try running the application using the french culture so in Application_Startup of App.xaml let's add the following code:

private void Application_Startup(object sender, StartupEventArgs e)
        {
            CultureInfo culture = new CultureInfo("fr");
            Thread.CurrentThread.CurrentCulture = culture;
            Thread.CurrentThread.CurrentUICulture = culture;

            this.RootVisual = new MainPage();
        }

And run the application; we will get the following screen:



Respectively on changing the culture information to German we will get a screen with controls displayed in the German language.

Practical Approach

Here in this article until now we are manually changing the culture. But let's create an application that will automatically detect the culture information from the browser. In that case we don't need to change it manually. For that we need to do the following:

1. In web.config file let's add following line:
   
       <system.web>
           <compilation debug="true" targetFramework="4.0" />
           <globalization culture ="auto" uiCulture="auto" />
       </system.web>
    

2. And let's bring up the .aspx page or the .html page where my xap file is integrated so the page looks like:
   
    <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
                        <param name="source" value="ClientBin/UsingGlobalizationAndLocalization.xap"/>
                        <param name="onError" value="onSilverlightError" />
                        <param name="background" value="white" />
                        <param name="minRuntimeVersion" value="4.0.50826.0" />
                        <param name="autoUpgrade" value="true" />
                        <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
                                  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
                        </a>
                 </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>

   Lets add two more param:

   <param name="Culture" value="<%=System.Threading.Thread.CurrentThread.CurrentCulture.Name %>"  />
             <param name="UICulture" value="<%=System.Threading.Thread.CurrentThread.CurrentUICulture.Name %>" />

   And then the page will look like:

   <div id="silverlightControlHost">
           <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
                        <param name="source" value="ClientBin/UsingGlobalizationAndLocalization.xap"/>
                        <param name="onError" value="onSilverlightError" />
                        <param name="background" value="white" />
                        <param name="minRuntimeVersion" value="4.0.50826.0" />
                        <param name="autoUpgrade" value="true" />
             <param name="Culture" value="<%=System.Threading.Thread.CurrentThread.CurrentCulture.Name %>"  />
             <param name="UICulture" value="<%=System.Threading.Thread.CurrentThread.CurrentUICulture.Name %>" />
                        <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
                                  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
                        </a>
                 </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>

So we are done. Now change the language from the browser and set browser language to French.



After changing the language from the browser, run the application and you will find the following screen.



Again change the language to German:





Again refreshing the page you will get the above screen.

So here you don't need to write anything in the Application_Startup method of App.xaml, we have configured the application in a manner that it will take care of that.

Hope this will help.