WPF: Validation Summary Control

While writing my previous post on WPF Validation, I came to thinking about a Validation Summary, like the one in ASP.NET. Why isn’t there one? However, WPF has a pretty cool feature that lets you bind and display your validation error to another control (e.g. a TextBlock), via the Validation.ValidationAdornerSite Attached Property. This is very convenient, except for the fact that it’s a one to one relationship; I rather be able to bind all my validation errors to one single control, like the ASP Validation Summary. So I have created a custom control to do just that.

Firstly I followed the approach of Validation.ValidationAdornerSite, and created a static class with an attached dependency property. By setting that property, you can hook up your controls (those that require validation) to the Validation Summary control and it will listen for validation errors being raised and display them. This is a snippet of the static class.

public static class ValidationSummaryValidator
{
    public static DependencyProperty AdornerSiteProperty =
        DependencyProperty.RegisterAttached("AdornerSite", typeof(DependencyObject), typeof(ValidationSummaryValidator),
        new PropertyMetadata(null, OnAdornerSiteChanged));

    [AttachedPropertyBrowsableForType(typeof(DependencyObject))]
    public static DependencyObject GetAdornerSite(DependencyObject element)
    {
        if (element == null)
        {
            throw new ArgumentNullException("element");
        }
        return (element.GetValue(AdornerSiteProperty) as DependencyObject);
    }

    public static void SetAdornerSite(DependencyObject element, DependencyObject value)
    {
        if (element == null)
        {
            throw new ArgumentNullException("element");
        }
        element.SetValue(AdornerSiteProperty, value);
    }

    private static void OnAdornerSiteChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        IErrorViewer errorViewer = e.NewValue as IErrorViewer;
        if (errorViewer != null)
        {
            errorViewer.SetElement(d);
        }
    }
}

Next I created a custom control that consist of an ItemsControl to display my error messages. Here’s the Xaml for that.

<UserControl.Resources>
 <DataTemplate x:Key="ErrorViewerItemTemplate" DataType="string" >
     <StackPanel Orientation="Horizontal">
         <Ellipse Fill="Red" Width="5" Height="5" VerticalAlignment="Center"
             HorizontalAlignment="Center" Margin="5,0,0,0" />
         <TextBlock Text="{Binding}" FontSize="11" FontStyle="Italic"
            Foreground="red" Padding="2" Margin="5,0,0,0"
             HorizontalAlignment="Left" VerticalAlignment="Center" />
     </StackPanel>
 </DataTemplate>

</UserControl.Resources>

<ItemsControl x:Name="itemsControl" 
    ItemTemplate="{StaticResource ErrorViewerItemTemplate}"  />

Here’s a snippet of the code behind for the control, and the IErrorViewer interface which provides the method for setting an element to listen to.

public interface IErrorViewer
{
    void SetElement(DependencyObject element);
}

public partial class ValidationSummary : UserControl, IErrorViewer
{
    private List<dependencyobject> _elements = new List</dependencyobject><dependencyobject>();
    private ObservableCollection<string> _errorMessages = new ObservableCollection</string><string>();

    public ValidationSummary()
    {
        InitializeComponent();
        this.Loaded += new RoutedEventHandler(ErrorViewer_Loaded);
    }

    void ErrorViewer_Loaded(object sender, RoutedEventArgs e)
    {
        itemsControl.ItemsSource = _errorMessages;
    }

    private void Element_ValidationError(object sender, ValidationErrorEventArgs e)
    {
        if (e.Action == ValidationErrorEventAction.Added && !_errorMessages.Contains(e.Error.ErrorContent.ToString()))
        {
            _errorMessages.Add(e.Error.ErrorContent.ToString());
        }
        else if (e.Action == ValidationErrorEventAction.Removed && _errorMessages.Contains(e.Error.ErrorContent.ToString()))
        {
            _errorMessages.Remove(e.Error.ErrorContent.ToString());
        }
    }

    #region IErrorViewer Members

    public void SetElement(DependencyObject element)
    {
        if (!_elements.Contains(element))
        {
            _elements.Add(element);
            Validation.AddErrorHandler(element, Element_ValidationError);
        }
    }

    #endregion
}

Now that all this is set up, all we need is to bind our input controls to the Validation Summary control on our UI by using the static ValidationSummaryValidator.AdornerSite Attached Property. This is set in our ErrorTemplate, and below is a snippet of the Xaml.

<Style TargetType="{x:Type TextBox}">
  <...>
  <Setter Property="lib:ValidationSummaryValidator.AdornerSite" 
      Value="{Binding ElementName=validationSummary}" />
  <...>
</Style>

I’ve omitted some of the code for readability, so if you’re keen to know more, do download the solution and have a look. With my limited knowledge this is my version of a Validation Summary. I’m not entirely convinced that this is the best approach, so if someone has a better version, do let me know.

Download this sample here.

Share this post: