Implementing localization and globalization

When building an application, we usually strive to reach as big an audience as possible. Localizing our application to different languages can surely help us boost our audience. Just like most .NET-based applications, localization in Silverlight is done through the use of resource files. Resource files are files based on key-value pairs where each pair represents a string, an image, or other types of resources such as audio and icons. We will discuss how to use resource files in just a moment. New to Silverlight 4 is the native support of right-to-left languages such as Arabic or Hebrew, which makes it far easier to localize an application to these languages. Other than strings, resource files can also hold dates or images.

Working with resource files

To get started, open the Chapter7-RESX project in Visual Studio 2010. The project can be found in the downloadable content of the book, which is available at www.packtpub.com.

The project's UI is as basic as possible—a TextBox control to hold our localized text and an image. The most important part of the project is the Resources folder. This folder currently contains two resource files—Flags.resx and Flags.de.resx. These two files represent two languages—English and German. The standard naming convention for resource files is ResourceName.Language.resx. If we want to add French for example, the resource file will be named Flags.fr.resx.

Click on either of the files. Both contain the same keys—ImageName for the image URL and WelcomeText for the TextBox control's text.

In order to use the resource file, we first have to tell Silverlight which languages we are going to support. Currently the only way to do so is to manually edit the csproj file (the project file) of the project. To do so, right-click on the project name (Chapter7-RESX) and choose Unload Project. Now, right-click on it again and choose Edit Chapter7-RESX.csproj. Find the SupportedCultures node and add the desired language. In our example, we will simply add German. Your SupportedCultures node should look as follows:

<SupportedCultures>
de
</SupportedCultures>

Tip

Adding more than one language

If more than one language is going to be supported, add all the supported languages to the SupportedCultures node separated with a comma.

Next, right-click on the project name and choose Reload Project. Now we need to add the resource file as a static resource to the App.xaml file. Open the App.xaml file and add the following XAML code:

<resx:Flags x:Key="FlagsResx"/>

Resx is the namespace for the resource files and Flags is the name of the root resource file (Flags.resx).

Note

In the starter project's App.xaml file, the Resx namespace was already assigned to the right assembly. If you are creating a project from scratch, make sure you add the namespace before trying to access any of its resources.

Now we can bind directly to the strings in the resource file!

Open the MainPage.xaml file, and add the following line of code to the Image element:

Source="{Binding ImageName,Source={StaticResource FlagsResx}}"

We are binding the ImageName key of the resource file to the Source property of the image. Let's do the same for the TextBox control but using the WelcomeText key instead of ImageName:

Text="{Binding WelcomeText,Source={StaticResource FlagsResx}}"

Build and run the application, and you should get the result, as shown in the following screenshot:

Working with resource files

If you were running this same application on a computer, which has German as the local language, you would have seen the following screenshot:

Working with resource files

It's important to make sure that the main .resx file we are using (in our example, flags.resx) has its access modifier set to public and its constructor set to public as well (in the Designer.cs file). Failing to have both of them as public will result in an exception being thrown when running the application. Make sure you check for both every time you modify the resource file.

For languages that are written right to left (such as Hebrew and Arabic), Silverlight exposes the FlowDirection property on most of its controls. This property can accept two values—LeftToRight (which is the default) or RightToLeft. Setting this property to RightToLeft will make the control shift to right-to-left mode, meaning the text will flow from right to left.

Forcing local

If you wish to force a specific local on to your application, you can choose in one of the following two ways:

  • Using the Silverlight plugin HTML
  • Using the binding system's converter

Setting the culture using the Silverlight plugin HTML

The simpler approach is using the plugin HTML, and it's done by adding the following line of code to the Silverlight's object tag—<html>:

<param name="uiculture" value="<your culture>" />

Make sure to replace<your culture> with your desired culture, that is de.

Please note that this method will only work if the language specified for the uiculture parameter is already added as a supported culture in the csproj file.

Setting the culture using a converter

We've already discussed the use of converters in Chapter 5, Working with Data, and culture converters are no different. To set the culture via the binding engine, we need to set the ConverterCulture parameter to the desired culture and then use the resourceManager class in your converter to read the string from the culture's resource file.

To demonstrate this procedure, we will use the same project as before and set its culture via a converter. Open the Chapter7-RESX-Converter-Starter project in Visual Studio 2010.

If you run the project right now, you will get the English version of the application, as shown in the first screenshot under the Working with resource files section. We wish to force the application to always show the German version, no matter what is the user's culture.

The first thing we will do is handle the converter. Open the TextConverter.cs file under the Converters folder. The class has already been set to inherit and implement the IValueConverter interface. The method we need to handle is Convert and its implementation is as follows:

public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
ResourceManager resourceManager = new ResourceManager("Chapter7_RESX.Resources.Flags", GetType().Assembly);
return (string)resourceManager.GetString((string) parameter, culture);
}

The Convert method initializes the resourceManager class, passing it the resource file's full namespace (Chapter7_RESX.Resources is the namespace where Flags is the name of our resource file itself) as the first argument, and the assembly that it resides in as the second argument.

Once initialized, we return a value from the selected resource file based on a key we pass to the Convert method as an argument named parameter.

In order to use the converter, we have to first declare it as a resource. To make things easier, the converter is already added in your App.xaml file with a key named textConverter.

Now for the fun part, open the MainPage.xaml file and look for an Image element named FlagImage. Currently the image's Source property is bound to the ImageName key of the Flags resource file. To set the culture of the binding property to German, change the image's Source property as follows:

Source="{Binding ImageName,Source={StaticResource FlagsResx},Converter={StaticResource textConverter},ConverterCulture=de-DE,ConverterParameter='ImageName'}" />

As you can see from the preceding code snippet, we've added two new properties to the binding declaration—ConverterCulture and ConverterParameter. ConverterCulture defines the culture we wish to set. This is passed to the converter's Convert method as the culture argument. ConverterParameter is a generic object that we can pass to the Convert method. In our example, we will pass the name of the key we wish to retrieve from the .resx file. Use the same syntax for the TextBox element, but change ConverterParameter to WelcomeText:

<TextBlock x:Name="FlagText" HorizontalAlignment="Center" Text="{Binding WelcomeText,Source={StaticResource FlagsResx},Converter={StaticResource textConverter},ConverterCulture=de-DE,ConverterParameter='WelcomeText'}" />

Build and run the application, and you should get the result, as shown in the following screenshot:

Setting the culture using a converter
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.222.184.200