How to force validation to show on UserControl

Question

I want stock/standard red border validation with tooltip to show around my UserControl. See code below. I have main page and UserControl.

UserControl has textbox and button. UserControls binds to Id property and displays this Id inside TextBox.

Main page has UserControl and TextBox. They bound to FirstValue and SecondValue. Both properties raise error. When I type/change something in textbox - I see border and summary. When I change text in my UserControl - I see error in summary but no border and when I click on error - it focuses button, doesn't go to TextBox. How do I fix that? I want whole UserControl to be inside red border.

MainPage XAML:

<UserControl x:Class="SilverlightApplication1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="275" d:DesignWidth="402" xmlns:my="clr-namespace:SilverlightApplication1" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">

    <Grid x:Name="LayoutRoot" Background="White" Width="300" HorizontalAlignment="Left">
        <Grid.RowDefinitions>
            <RowDefinition Height="30" />
            <RowDefinition Height="40" />
            <RowDefinition Height="30" />
            <RowDefinition Height="30" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <TextBox Grid.Row="2" Margin="3" Text="{Binding SecondValue, Mode=TwoWay, NotifyOnValidationError=True}"/>
        <my:TestUserControl Margin="3" Id="{Binding FirstValue, Mode=TwoWay, NotifyOnValidationError=True}"/>
        <sdk:ValidationSummary Grid.Row="4" Name="validationSummary1" />
    </Grid>
</UserControl>

MainPage CS

using System.Windows.Controls;


namespace SilverlightApplication1
{
    using System;
    using System.Collections;
    using System.Collections.Generic;
    using System.ComponentModel;
    using System.Linq;

    public partial class MainPage : UserControl, INotifyDataErrorInfo, INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        public event EventHandler<DataErrorsChangedEventArgs> ErrorsChanged;
        readonly Dictionary<string, List<string>> _currentErrors;

        private string _firstValue;
        private string _secondValue;

        public MainPage()
        {
            InitializeComponent();
            _currentErrors = new Dictionary<string, List<string>>();
            _firstValue = "test1";
            _secondValue = "test2";
            LayoutRoot.DataContext = this;
        }


        public string FirstValue
        {
            get { return _firstValue; }

            set
            {
                _firstValue = value;
                CheckIfValueIsValid("FirstValue", value);
                this.OnPropertyChanged("FirstValue");
            }
        }

        public string SecondValue
        {
            get { return _secondValue; }
            set
            {
                _secondValue = value;
                CheckIfValueIsValid("SecondValue", value);
                this.OnPropertyChanged("SecondValue");
            }
        }

        public void CheckIfValueIsValid(string propertyName, string value)
        {
            ClearErrorFromProperty(propertyName);

            AddErrorForProperty(propertyName, "Bad value");
        }

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

        public IEnumerable GetErrors(string propertyName)
        {
            if (string.IsNullOrEmpty(propertyName))
            {
                return (_currentErrors.Values);
            }
            MakeOrCreatePropertyErrorList(propertyName);

            return _currentErrors[propertyName];
        }

        public bool HasErrors
        {
            get
            {
                return (_currentErrors.Where(c => c.Value.Count > 0).Count() > 0);
            }
        }

        void FireErrorsChanged(string property)
        {
            if (ErrorsChanged != null)
            {
                ErrorsChanged(this, new DataErrorsChangedEventArgs(property));
            }
        }

        public void ClearErrorFromProperty(string property)
        {
            MakeOrCreatePropertyErrorList(property);

            _currentErrors[property].Clear();
            FireErrorsChanged(property);
        }

        public void AddErrorForProperty(string property, string error)
        {
            MakeOrCreatePropertyErrorList(property);
            _currentErrors[property].Add(error);
            FireErrorsChanged(property);
        }

        void MakeOrCreatePropertyErrorList(string propertyName)
        {
            if (!_currentErrors.ContainsKey(propertyName))
            {
                _currentErrors[propertyName] = new List<string>();
            }
        }


    }
}

UserControl XAML:

<UserControl x:Class="SilverlightApplication1.TestUserControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="30" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Button Content="..." Grid.Column="1" Padding="10,0" />
        <TextBox Text="{Binding Id, Mode=TwoWay}" />
    </Grid>
</UserControl>

UserControl CS:

using System.Windows.Controls;

namespace SilverlightApplication1
{
    using System.ComponentModel;
    using System.Windows;

    public partial class TestUserControl : UserControl, INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        public TestUserControl()
        {
            InitializeComponent();
            LayoutRoot.DataContext = this;
        }


        public string Id
        {
            get { return (string)base.GetValue(IdProperty); }
            set
            {
                base.SetValue(IdProperty, value);
                this.OnPropertyChanged("Id");
            }
        }

        public static DependencyProperty IdProperty =
            DependencyProperty.Register(
            "Id",
            typeof(string),
            typeof(TestUserControl),
            new PropertyMetadata(OnIdChanged));

        private static void OnIdChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            if (DesignerProperties.IsInDesignTool) return;

            var lookup = d as TestUserControl;
            lookup.OnPropertyChanged("Id");
        }

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

    }
}

Answer 1

To make your example work, you should remove all the code from the TestUserControl.xaml.cs file and fix bindings. Like this:

<Button Content="..." Grid.Column="1" Padding="10,0" />
<TextBox Text="{Binding FirstValue, Mode=TwoWay, NotifyOnValidationError=True, ValidatesOnNotifyDataErrors=True}" />

And empty code behind:

public partial class TestUserControl : UserControl
{
    public TestUserControl()
    {
        InitializeComponent();
    }
}

Next, your another question

display red border around all 3 boxes (one rectangle)

It can be achieved by binding to the HasError property. According to your code it will look so:

<Grid x:Name="LayoutRoot" Background="White">
   <!-- ... -->
   <Border BorderBrush="Red" BorderThickness="1" 
            Grid.ColumnSpan="2" IsHitTestVisible="False"
            Visibility="{Binding HasErrors, Converter={StaticResource BooleanToVisibilityConverter}}" />

I've added the red Border element which becomes visible when the HasError property is set to true. But you should call the OnPropertyChanged("HasError") somewhere in your code.

Another way: to create a custom control instead of UserControl. I've posted excessive description how to implement validation in custom controls as the answer to this question about validation.  

I can make a more concrete answer, but you should fix the code in your post by separating view model from view, because now it is difficult to implement something based on current code. Check my post about implementation of validation using INotifyDataErrorInfo: WPF and Silverlight Validation.

Or you can download my validation classes directly.

After that the code will be much simplier, and I will be able to help you with more complex questions.

Answer 2

Change

<TextBox Text="{Binding Id, Mode=TwoWay}" />

to

<TextBox Text="{Binding Id, Mode=TwoWay, NotifyOnValidationError=True, ValidatesOnDataErrors=True}" />