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;