WPF. Understanding error validation inside a UserControl with MVVM

Question

I'm trying to validate a form in a UserControl element that is being used by another UserControl that is inside a Window. I'm using MVVM pattern and i'm implementing the INotifyDataErrorInfo in the ViewModel of the last UserControl child. The problem is that, when an error occurs, both, the TextBox inside the UserControl that binds to the property that has generated the error, and the UserControl itself get surrounded by a red box indicating the error, and i want just the TextBox to be highlighted.

Here is the code:

The Window that has the MainView (or the first UserControl):

<Grid>
    <pages:MainPage>
        <pages:MainPage.DataContext>
            <vm:MainViewModel/>
        </pages:MainPage.DataContext>
    </pages:MainPage>
</Grid>

(It just contains a UserControl as a page)

The UserControl of the "MainPage", that contains the other (and last) UserControl as a page inside a page:

<UserControl.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary>
                <DataTemplate DataType="{x:Type vm:SearchViewModel}">
                    <pages:SearchPage/>
                </DataTemplate>

                ...

        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</UserControl.Resources>

...

<ContentControl Content="{Binding CurrentPage}"/>

Ok, now beleive me, "CurrentPage" has a ViewModel object taken from a MainViewModel property, so lets suppose that "CurrentPage" is a "SearchViewModel" object, so there we have the SearchPage UserControl.

And now the last UserControl, the SearchPage:

        <TextBox Grid.Column="1" Grid.Row="0" Text="{Binding CaseNumber}"/>
        <TextBox Grid.Column="1" Grid.Row="1" Text="{Binding PatientNumber}"/>
        <TextBox Grid.Column="1" Grid.Row="2" Text="{Binding PatientName}"/>
        <TextBox Grid.Column="1" Grid.Row="3" Text="{Binding PatientFamilyName}"/>
        <TextBox Grid.Column="1" Grid.Row="4" Text="{Binding PatientMotherMaidenName}"/>
        <TextBox Grid.Column="1" Grid.Row="5" Text="{Binding DoctorName}"/>

Just to make the post as small as possible, i've just added the "form" section of the UserControl.

And now the most important part, the SearchViewModel with the INotifyDataErrorInfo implementation:

public class SearchViewModel : ViewModelBase, INotifyDataErrorInfo, IVMPage
{
    private SearchModel searchModel = new SearchModel();
    public event EventHandler<DataErrorsChangedEventArgs> ErrorsChanged;
    private Dictionary<string, List<string>> errors = new Dictionary<string, List<string>>();


    private string patientNumber;

    public string PatientNumber
    {
        get { return patientNumber; }
        set 
        {
            int number;

            patientNumber = value; 

            if (int.TryParse(value, out number))
            {
                searchModel.PatientNumber = number;
                ClearErrors("PatientNumber");
            }
            else
            {
                AddErrors("PatientNumber", new List<string> { "The value must be a number" });
            }

            RaisePropertyChanged("PatientNumber");
        }
    }
    private string caseNumber;

    public string CaseNumber
    {
        get { return caseNumber; }
        set 
        {
            int number;

            caseNumber = value;

            if (int.TryParse(value, out number))
            {
                searchModel.CaseNumber = number;
                ClearErrors("CaseNumber");
            }
            else
            {
                AddErrors("CaseNumber", new List<string> { "The value must be a number" });
            }

            RaisePropertyChanged("CaseNumber"); 
        }
    }

....

private void ClearErrors(string propertyName)
    {
        errors.Remove(propertyName);

        if (ErrorsChanged != null)
            ErrorsChanged(this, new DataErrorsChangedEventArgs(propertyName));
    }

    private void AddErrors(string propertyName, List<string> newErrors)
    {
        errors.Remove(propertyName);
        errors.Add(propertyName, newErrors);

        if(ErrorsChanged != null)
            ErrorsChanged(this, new DataErrorsChangedEventArgs(propertyName));
    }
public System.Collections.IEnumerable GetErrors(string propertyName)
    {
        if(string.IsNullOrEmpty(propertyName))
        {
            return errors.Values;
        }
        else
        {
            if(errors.ContainsKey(propertyName))
            {
                return errors[propertyName];
            }
            else
            {
                return null;
            }
        }
    }

    public bool HasErrors
    {
        get { return (errors.Count() > 0); }
    }

So, the problem is: For example, if i introduce characters in "CaseNumber" TextBox, it is surrounded with a red line indicating the error AND all the SearchPage UserControl is also surrounded with another red line. What i want is just to mark the TextBox with the red line to indicate the error and NOT all the UserControl.

The curious thing is that, if i comment the sections at AddError and ClearError methods where the ErrorChanged event is fired, the UserControl is no longer surrounded with the red line... But i don't lnow why...

Sorry for the long question and thanks.

Answer 1

Ok, the answer is simple. The problem was with this line:

<ContentControl Content="{Binding CurrentPage}"/>

Because WPF by default sets the ValidatesOnNotifyDataErrors property to true, when an error happens inside the "CurrentPage" UserControl, the TextBox that generated the error inside the UserControl indicates the error with a red line arround him, as expected, BUT ALSO the ContentControl checks the "GetErrors" method and draws another redline arround all the "CurrentPage" UserControl.

To avoid this and just indicate the error at the TextBox and not all the UserControl, just had to add this to the ContentControl declaration:

<ContentControl Content="{Binding CurrentPage, ValidatesOnNotifyDataErrors=False}"/> 

Answer 2

Brief version

Color the background of the text box instead of the border.

(optional) Detailed version

Been there, run into that problem. The border of a textbox is reasonably difficult to change, as so many things play with it. For example, if you are using DevExpress, you have to override the whole textbox style to get at the border, then you start to lose the natural highlighting when the box is selected, etc.

Thus, I suggest coloring the background of the textbox to indicate an error. Its much more obvious to the user, looks great, and works well in practice.

Use a very light red color, this page is good for finding colors that are in harmony with the existing color scheme of your page:

https://color.adobe.com/create/color-wheel/