WPF MVVM从入门到精通8：数据验证

其他 2019-04-10 09:24:45 阅读次数: 0
原文: WPF MVVM从入门到精通8：数据验证

WPF MVVM从入门到精通1：MVVM模式简介

WPF MVVM从入门到精通2：实现一个登录窗口

WPF MVVM从入门到精通3：数据绑定

WPF MVVM从入门到精通4：命令和事件

WPF MVVM从入门到精通5：PasswordBox的绑定

WPF MVVM从入门到精通6：RadioButton等一对多控件的绑定

WPF MVVM从入门到精通7：关闭窗口和打开新窗口

WPF MVVM从入门到精通8：数据验证

完整示例代码下载LoginDemo

到目前为止，登录窗口的基本功能似乎都完成了。但我们知道，很多时候用户名的格式是有要求的，例如是只有字母数字下划线，或者字数有限制。这要求我们在登录之前，验证输入内容的正确性。在这一节，我们需要验证用户名和密码的正确性，如果上面两个框的输入非法，禁用登录按钮。

在数据验证错误的时候，我们显示一个叹号在输入框的旁边，如下图所示：

数据验证的方法有很多，我们使用了一种比较优雅的。

首先定义一些验证属性：

using System.ComponentModel.DataAnnotations;

namespace LoginDemo.ViewModel.Login
{
    public class NotEmptyCheck : ValidationAttribute
    {
        public override bool IsValid(object value)
        {
            var name = value as string;
            if (string.IsNullOrEmpty(name))
            {
                return false;
            }
            return true;
        }

        public override string FormatErrorMessage(string name)
        {
            return "不能为空";
        }
    }

    public class UserNameExists : ValidationAttribute
    {
        public override bool IsValid(object value)
        {
            var name = value as string;
            if (name.Contains("abc"))
            {
                return true;
            }
            return false;
        }

        public override string FormatErrorMessage(string name)
        {
            return "用户名必须包含abc";
        }
    }
}

第一个验证属性要求宿主的内容不能为空，第二个验证属性要求内容必须含有abc这个字符串。

然后我们又要用到Behavior了。当绑定的内容校验出异常后，它会一起冒泡，只到Window。这时候，Window的Behavior接收到异常，做出相应的处理。

using System;
using System.Collections.Generic;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Interactivity;

namespace LoginDemo.ViewModel.Common
{
    /// <summary>
    /// 验证异常行为
    /// </summary>
    public class ValidationExceptionBehavior : Behavior<FrameworkElement>
    {
        /// <summary>
        /// 记录异常的数量
        /// </summary>
        /// <remarks>在一个页面里面，所有控件的验证错误信息都会传到这个类上，每个控制需不需要显示验证错误，需要分别记录</remarks>
        private Dictionary<UIElement, int> ExceptionCount;
        /// <summary>
        /// 缓存页面的提示装饰器
        /// </summary>
        private Dictionary<UIElement, NotifyAdorner> AdornerDict;

        protected override void OnAttached()
        {
            ExceptionCount = new Dictionary<UIElement, int>();
            AdornerDict = new Dictionary<UIElement, NotifyAdorner>();

            this.AssociatedObject.AddHandler(Validation.ErrorEvent, new EventHandler<ValidationErrorEventArgs>(OnValidationError));
        }

        /// <summary>
        /// 当验证错误信息改变时，首先调用此函数
        /// </summary>
        private void OnValidationError(object sender, ValidationErrorEventArgs e)
        {
            try
            {
                var handler = GetValidationExceptionHandler();//插入<c:ValidationExceptionBehavior></c:ValidationExceptionBehavior>此语句的窗口的DataContext，也就是ViewModel
                var element = e.OriginalSource as UIElement;//错误信息发生改变的控件
                if (handler == null || element == null)
                {
                    return;
                }

                if (e.Action == ValidationErrorEventAction.Added)
                {
                    if (ExceptionCount.ContainsKey(element))
                    {
                        ExceptionCount[element]++;
                    }
                    else
                    {
                        ExceptionCount.Add(element, 1);
                    }
                }
                else if (e.Action == ValidationErrorEventAction.Removed)
                {
                    if (ExceptionCount.ContainsKey(element))
                    {
                        ExceptionCount[element]--;
                    }
                    else
                    {
                        ExceptionCount.Add(element, -1);
                    }
                }

                if (ExceptionCount[element] <= 0)
                {
                    HideAdorner(element);
                }
                else
                {
                    ShowAdorner(element, e.Error.ErrorContent.ToString());
                }

                int TotalExceptionCount = 0;
                foreach (KeyValuePair<UIElement, int> kvp in ExceptionCount)
                {
                    TotalExceptionCount += kvp.Value;
                }

                handler.IsValid = (TotalExceptionCount <= 0);//ViewModel里面的IsValid
            }
            catch (Exception ex)
            {
                throw ex;
            }
        }

        /// <summary>
        /// 获得行为所在窗口的DataContext
        /// </summary>
        private NotificationObject GetValidationExceptionHandler()
        {
            if (this.AssociatedObject.DataContext is NotificationObject)
            {
                var handler = this.AssociatedObject.DataContext as NotificationObject;

                return handler;
            }

            return null;
        }

        /// <summary>
        /// 显示错误信息提示
        /// </summary>
        private void ShowAdorner(UIElement element, string errorMessage)
        {
            if (AdornerDict.ContainsKey(element))
            {
                AdornerDict[element].ChangeToolTip(errorMessage);
            }
            else
            {
                var adornerLayer = AdornerLayer.GetAdornerLayer(element);
                NotifyAdorner adorner = new NotifyAdorner(element, errorMessage);
                adornerLayer.Add(adorner);
                AdornerDict.Add(element, adorner);
            }
        }

        /// <summary>
        /// 隐藏错误信息提示
        /// </summary>
        private void HideAdorner(UIElement element)
        {
            if (AdornerDict.ContainsKey(element))
            {
                var adornerLayer = AdornerLayer.GetAdornerLayer(element);
                adornerLayer.Remove(AdornerDict[element]);
                AdornerDict.Remove(element);
            }
        }
    }
}

这里异常的处理方式是显示我们最开始戴图的叹号图形。这个图形由NotifyAdnoner完成显示：

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Media;
using System.Windows.Media.Imaging;

namespace LoginDemo.ViewModel.Common
{
    /// <summary>
    /// 带有感叹号的提示图形
    /// </summary>
    public class NotifyAdorner : Adorner
    {
        private VisualCollection _visuals;
        private Canvas _canvas;
        private Image _image;
        private TextBlock _toolTip;

        public NotifyAdorner(UIElement adornedElement, string errorMessage) : base(adornedElement)
        {
            _visuals = new VisualCollection(this);

            _image = new Image()
            {
                Width = 16,
                Height = 16,
                Source = new BitmapImage(new Uri("/warning.png", UriKind.RelativeOrAbsolute))
            };

            _toolTip = new TextBlock() { Text = errorMessage };
            _image.ToolTip = _toolTip;

            _canvas = new Canvas();
            _canvas.Children.Add(_image);
            _visuals.Add(_canvas);
        }

        protected override int VisualChildrenCount
        {
            get
            {
                return _visuals.Count;
            }
        }

        protected override Visual GetVisualChild(int index)
        {
            return _visuals[index];
        }

        public void ChangeToolTip(string errorMessage)
        {
            _toolTip.Text = errorMessage;
        }

        protected override Size MeasureOverride(Size constraint)
        {
            return base.MeasureOverride(constraint);
        }

        protected override Size ArrangeOverride(Size finalSize)
        {
            _canvas.Arrange(new Rect(finalSize));
            _image.Margin = new Thickness(finalSize.Width + 3, 0, 0, 0);

            return base.ArrangeOverride(finalSize);
        }
    }
}

我们的ViewModel也要对数据验证做出支持。由于我们先前让ViewModel继承了NotificationObject，它并不是一个接口，我们不能继承两个类。所以，我们在NotificationObject里面加入验证有内容（虽然这样不太好）。

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
using System.Linq;

namespace LoginDemo.ViewModel.Common
{
    public abstract class NotificationObject : INotifyPropertyChanged, IDataErrorInfo
    {
        #region 属性修改通知

        public event PropertyChangedEventHandler PropertyChanged;

        /// <summary>
        /// 发起通知
        /// </summary>
        /// <param name="propertyName">属性名</param>
        public void RaisePropertyChanged(string propertyName)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }

        #endregion

        #region 数据验证

        public string Error
        {
            get { return ""; }
        }

        public string this[string columnName]
        {
            get
            {
                var vc = new ValidationContext(this, null, null);
                vc.MemberName = columnName;
                var res = new List<ValidationResult>();
                var result = Validator.TryValidateProperty(this.GetType().GetProperty(columnName).GetValue(this, null), vc, res);
                if (res.Count > 0)
                {
                    return string.Join(Environment.NewLine, res.Select(r => r.ErrorMessage).ToArray());
                }
                return string.Empty;
            }
        }

        /// <summary>
        /// 页面中是否所有控制数据验证正确
        /// </summary>
        public virtual bool IsValid { get; set; }

        #endregion
    }
}

至此，准备就绪。我们修改ViewModel里面的UserName和Password属性：

/// <summary>
/// 用户名
/// </summary>
[NotEmptyCheck]
[UserNameExists]
public string UserName
{
    get
    {
        return obj.UserName;
    }
    set
    {
        obj.UserName = value;
        this.RaisePropertyChanged("UserName");
    }
}

/// <summary>
/// 密码
/// </summary>
[NotEmptyCheck]
public string Password
{
    get
    {
        return obj.Password;
    }
    set
    {
        obj.Password = value;
        this.RaisePropertyChanged("Password");
    }
}

没错，就是加了头上中括号的内容。这样的话，UserName就被要求非空和包含abc，而密码则被要求非空。由于我们在NotificationObject里加入了IsValid虚属性，还必须实现一下：

/// <summary>
/// 数据填写正确
/// </summary>
public override bool IsValid
{
    get
    {
        return obj.IsValid;
    }
    set
    {
        if (value == obj.IsValid)
        {
            return;
        }
        obj.IsValid = value;
        this.RaisePropertyChanged("IsValid");
    }
}

这个IsValid的设置是在ValidationExceptionBehavior里完成的。登录按钮只要绑定这个属性，就能在出现验证异常时，变成禁用。

我们修改XAML文件的用户名、密码和登录按钮：

<TextBox Grid.Row="0" Grid.Column="1" Margin="5" Text="{Binding UserName,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged, ValidatesOnExceptions=True, ValidatesOnDataErrors=True, NotifyOnValidationError=True}"/>

<PasswordBox Grid.Row="1" Grid.Column="1" Margin="5" c:PasswordBoxHelper.Password="{Binding Password,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged,ValidatesOnExceptions=True,ValidatesOnDataErrors=True,NotifyOnValidationError=True}">
    <i:Interaction.Behaviors>
        <c:PasswordBoxBehavior/>
    </i:Interaction.Behaviors>
</PasswordBox>

<Button Grid.Row="3" Grid.ColumnSpan="2" Content="登录" Width="200" Height="30" IsEnabled="{Binding IsValid}">
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="Click">
            <c:EventCommand Command="{Binding LoginClick}"/>
        </i:EventTrigger>
    </i:Interaction.Triggers>
</Button>

窗口刚打开的时候是这样的，登录按钮被禁用：

当数据都输入正确，登录按钮被启用：

至此，登录窗口的所有功能就介绍完了。也恭喜你，你已经能熟练地使用MVVM模式了。

猜你喜欢

转载自www.cnblogs.com/lonelyxmas/p/10681212.html
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
让自己的头脑极度开放
CentOS 6.5(x64) 和Redhat6.5操作系误删libc
高可用注册中心
【日记】12.28/【题解】AtCoder AGC041
XML（5）_XML 约束_DTD
Java集合Map（四）
树梅派安装桌面环境教程
pipenv 的 使用和安装
小程序白屏问题和内存研究
C语言简单选择排序
每日归档
更多
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022