WPF Error Adorner Visibility Binding MVVM Style

While working on an Application for a Client recently, I found that I needed to be able to control the visibility of the WPF Error Adorners.

These error adorners are a great way of giving the end user a visual representation of where any Validation Errors exist. However, as a result of their design, these Adorners will always appear ontop of all other elements. This causes a problem of course, when using anything such as a Customer Message box. The very thing required to notify the User of any Validation Errors on Save for example.

So, I decided to look at ways of controlling, globally, the Visibility of the Error Adorners. This became rather troublesome, After some trial and error I realised that I could reach the DataContext that the Error Adorner was placed within by refering to the AdornedElement’s Parent.

Once I realised this, I added a ShowErrors Boolean Property to my DataContext, and bound the Visibility of the AdornedElement to this.

The XAML Code was;

<Converters:BolVisibilityConverter x:Key="MyBolVisibilityConverter"/>

<Style TargetType="{x:Type TextBox}">

      <Setter Property="VerticalAlignment" Value="Center" />

      <Setter Property="Margin" Value="0,2,40,2" />

      <Setter Property="Validation.ErrorTemplate">

          <Setter.Value>

              <ControlTemplate>

                        <DockPanel LastChildFill="true" Visibility="{Binding ElementName=customAdorner, Path=AdornedElement.Parent.DataContext.ShowErrors, Converter={StaticResource MyBolVisibilityConverter}, Mode=TwoWay}">

                            <Border Background="Red" DockPanel.Dock="right" Margin="5,0,0,0" Width="20" Height="20" CornerRadius="10"

                            ToolTip="{Binding ElementName=customAdorner, Path=AdornedElement.(Validation.Errors)[0].ErrorContent}">

                                <TextBlock Text="!" VerticalAlignment="center" HorizontalAlignment="center" FontWeight="Bold" Foreground="white">

                                </TextBlock>

                          </Border>

                          <AdornedElementPlaceholder Name="customAdorner" VerticalAlignment="Center" >

                         <Border BorderBrush="red" BorderThickness="1" />

                       </AdornedElementPlaceholder>

                   </DockPanel>

               </ControlTemplate>

           </Setter.Value>

      </Setter>

</Style>

I needed to use a Value Converter here, to convert my Boolean to a Visibility Value. The Converter Code was;

Namespace Converters

    Public Class BolVisibilityConverter

        Implements IValueConverter

        Public Function Convert(value As Object, targetType As Type, parameter As Object, culture As Globalization.CultureInfo) As Object Implements IValueConverter.Convert

            If value Is Nothing OrElse value = False Then

                Return Visibility.Hidden

            Else

                Return Visibility.Visible

            End If

        End Function

        Public Function ConvertBack(value As Object, targetType As Type, parameter As Object, culture As Globalization.CultureInfo) As Object Implements IValueConverter.ConvertBack

            Return DirectCast(value, Boolean)

        End Function

    End Class

End Namespace

I was then able to control the Adorner Visibility simply by setting the ShowErrors Property to either True or False