Screen Validation With Data Annotations in WPF

In the article Using Data Annotations to validate models I showed that it is possible to keep validations in attributes.

In this article I will show how to apply these validations on the client side.

Note: All your models must implement INotifyPropertyChanged, and to make it simple and clean, I will be using the Fody PropertyChanged Nuget package.

In order to tell the screen it should validate the bound property we need to implement the IDataErrorInfo interface. For example:

[PropertyChanged.ImplementPropertyChanged]
public abstract class PropertyValidateModel : IDataErrorInfo
{
    // check for general model error
    public string Error { get { return null; } }

    // check for property errors
    public string this[string columnName]
    {
        get
        {
            var validationResults = new List<ValidationResult>();

            if (Validator.TryValidateProperty(
                    GetType().GetProperty(columnName).GetValue(this)
                    , new ValidationContext(this)
                      {
                          MemberName = columnName
                      }
                    , validationResults))
                return null;

            return validationResults.First().ErrorMessage;
        }
    }
}

This validation method is similar to the validation in the other article, however it validates a property instead of the entire model. With this class I can now inherit from it and my model will automatically be implementing IDataErrorInfo.

[PropertyChanged.ImplementPropertyChanged]
public class Game : PropertyValidateModel
{
    [Required]
    [StringLength(5)]
    public string Name { get; set; }

    [Required]
    [StringLength(5)]
    public string Genre { get; set; }

    [Required]
    [Range(13, 40)]
    public int MinAge { get; set; }
}

On my view I need to bind the properties with some additional settings as in the following:

<TextBox Text="{Binding Name, UpdateSourceTrigger=PropertyChanged
    , NotifyOnValidationError=True, ValidatesOnDataErrors=True}" />

 

• UpdateSourceTrigger will tell the view to notify changes as they happen.
  
• NotifyOnValidationError will notify when there are errors.
  
• ValidatesOnDataErrors will enable validation.

The outcome will be:



However by simply doing it this way we do not get any error messages displayed, so we do not know what is wrong with the data. To display the errors we need to do a little trick with the Validation.ErrorTemplate.

The code following binds, using a trigger, the TextBox's ToolTip to the first error encountered in the control. And by setting the TextBox's error template we can display the error message by accessing the AdornedElement and grabbing the ToolTip where the error message is contained. If you do not want to use the ToolTip you can use the Tagproperty instead.

<Style TargetType="TextBox">
    <Setter Property="Validation.ErrorTemplate">
        <Setter.Value>
            <ControlTemplate>
                <StackPanel>
                    <Border BorderThickness="2" BorderBrush="DarkRed">
                        <StackPanel>
                            <AdornedElementPlaceholder
                                x:Name="errorControl" />
                        </StackPanel>
                    </Border>
                    <TextBlock Text="{Binding AdornedElement.ToolTip
                        , ElementName=errorControl}" Foreground="Red" />
                </StackPanel>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="Validation.HasError" Value="true">
            <Setter Property="BorderBrush" Value="Red" />
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="ToolTip"
                Value="{Binding RelativeSource={RelativeSource Self}
                    , Path=(Validation.Errors)[0].ErrorContent}" />
        </Trigger>
    </Style.Triggers>
</Style>

Running the application again gets: