Localizing the Validation

The example will work with the latest internal build and the feature required will be released in the Silverlight4, 2010.Q2.SP1.

The Full Source Code is here.

A few months ago we noticed a lot of XAML code being copied around. It was supposed to enable validation in our controls. It is all about those red borders showing around controls like RadNumericUpDown, RadComboBox, RadDatePicker etc. So we have created the ValidationTooltip in the assembly Telerik.Windows.Controls, namespace Telerik.Windows.Controls.Chromes that was supposed to encapsulate these visuals keeping all the storyboards and templates at one place. This all happened in Silverlight 3. Now in Silverlight 4 we have implicit styles which means that we can style these ValidationTooltips in all controls using a single implicit style for the ValidationTooltip. What is more important for this blogpost is that the ValidationTooltip has TooltipContent property which is set inside the ControlTemplates like this:

<telerikChromes:ValidationTooltip ...
    TooltipContent="{Binding Path=(Validation.Errors), RelativeSource={RelativeSource TemplatedParent}}" />

And since the last internal build a TooltipContentTemplate property which is set in the default style of the ValidationTooltip:

<DataTemplate x:Key="TooltipContentTemplate"> <TextBlock Padding="4 1" Foreground="{StaticResource ValidationTooltipForeground}" MaxWidth="250" TextWrapping="Wrap" Text="{Binding [0].ErrorContent}" /> </DataTemplate>

Its official release will happen with the service pack that is coming soon (Silverlight4, 2010.Q2.SP1). The text in the Red area is the ErrorContent of the first ValidationError in the Control’s Errors list. We can create an Implicit Style that alters the template for the TooltipContentTemplate and use LocalizationManager in the new DataTemplate. For example I have created a LocalizedException like this:

 public class LocalizedException : Exception
    {
        public LocalizedException(string message, string resourceKey) : base(message)
        {
            this._ResourceKey = resourceKey;
        }
        private string _ResourceKey;
        public string ResourceKey
        {
            get
            {
                return this._ResourceKey;
            }
        }
    }

And a small view model that implements INotifyPropertyChanged and has some properties that I will later bind my controls to. The properties throw exceptions like:

throw new LocalizedException("Should be working day.", "NonWorkingDayError");

So the LocalizedException store the second parameter in the ResourceKey property of the LocalizedException. In the Localization section it is explained how to set up the LocalizationManager:

Set the supported cultures in the project file:

<SupportedCultures>en;bg</SupportedCultures>

I have successfuly added an English dictionary that has no entries and a Bulgarian one that localies NonWorkingDayError, NonReleaseBuildError and SmallSizeError strings:

The LocalizationManager is set to ‘bg’ culture before InitializeComponent like this:

LocalizationManager.Manager = new LocalizationManager() {
  Culture = new CultureInfo("bg"),
  ResourceManager = LocalizationResources.ResourceManager
};
InitializeComponent();

This is enough to localize the tooltip. We set an implicit style that will redefine the TooltipContentTemplate in all ValidationTooltips:

 <UserControl.Resources> <Style TargetType="telerikChromes:ValidationTooltip"> <Setter Property="TooltipContentTemplate"> <Setter.Value> <DataTemplate> <TextBlock MaxWidth="250" TextWrapping="Wrap" Margin="6 1" Text="{Binding [0].ErrorContent}" telerik:LocalizationManager.ResourceKey="{Binding [0].Exception.ResourceKey}" Foreground="White" /> </DataTemplate> </Setter.Value> </Setter> </Style> </UserControl.Resources>

It is good to know that if the localization fails the old Text will be displayed so there will be no breaking changes.

So if you already have localization then all you need to localize your validation is to add property to the exceptions that will serve as ResourceKey for looking up in the dictionaries and a tiny little style that will make use of the keys and the localization manager. Your errors will be translated. You can add your own set of languages.

Furthermore you can change the ControlTemplate of the ValidationTooltip and replace the red colors with orange, remove the triangle at the top right corner etc.