WPF应用中如何基于MVVM模式正确显示错误信息？

嘿，我太懂你这种感觉了——本来以为错误提示是个随手就能搞定的小功能，结果在MVVM模式下要做到优雅又符合规范，还真得踩几个坑！下面我给你分享两种最常用的实现方案，完全贴合MVVM思想，帮你搞定红色边框和错误文本的需求：

方案1：使用INotifyDataErrorInfo（推荐，WPF 4.5+支持） #

这是微软官方推荐的现代验证方式，支持异步验证、多错误提示，比旧的IDataErrorInfo灵活太多，也是现在MVVM项目的首选。

第一步：在ViewModel基类中实现INotifyDataErrorInfo #

先把你的ViewModel基类改成实现这个接口，核心是维护一个存储错误信息的字典，再实现对应的属性和方法：

public abstract class ViewModelBase : ObservableObject, INotifyDataErrorInfo
{
    // 存储每个属性的错误列表
    private readonly Dictionary<string, List<string>> _propertyErrors = new Dictionary<string, List<string>>();

    // 标记是否存在错误
    public bool HasErrors => _propertyErrors.Any();

    // 错误变化时触发的事件
    public event EventHandler<DataErrorsChangedEventArgs>? ErrorsChanged;

    // 获取指定属性的错误信息
    public IEnumerable GetErrors(string? propertyName)
    {
        if (string.IsNullOrEmpty(propertyName) || !_propertyErrors.ContainsKey(propertyName))
            return Enumerable.Empty<string>();
        
        return _propertyErrors[propertyName];
    }

    // 给指定属性添加错误
    protected void AddPropertyError(string propertyName, string errorMessage)
    {
        if (!_propertyErrors.ContainsKey(propertyName))
            _propertyErrors[propertyName] = new List<string>();

        if (!_propertyErrors[propertyName].Contains(errorMessage))
        {
            _propertyErrors[propertyName].Add(errorMessage);
            OnErrorsChanged(propertyName);
        }
    }

    // 清除指定属性的所有错误
    protected void ClearPropertyErrors(string propertyName)
    {
        if (_propertyErrors.ContainsKey(propertyName))
        {
            _propertyErrors.Remove(propertyName);
            OnErrorsChanged(propertyName);
        }
    }

    // 触发错误变化事件
    private void OnErrorsChanged(string propertyName)
    {
        ErrorsChanged?.Invoke(this, new DataErrorsChangedEventArgs(propertyName));
    }
}

第二步：在ViewModel中编写验证逻辑 #

比如你有一个UserName属性，需要验证非空和长度要求：

public class LoginViewModel : ViewModelBase
{
    private string _userName = string.Empty;

    public string UserName
    {
        get => _userName;
        set
        {
            SetProperty(ref _userName, value);
            ValidateUserName();
        }
    }

    // 单独抽离验证逻辑，保持属性setter干净
    private void ValidateUserName()
    {
        ClearPropertyErrors(nameof(UserName));
        
        if (string.IsNullOrWhiteSpace(UserName))
        {
            AddPropertyError(nameof(UserName), "用户名不能为空");
        }
        else if (UserName.Length < 3)
        {
            AddPropertyError(nameof(UserName), "用户名长度不能少于3个字符");
        }
    }
}

第三步：在XAML中绑定并自定义错误模板 #

现在要让视图显示红色边框和错误文本，需要给输入控件设置Validation.ErrorTemplate，并开启错误验证绑定：

<Grid Margin="20">
    <StackPanel>
        <!-- 用户名输入框 -->
        <TextBox Text="{Binding UserName, 
                                Mode=TwoWay, 
                                UpdateSourceTrigger=PropertyChanged, 
                                ValidatesOnNotifyDataErrors=True}">
            <!-- 自定义错误模板：红色边框 + 下方错误文本 -->
            <Validation.ErrorTemplate>
                <ControlTemplate>
                    <StackPanel>
                        <!-- 包裹原始控件的红色边框 -->
                        <Border BorderBrush="Red" BorderThickness="1">
                            <AdornedElementPlaceholder x:Name="Placeholder"/>
                        </Border>
                        <!-- 显示错误文本 -->
                        <TextBlock Text="{Binding [0].ErrorContent}" 
                                   Foreground="Red" 
                                   FontSize="12" 
                                   Margin="0,2,0,0"/>
                    </StackPanel>
                </ControlTemplate>
            </Validation.ErrorTemplate>
        </TextBox>
    </StackPanel>
</Grid>

注意：ValidatesOnNotifyDataErrors=True是必须的，它告诉WPF要监听INotifyDataErrorInfo的错误通知。

方案2：使用IDataErrorInfo（兼容旧版本WPF） #

如果你的项目需要兼容WPF 4.5之前的版本，可以用这个旧接口，实现更简单，但只支持同步验证和单个错误：

第一步：ViewModel基类实现IDataErrorInfo #

public abstract class ViewModelBase : ObservableObject, IDataErrorInfo
{
    // 获取指定属性的错误信息
    public abstract string this[string propertyName] { get; }

    // 类级别的错误，一般用不到，返回空即可
    public string Error => string.Empty;
}

第二步：ViewModel中实现验证逻辑 #

public class LoginViewModel : ViewModelBase
{
    private string _userName = string.Empty;

    public string UserName
    {
        get => _userName;
        set => SetProperty(ref _userName, value);
    }

    // 实现索引器，返回对应属性的错误信息
    public override string this[string propertyName]
    {
        get
        {
            string errorMsg = string.Empty;
            switch (propertyName)
            {
                case nameof(UserName):
                    if (string.IsNullOrWhiteSpace(UserName))
                        errorMsg = "用户名不能为空";
                    else if (UserName.Length < 3)
                        errorMsg = "用户名长度不能少于3个字符";
                    break;
            }
            return errorMsg;
        }
    }
}

第三步：XAML绑定 #

只需要在绑定里加上ValidatesOnDataErrors=True，同样可以用Validation.ErrorTemplate自定义显示：

<TextBox Text="{Binding UserName, 
                        Mode=TwoWay, 
                        UpdateSourceTrigger=PropertyChanged, 
                        ValidatesOnDataErrors=True}">
    <Validation.ErrorTemplate>
        <ControlTemplate>
            <StackPanel>
                <Border BorderBrush="Red" BorderThickness="1">
                    <AdornedElementPlaceholder/>
                </Border>
                <TextBlock Text="{Binding [0].ErrorContent}" Foreground="Red" FontSize="12" Margin="0,2,0,0"/>
            </StackPanel>
        </ControlTemplate>
    </Validation.ErrorTemplate>
</TextBox>

额外实用小技巧 #

• 如果想让验证在用户点击提交按钮时才触发（而非实时输入时），可以把UpdateSourceTrigger改成Explicit，然后在提交命令里手动调用BindingExpression.UpdateSource()：

  var binding = UserNameTextBox.GetBindingExpression(TextBox.TextProperty);
  binding?.UpdateSource();
  

• 可以把错误模板提取成全局Style，这样所有输入控件都能复用，不用重复写模板代码：

  <Style TargetType="TextBox">
      <Setter Property="Validation.ErrorTemplate">
          <Setter.Value>
              <ControlTemplate>
                  <StackPanel>
                      <Border BorderBrush="Red" BorderThickness="1">
                          <AdornedElementPlaceholder/>
                      </Border>
                      <TextBlock Text="{Binding [0].ErrorContent}" Foreground="Red" FontSize="12" Margin="0,2,0,0"/>
                  </StackPanel>
              </ControlTemplate>
          </Setter.Value>
      </Setter>
  </Style>
  

内容的提问来源于stack exchange，提问作者Junior