WPF: Validation Feedback with ValidationDecorator

When displaying input forms, one often wishes to perform input validation.  Thankfully, WPF provides some facilities for performing validation on data bindings.  It even hooks into the control styling and templating system, giving us a means of changing a data-bound field’s appearance or displaying an error message when binding validations fail.  This has indirectly led to some problems for us.  Our development teams overseas have made a habit of overriding our custom control styles with their own for the sole purpose of modifying the validation error template.  Since our Smart Client utilizes custom themes based on Microsoft Office 2007, and the overseas developers base their styles off the default styles, we end up with a lot of UX inconsistency.  These inconsistencies are compounded by the fact that different product teams have designed vastly different error templates.

To combat this problem, and provide an easier way for our overseas developers to display useful and visually consistent error feedback, I have created a custom ValidationDecorator control.  The ValidationDecorator wraps any WPF control and provides some commonly needed visual feedback cues:

The error indicator and optional “info” indicator are completely vector-based, so they can be used in applications with a scalable/zoomable UX:

To use it, one must simply wrap a data-bound field with a ValidationDecorator, optionally setting the InfoContent property to display the “info” indicator and tooltip.  The alignment, margins, and default visibility of the indicator icon are configurable.  The “required field” indicator may also be switched on and off.

<cc:ValidationDecorator InfoContent="Enter a year prior to or including the current year.&#0013;This field is required."

                        ShowRequiredFieldIndicator="True">

  <TextBox MinWidth="75"

           Text="{Binding Path=Year, ValidatesOnDataErrors=True, Mode=TwoWay}" />

</cc:ValidationDecorator>

I’ve published the ValidationDecorator code on my SkyDrive as public domain.  Feel free to use it however you see fit: