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.
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>
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
).
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:
If you were running this same application on a computer, which has German as the local language, you would have seen the following screenshot:
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.
If you wish to force a specific local on to your application, you can choose in one of the following two ways:
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.
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:
18.118.24.106