WPF MVVM 模式下的弹窗
一、总体展示
首先看看用户控件在设计页面的大致效果:
中间部分自然就是确认弹框了,由标题、内容、确认按钮、取消按钮、倒计时、关闭按钮组成,指定了大小范围:
外层还有个 Grid,没有指定大小,所以使用时会铺满容器,再配上带透明度的背景色,可以当作蒙版,避免用户继续操作后面的界面,达到模态弹窗的效果:
确认弹框,手动关闭、点击取消按钮、超时关闭这三种情况下会输出相关信息(需传入记录信息的委托方法),点击确认按钮则可以继续执行业务方法。
还有一种是信息弹框,区别是不用于执行业务方法,也不输出信息 (操作结果),只是用于提示用户,且默认标题和默认超时时间不同(可修改):
二、用户控件前端
新建 WPF 用户控件后,贴入以下代码:
就是简单做了下布局和样式,然后做了数据绑定和命令绑定,我们移步到后台来看。
三、用户控件后台
由于使用了 MVVM 模式,所以页面的后台代码中没多少内容:
/// <summary> /// [dlgcy] WPF MVVM 确认弹框; /// </summary> public partial class UC_ConfirmBox : UserControl { public UC_ConfirmBox () { InitializeComponent (); } /// <summary> /// 绑定 VM 中的 IsShowDialog /// </summary> public bool IsShowDialog { get { return (bool) GetValue (IsShowDialogProperty); } set { SetValue (IsShowDialogProperty, value); } } public static readonly DependencyProperty IsShowDialogProperty = DependencyProperty.Register ("IsShowDialog", typeof (bool), typeof (UC_ConfirmBox), new PropertyMetadata (false, (obj, args) => { if (args.NewValue is bool newValue) { try { var control = obj as UC_ConfirmBox; control.Visibility = newValue ? Visibility.Visible : Visibility.Collapsed; } catch (Exception ex) { Console.WriteLine (ex.ToString ()); MessageBox.Show ($"{ex.Message}"); } } })); }
建了个依赖属性,用于使用用户控件时绑定。这个是绑定 ViewModel 中的同名属性 IsShowDialog 的(是否显示弹窗),实际上,不用这个依赖属性而直接用 Visibility 绑定 IsShowDialog(ViewModel 中的),然后加上相关转换器也可以,但那样对用户不太友好,所以这里直接在依赖属性中进行 Visibility 的判断。(关于依赖属性的使用可以看本人之前的文章《WPF 用户控件的自定义依赖属性在 MVVM 模式下的使用备忘》)。
然后注意一点,这里并没有直接将 DataContext 关联 ViewModel,而是要在使用用户控件时再绑定(大家觉得我做得对吗),这个后面还会说到。
四、用户控件对应的 ViewModel
这里代码比较多,就不贴出来了,最后会给出代码托管地址。ViewModel 整体结构如下:
ConfirmBoxViewModel 上有个特性 AddINotifyPropertyChangedInterface,这个是一个第三方的包 PropertyChanged.Fody 提供的,加上之后,类的公共自动属性就具有了属性变动通知功能。那么为什么还要继承 BindableBase (实现了 InotifyPropertyChanged 的基类,参考《WPF 原生绑定和命令功能使用指南》)呢? 原因是,如果在属性的 get/set 中做了一些操作的话,Fody 对该属性好像就不起作用了,所以补救一下。
(1) 弹框时阻塞业务流程
先来看看 “成员” 部分:
有个线程同步对象 AutoResetEvent,缺省设置为阻塞线程,由上图可见,在弹框隐藏时会取消阻塞,那么阻塞的时机自然就是弹框显示后:
上图显示的确认框帮助类的 “弹出确认框” 方法中,由于是使用异步调用,所以阻塞不会影响 UI 线程。阻塞方法可以指定超时时间,超时或者用户没有点击确认按钮则直接返回,否则,则执行传入的委托方法,即实际的业务方法。
另一个 “弹出消息框” 方法则相较简单,只是简单阻塞了一段 “消息框超时时间”:
(2) 倒计时
上一小节开头处给出的” 成员图” 中,还有一个定时器类型对象 _timer,就是用于倒计时功能的。计时器在弹窗弹出时开始启动,代码位于 IsShowDialog 属性的 Set 方法中(见” 成员图”)。
计时器的执行方法在构造函数中绑定,执行方法内部,每隔一秒(声明时设定)将剩余时间减 1,减为 0 时停止,并执行关闭命令。此处和弹窗阻塞超时那里可能有功能冗余,当然,从另一方面来说,也可以看作是双重保险。
(3) 其它
“Bindable” 区域中剩余的属性都没有做特殊处理。
命令的使用可以参考前文提到的文章,命令的处理逻辑则比较简单,就是设置是否显示和是否确认:
五、使用
使用时,引入用户控件命名空间之后,将其与主界面平级摆放,实际就是覆盖在主界面上方,然后设置其 Visibility 属性为 “Collapsed”,不可见也不占用空间,避免影响主界面的开发:
IsShowDialog=”{Binding IsShowDialog}” 也是固定这样设置即可,用于配合 DataContext 控制显示隐藏,而 DataContext 则是绑定了主页面 ViewModel 中相关的用户控件的 ViewModel 对象。
调用的时候要注意异步的问题,使用辅助类 ConfirmBoxHelper 中的两个方法即可:
给出文字版:
// 前台; <uc:UC_ConfirmBox DataContext="{Binding DialogVm}" Visibility="Collapsed" IsShowDialog="{Binding IsShowDialog}"></uc:UC_ConfirmBox> // ViewModel; public ConfirmBoxViewModel DialogVm { get; set; } = new ConfirmBoxViewModel (); // 使用; await ConfirmBoxHelper.ShowMessage (DialogVm, "操作前通知", 6); await ConfirmBoxHelper.ShowConfirm (DialogVm, "您确定要进行此操作吗?", () => { #region 业务方法 //。。。
#endregion }, ShowInfo); await ConfirmBoxHelper.ShowMessage (DialogVm, "操作后通知");
六、地址
这个是在 XMPP 通信 Demo 项目中写的,项目地址为:
https://gitee.com/dlgcy/XmppPractice
同步首发:
http://dlgcy.com/wpf-mvvm-confirm-dialog/