WPF model validation

This post is rooted in this: http://stackoverflow.com/questions/14023552/how-to-use-idataerrorinfo-error-in-a-wpf-program

As many people know, WPF uses IDataErrorInfo interface for validation. This is IDataErrorInfo's definition:

    // Summary:
    //     Provides the functionality to offer custom error information that a user
    //     interface can bind to.
    public interface IDataErrorInfo
    {
        // Summary:
        //     Gets an error message indicating what is wrong with this object.
        //
        // Returns:
        //     An error message indicating what is wrong with this object. The default is
        //     an empty string ("").
        string Error { get; }

        // Summary:
        //     Gets the error message for the property with the given name.
        //
        // Parameters:
        //   columnName:
        //     The name of the property whose error message to get.
        //
        // Returns:
        //     The error message for the property. The default is an empty string ("").
        string this[string columnName] { get; }
    }

It's quite simple and self-explanatory. For examle:

    class Person : IDataErrorInfo
    {
        public string PersonName { get; set; }
        public int Age { get; set; }

        string IDataErrorInfo.this[string propertyName]
        {
            get
            {
                if(propertyName=="PersonName")
                {
                    if(PersonName.Length>30 || PersonName.Length<1)
                    {
                        return "Name is required and less than 30 characters.";
                    }
                }
                else if (propertyName == "Age")
                {
                    if (Age<10 || Age>50)
                    {
                        return "Age must between 10 and 50.";
                    }
                }
                return null;
            }
        }

        string IDataErrorInfo.Error
        {
            get
            {
                if(PersonName=="Tom" && Age!=30)
                {
                    return "Tom must be 30.";
                }
                return null;
            }
        }
    }

In order to make this model observable, I also implement the INotifyPropertyChanged interface. (For more information about INotifyPropertyChanged: http://www.codeproject.com/Articles/165368/WPF-MVVM-Quick-Start-Tutorial )

    class Person : IDataErrorInfo, INotifyPropertyChanged
    {
        private string _PersonName;
        private int _Age;
        public string PersonName
        {
            get
            {
                return _PersonName;
            }
            set 
            {
                _PersonName = value;
                NotifyPropertyChanged("PersonName");
            }
        }
        public int Age {
            get
            {
                return _Age;
            }
            set
            {
                _Age = value;
                NotifyPropertyChanged("Age");
            }
        }

        string IDataErrorInfo.this[string propertyName]
        {
            get
            {
                if(propertyName=="PersonName")
                {
                    if(PersonName.Length>30 || PersonName.Length<1)
                    {
                        return "Name is required and less than 30 characters.";
                    }
                }
                else if (propertyName == "Age")
                {
                    if (Age<10 || Age>50)
                    {
                        return "Age must between 10 and 50.";
                    }
                }
                return null;
            }
        }

        string IDataErrorInfo.Error
        {
            get
            {
                if(PersonName=="Tom" && Age!=30)
                {
                    return "Tom must be 30.";
                }
                return null;
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;

        protected void NotifyPropertyChanged(string propertyName)
        {
            PropertyChangedEventHandler handler = PropertyChanged;
            if (handler != null)
            {
                handler(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }

It's not a grace implementation but enough to illustrate this case. I will show a better solution later in this article. Now we create a user interface like that:

<Window x:Class="WpfModelValidation.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="165" Width="395" TextOptions.TextFormattingMode="Display">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="176*" />
            <ColumnDefinition Width="327*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="40" />
            <RowDefinition Height="40" />
            <RowDefinition Height="40" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Label Content="Person Name" Height="28" HorizontalAlignment="Right" />
        <Label Content="Age" Grid.Row="1" Height="28" HorizontalAlignment="Right" />
        <TextBox Grid.Column="1" Height="23" HorizontalAlignment="Left" Margin="5,0,0,0" Name="textboxPersonName" VerticalAlignment="Center" Width="120" Text="{Binding PersonName, ValidatesOnDataErrors=True}" />
        <TextBox Grid.Column="1" Grid.Row="1" Height="23" HorizontalAlignment="Left" Margin="5,0,0,0" Name="textBox1" VerticalAlignment="Center" Width="50" Text="{Binding Age, ValidatesOnDataErrors=True}" />
        <StackPanel Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="2" Orientation="Horizontal" HorizontalAlignment="Right">
            <TextBlock Name="textblockError" Text="{Binding Error, ValidatesOnDataErrors=True}" />
            <Button Content="Test" Grid.Column="1" Grid.Row="2" Height="23" HorizontalAlignment="Right" VerticalAlignment="Center" Name="buttonTest" Width="75" />
        </StackPanel>
    </Grid>
</Window>

And the CSharp code:

    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            Person person = new Person
                {
                    PersonName = "Tom",
                    Age = 31 //A model error should be occurred because Tom must be 30
                };

            DataContext = person;
        }
    }

Run the program.

No error displays? (You can download the code here) That is not we are expecting. After searching a lot of material, I finally realize that the Error property of IDataErrorInfo is useless in WPF! That's a little weird, how should I do model level validation? At last, I found a workaround, I made a special property named ModelError and a method named IsValid. The model is changed to:

    class Person : IDataErrorInfo, INotifyPropertyChanged
    {
        private string _PersonName;
        private int _Age;
        public string PersonName
        {
            get
            {
                return _PersonName;
            }
            set 
            {
                _PersonName = value;
                NotifyPropertyChanged("PersonName");
            }
        }
        public int Age {
            get
            {
                return _Age;
            }
            set
            {
                _Age = value;
                NotifyPropertyChanged("Age");
            }
        }

        public string ModelError
        {
            get { return ModelValidation(); }
        }

        private string ModelValidation()
        {
            if (PersonName == "Tom" && Age != 30)
            {
                return "Tom must be 30.";
            }
            return null;
        }

        //Call this to trigger the model validation.
        public void Validate()
        {
            NotifyPropertyChanged("");
        }

        string IDataErrorInfo.this[string propertyName]
        {
            get
            {
                if (propertyName=="ModelError")
                {
                    string strValidationMessage = ModelValidation();
                    if (!string.IsNullOrEmpty(strValidationMessage))
                    {
                        return strValidationMessage;
                    }
                }

                if(propertyName=="PersonName")
                {
                    if(PersonName.Length>30 || PersonName.Length<1)
                    {
                        return "Name is required and less than 30 characters.";
                    }
                }
                else if (propertyName == "Age")
                {
                    if (Age<10 || Age>50)
                    {
                        return "Age must between 10 and 50.";
                    }
                }
                return null;
            }
        }

        string IDataErrorInfo.Error
        {
            get { throw new NotImplementedException(); }
        }

        public event PropertyChangedEventHandler PropertyChanged;

        protected void NotifyPropertyChanged(string propertyName)
        {
            PropertyChangedEventHandler handler = PropertyChanged;
            if (handler != null)
            {
                handler(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }

And bind the model validation error like this:

<TextBlock Name="textblockError" Text="{Binding ModelError, ValidatesOnDataErrors=True}" />

This time, it works.

Download the code here.

Obviously, the code above is not good. How about making a base class? That sounds like a ideal. I made the model like that:

    class Person : ViewModelBase
    {
        [Required(ErrorMessage = "Cannot be null.")]
        [StringLength(30, ErrorMessage = "Name is required and less than 30 characters.")]
        public string PersonName
        {
            get { return GetValue(() => PersonName); }
            set { SetValue(() => PersonName, value); }
        }

        [Range(10, 50, ErrorMessage = "Age must between 10 and 50.")]
        public int Age
        {
            get { return GetValue(() => Age); }
            set { SetValue(() => Age, value); }
        }

        public override string ModelValidate()
        {
            if (PersonName == "Tom" && Age!=30)
            {
                return "Tom must be 30";
            }
            return null;
        }
    }

Then, add some style to make the error message more informative.

        <Style TargetType="{x:Type TextBox}">
            <Setter Property="Height" Value="23" />
            <Style.Triggers>
                <Trigger Property="Validation.HasError" Value="True">
                    <Setter Property="ToolTip" Value="{Binding RelativeSource={RelativeSource Self}, Path=(Validation.Errors)[0].ErrorContent}" />
                </Trigger>
            </Style.Triggers>
        </Style>

It works again.

Quite familiar with ASP.net MVCer? Download the code here.