Skip to content

WPF. Error templates

Vsevolod Pilipenko edited this page Jul 19, 2022 · 3 revisions

About error templates in the library

You can use default theme for error templates, but there are three reasons why it's better to use templates from library:

  1. You don't like default WPF error theme (because it doesn't display messages).
  2. You want to use Warning level with orange brush instead of red.
  3. You need to change localization in run-time .

There are two error templates in library:

  1. Default WPF theme with supporting different brushes (if it's OK to you with 1 and 3 reasons):

image

  1. Error template with popups with messages:

image

Using error templates from library

There are two way how you can extract this templates.

Merge resource dictionaries

At your App.xaml merge resource dictionary from library:

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="/ReactiveValidation.Wpf;component/Themes/Generic.xaml" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

And use it in your control:

<TextBox Validation.ErrorTemplate="{StaticResource WpfErrorTemplate}" />
<!-- or -->
<TextBox Validation.ErrorTemplate="{StaticResource ExtendedErrorTemplate}" />

It's also a good idea to create style with error template:

<Style TargetType="TextBox">
    <Setter Property="Validation.ErrorTemplate" Value="{StaticResource WpfErrorTemplate}" />
</Style>
<!-- or -->
<Style TargetType="TextBox">
    <Setter Property="Validation.ErrorTemplate" Value="{StaticResource ExtendedErrorTemplate}" />
</Style>

Use property from static class ErrorTemplates

xmlns:t="clr-namespace:ReactiveValidation.WPF.Templates;assembly=ReactiveValidation.Wpf"
...
<TextBox Validation.ErrorTemplate="{x:Static t:ErrorTemplates.WpfErrorTemplate}" />
<!-- or -->
<TextBox Validation.ErrorTemplate="{x:Static t:ErrorTemplates.ExtendedErrorTemplate}" />

It's also a good idea to create style with error template:

xmlns:t="clr-namespace:ReactiveValidation.WPF.Templates;assembly=ReactiveValidation.Wpf"
...
<Style TargetType="TextBox">
    <Setter Property="Validation.ErrorTemplate" Value="{x:Static t:ErrorTemplates.WpfErrorTemplate}" />
</Style>
<!-- or -->
<Style TargetType="TextBox">
    <Setter Property="Validation.ErrorTemplate" Value="{x:Static t:ErrorTemplates.ExtendedErrorTemplate}" />
</Style>

Overriding templates brushes

Templates using ValidationErrorBrush for errors and ValidationWarningBrush for warnings:

<SolidColorBrush x:Key="ValidationErrorBrush" Color="Red" />
<SolidColorBrush x:Key="ValidationWarningBrush" Color="Orange" />

ExtendedErrorTemplate also using two brushes for popus:

<SolidColorBrush x:Key="ValidationMessageForegroundBrush" Color="Black" />
<SolidColorBrush x:Key="ValidationMessageBackgroundBrush" Color="White" />

You can easily override this brushes at your application:

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="/ReactiveValidation.Wpf;component/Themes/Generic.xaml" />
        </ResourceDictionary.MergedDictionaries>
        
        <SolidColorBrush x:Key="ValidationErrorBrush" Color="Purple" />
        <SolidColorBrush x:Key="ValidationWarningBrush" Color="Green" />
        <SolidColorBrush x:Key="ValidationMessageForegroundBrush" Color="White" />
        <SolidColorBrush x:Key="ValidationMessageBackgroundBrush" Color="Blue" />
    </ResourceDictionary>
</Application.Resources>

and result:

image

Create custom validation templates

System.Windows.Controls.ErrorsProperty contains list of object. ReactiveValidate puts there objects of type ReactiveValidation.ValidationMessage.

  • For support run-time localization - create DataTemplate for ReactiveValidation.ValidationMessage type. Put inside TextBlock or whatever you want and bind it to ValidationMessage.Message property. It's support INotifyPropertyChanged, so if localization changed - message will changed too.
  • Supporting Warning's a bit harder. You should check all elements at ErrorsProperty if they are all Warning or SimpleWarning.

You can use templates in library as sample. They are located here.