属于 UserControl 子级的错误与 UserControl 而不是子级相关联

Question

I've created a UserControl that is designed for re-use and must be totally independent. It has dependency properties, doesn't set its DataContext to anything, and in its template it only binds to its own dependency propeties.

This is an example situation:

The control is used for entering an address. It contains a few fields (City, street, PO box, etc.). The control has dependency properties like CityProperty , StreetProperty , ... Each field has a binding to the corresponding dependency property. So the street TextBox Text has a binding with StreetProperty DP of the UserControl. Because there's no datacontext set from within the control explicitly, it'll always inherit the datacontext from its parent.

When using my control by embedding it in another control (view), I use its dependency properties to define a binding with the ViewModel (datacontext) of the view it is placed in.

<StackPanel x:Name="someView" DataContext=" ... a viewmodel ... "> <!-- Some view that uses my Address control -->

<TextBlock>Enter an address</TextBlock> <!-- Just some parts of the view -->

<myControls:AddressControl 
    City="{Binding ShippingCity"
    Street="{Binding ShippingStreet}"
    ...
/>

</StackPanel>

My control's dependency properties are bound to ViewModel properties of the view the control is placed in. The ViewModel implements INotifyDataErrorInfo .

When there are validation errors, the errors should be 'attached' to the corresponding TextBox es in the UserControl. A TextBox in the usercontrol should be in error state and change its appearance to its error template.

But what actually happens, is that the UserControl detects there's one or more errors associated with a binding to its dependency property. The framework interprets the control as one thing that has 'some' error. A red border around the entire UserControl is displayed (default behavior).

I want to display the errors to the corresponding field in the UserControl. But I don't know how to do this. How to handle the validation errors on bindings to dependency properties of a UserControl so, that the validation error can be forwarded to the correct child control in that UserControl. The only association between validation errors from the ViewModel to the right child control in the UserControl, is the imaginary 'route' via the dependency properties.

Answer 1

I give you a UserControl class called an AddressControl that can be reused without dependence on external objects. And any change from outside control to inside control.

AddressControl.cs

public partial class AddressControl : UserControl, IDataErrorInfo
{
   public string City
   {
      get { return (string)GetValue(CityProperty); }
      set { SetValue(CityProperty, value); }
   }

   // Using a DependencyProperty as the backing store for City.  This enables styling, binding, etc...
   public static readonly DependencyProperty CityProperty =
            DependencyProperty.Register("City", typeof(string), typeof(AddressControl), new PropertyMetadata(string.Empty, new PropertyChangedCallback(OnCityChanged)));

   private static void OnCityChanged(DependencyObject sender, DependencyPropertyChangedEventArgs args)
   {
      AddressControl ac = new AddressControl();
      ac.ChangeCityText();
   }
   public void ChangeCityText()
   {
      txtCity.Text = City;
   }

   public string Street
   {
      get { return (string)GetValue(StreetProperty); }
      set { SetValue(StreetProperty, value); }
   }

   // Using a DependencyProperty as the backing store for Street.  This enables styling, binding, etc...
   public static readonly DependencyProperty StreetProperty =
   DependencyProperty.Register("Street", typeof(string), typeof(AddressControl), new PropertyMetadata(string.Empty, new PropertyChangedCallback(OnStreetChanged)));

   private static void OnStreetChanged(DependencyObject sender, DependencyPropertyChangedEventArgs args)
   {
      AddressControl ac = new AddressControl();
      ac.ChangeStreetText();
   }
   public void ChangeStreetText()
   {
      txtStreet.Text = Street;
   }
   public AddressControl()
   {
      InitializeComponent();
      DataContext = this;
   }

   public string Error
   {
       get
       {
          return null;
       }
   }

   public string this[string name]
   {
      get
      {
          string result = null;

          if (name == "City")
          {
              if (string.IsNullOrEmpty(City) || string.IsNullOrWhiteSpace(City))
              {
                 result = "please enter city";
              }
          }

          if (name == "Street")
          {
             if (string.IsNullOrEmpty(Street) && string.IsNullOrWhiteSpace(Street))
             {
                 result = "please enter street";
             }
          }
          return result;
      }
   }
}

AddressControl.xaml

<UserControl x:Class="WpfApp1.AddressControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:WpfApp1"
             mc:Ignorable="d" Width="600">
    <UserControl.Resources>
        <Style x:Key="CustomTextBoxTextStyle" TargetType="TextBox">
            <Setter Property="FontWeight" Value="Normal"></Setter>
            <Setter Property="FontSize" Value="14"></Setter>
            <Setter Property="Margin" Value="0"></Setter>
            <Setter Property="FontFamily" Value="Arial"></Setter>
            <Setter Property="FontWeight" Value="Bold"></Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TextBox}">
                        <Border KeyboardNavigation.IsTabStop="False" x:Name="bg" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="2">
                            <ScrollViewer x:Name="PART_ContentHost" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Opacity" TargetName="bg" Value="0.56"/>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter Property="BorderBrush" TargetName="bg" Value="#FF7EB4EA"/>
                            </Trigger>
                            <Trigger Property="IsFocused" Value="True">
                                <Setter Property="BorderBrush" TargetName="bg" Value="#FF7EB4EA"/>
                            </Trigger>
                            <Trigger Property="Validation.HasError" Value="True">
                                <Trigger.Setters>
                                    <Setter Property="ToolTip" Value="{Binding RelativeSource={RelativeSource Self},Path=(Validation.Errors)[0].ErrorContent}"/>
                                    <Setter Property="BorderThickness" TargetName="bg" Value="2"/>
                                    <Setter Property="BorderBrush" TargetName="bg" Value="Red"/>
                                </Trigger.Setters>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    </UserControl.Resources>
    <Grid FlowDirection="LeftToRight" HorizontalAlignment="Left">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100"></ColumnDefinition>
            <ColumnDefinition MinWidth="460"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="50"></RowDefinition>
            <RowDefinition Height="50"></RowDefinition>
        </Grid.RowDefinitions>


        <TextBlock Text="City :" Grid.Row="0" Grid.Column="0" VerticalAlignment="Center" Margin="5 0 0 0"></TextBlock>
        <TextBox Style="{StaticResource CustomTextBoxTextStyle}" TabIndex="1" Grid.Row="0" Grid.Column="1" x:Name="txtCity" Padding="10 10 10 3" BorderThickness="2" MinWidth="260" Height="38" HorizontalAlignment="Left" VerticalAlignment="Center">
            <TextBox.Text>
                <Binding Path="City"
                         ValidatesOnExceptions="True"
                         UpdateSourceTrigger="PropertyChanged">
                    <Binding.ValidationRules>
                        <DataErrorValidationRule/>
                    </Binding.ValidationRules>
                </Binding>
            </TextBox.Text>

            <Validation.ErrorTemplate>
                <ControlTemplate>
                    <DockPanel>
                        <TextBlock FontSize="11" FontStyle="Italic" Foreground="Red" Margin="10 10 0 0" DockPanel.Dock="Right"
                                       Text="{Binding ElementName=ErrorAdorner, Path=AdornedElement.(Validation.Errors)[0].ErrorContent}" />
                        <AdornedElementPlaceholder x:Name="ErrorAdorner"
    ></AdornedElementPlaceholder>
                    </DockPanel>
                </ControlTemplate>
            </Validation.ErrorTemplate>
        </TextBox>


        <TextBlock Text="Street :" Grid.Row="1" Grid.Column="0" VerticalAlignment="Center" Margin="5 0 0 0"></TextBlock>
        <TextBox Style="{StaticResource CustomTextBoxTextStyle}" TabIndex="2" Grid.Row="1" Grid.Column="1" x:Name="txtStreet" Padding="10 10 10 3" BorderThickness="2" MinWidth="260" Height="38" HorizontalAlignment="Left" VerticalAlignment="Center">
            <TextBox.Text>
                <Binding Path="Street"
                         ValidatesOnExceptions="True"
                         UpdateSourceTrigger="PropertyChanged">
                    <Binding.ValidationRules>
                        <DataErrorValidationRule/>
                    </Binding.ValidationRules>
                </Binding>
            </TextBox.Text>

            <Validation.ErrorTemplate>
                <ControlTemplate>
                    <DockPanel>
                        <TextBlock FontSize="11" FontStyle="Italic" Foreground="Red" Margin="10 10 0 0" DockPanel.Dock="Right"
                                       Text="{Binding ElementName=ErrorAdorner, Path=AdornedElement.(Validation.Errors)[0].ErrorContent}" />
                        <AdornedElementPlaceholder x:Name="ErrorAdorner" KeyboardNavigation.IsTabStop="False"
    ></AdornedElementPlaceholder>
                    </DockPanel>
                </ControlTemplate>
            </Validation.ErrorTemplate>
        </TextBox>

    </Grid>
</UserControl>

now Use:You can bind or change the amount of debt immediately

<Window x:Class="WpfApp1.MainWindow"
        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"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <StackPanel VerticalAlignment="Center">       
        <local:AddressControl x:Name="addressControl" City="Paris" Street="Street Menia"></local:AddressControl>
        <Button x:Name="btnTest" Content="Test" Width="100" Click="btnTest_Click" Margin="0 10 0 0"></Button>
    </StackPanel>
</Window>

You can replace the following line

<local:AddressControl x:Name="addressControl" City="Paris" Street="Street Menia"></local:AddressControl>

ٌWith this code

<local:AddressControl x:Name="addressControl" City="{Binding ShippingCity}" Street="{Binding ShippingStreet}"></local:AddressControl>

And Button Click Event in MainWindow

private void btnTest_Click(object sender, RoutedEventArgs e)
{
   string result = "";
   if (Validation.GetHasError(addressControl.txtCity))
   {
       result = Validation.GetErrors(addressControl.txtCity).FirstOrDefault().ErrorContent.ToString();
   }
   MessageBox.Show(result);
}