Building a multilingual MVVM app

Last week I built a sample multilingual app in WPF using MVVM for a proof of concept. This was the first time I've built a desktop app which supported different languages at runtime. Previously I've worked on multilingual websites and desktop apps but not ones that support changing the language of the UI dynamically via a UI control like a menu item.

The app was pretty simple, a single input field representing a number where the value has to be within a fixed range (-100 to 100). If the input failed the validation an error message would be displayed.

What I came up with is shown below, it supports three cultures - English, French & German. The culture (language) is selected by either the menu or the F1 - F3 keys. How I achieved this is what follows.

What I wanted to achieve was the model & view model being agnostic to any concern about the currently selected culture (language). The view model used for the English version should be the same for the French or German versions.

The model we'll be binding via the view model is shown below, as you can see no knowledge of the currently selected UI language.

The view model is shown below, this will be bound to the view via an implementation of the view model Locator pattern.

The view model like the model also has no knowledge of the currently selected UI language. What should also be noted is the lack of validation in the view model. Normally if one was developing an app for a single culture you could use the IDataErrorInfo interface in the System.ComponentModel to return the required validation message. This could have been done in this example, but I ddidn't want the view model to know anything about the current culture, if I had used it I would then have to worked out the current culture and then selected the correctly translated message. I see the concern of translating the validation message a responsibility of the view not the view model.

I did the validation via a custom validation rule - by implementing my own validation rule this allowed me to code up the required field input rules - a number where the value has to be within a fixed range (-100 to 100).

This is where the concerns of the UI culture start to come into play, the last two lines of the above validation rule take care of loading the correct culture invalid input message. How exactly this is done is described later. This is then used declarative in the view XAML, thus pushing the input validation to the correct area of concern, the view:

The  colours used for displaying the validation message are controlled by the style applied to the TextBox control, it defines when and how the validation tool-tip fades in & out.

What you can see from the XAML is a converter applied to the binding, this will only be called if the input validation executes successfully. The converter is also affected by the current UI culture, as you can see it is passed to each method. This means the double.Parse will correctly handle what ever number separators are defined for the culture:

That covers all the other parts required for multiple culture support, but the question still remains:

How exactly are the different cultural string being render by the view?

This is where it started to get complex for the simple reason the documentation on how to do this is confusing, I couldn't find a coherent strategy on MSDN. Googling for 'multilingual support WPF' does list MSDN as the first result, after reading through this I just started to get a headache...

I was looking for a way to declaratively define which strings need to support multiple cultures, it also need to separate the cultures into different files. I knew I was going to need to work with resource files (*.resx). The Google search above provided a lot of links pointing to solutions available on codeproject.com, I counted at least 5 different ways on the first page.

I decided to go with first in the list - 'WPF Localization Using RESX Files'. This solution provided both a declarative (XAML) and imperative (code-behind) methods, in fact it turned out to be so simple I can't believe you can't get this package on NuGet.

I recommend reading the article for the full details on how to add support to your app. First off I modified  the XAML by adding the a declaration at the top of the page:

Then I updated all string values that need to support multiple cultures:

The ResxExtension.DefaultResxName property in the window declaration defines where to find the required resx file. As you can see from the screen shot below there are also separate RESX files for the French & German resources:

The English & German resource properties window from visual studio are shown below:

Each RESX file needs to define the Custom Tool & Custom Tool Namespace via the properties window in visual studio. This is so the RESX file is compiled and available in C# code - that's how we access the resource in the last 2 lines in the custom validator earlier:

RESX file properties in visual studio:

The only thing left now is how to change the culture at runtime. I did this via a menu, but in theory this could be done any suitable UI control. All I did was declare a menu items in the XAML and then wire in the click events to the code-behind of the view:

Declared in the XAML:

As you can see the Header properties are bound to the resource manager and the click events are handled in the code behind. The code behind is initialised as follows;

We add an event handler for when the culture changes so we can update the menu items:

We also added the key bindings F1 - F3 to allow a keyboard drive approach. As you can see the English is represented by F1 and the command is routed through to the HandleEnglish method, this is an overload of the method wired in via the XAML for the English menu click. This is where the real magic happens the resource manager is updated with the new culture and instantaneously everything declared with a Resx binding in the XAML automatically updates:

Bring this all together gives me the ability to do any multilingual support in the view of my MVVM implementation.

I've put the implementation up on skydrive: