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

原文: WPF MVVM从入门到精通2：实现一个登陆窗口

 

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

 

咱们究竟要作一个怎样的东西呢？直接上图：

这看起来比较简单，但把这个登陆窗口作完，MVVM的入门就基本完成了。（为何登陆界面要选择性别这么奇怪？无非是由于RadioButton的绑定也是一个课题）

不少教程都是举一个小例子，让人刚开始接触的时候不知道如何在项目中使用。我这里从一个项目的开发角度简单说说。

首先，这个窗口只是一个项目众多窗口中的其中一个。为简单起见，咱们把项目文件安排以下：

咱们新建了一个ViewModel文件夹，里面按View的内容分文件夹，而后每一个文件夹里面包含了Model类和ViewModel类。同时，ViewModel文件夹里有一个Common文件夹，存放一些ViewModel须要共用的类。固然，若是读者有更好的想法，彻底不必按这个模式去作。

项目开始，咱们不急着写代码，而是研究一下，在View里面都包含了哪些数据。我列了一个表格：

中文名	类型	英文名
用户名	string	UserName
密码	string	Password
性别	int	Gender
窗口初始化	View->ViewModel	WndInit
登陆事件	View->ViewModel	LoginClick
关闭行为	ViewModel->View	ToClose
打开新窗口	ViewModel->View	OpenWnd

前三项是显而易见的，后面四项可能咱们并不认为是一种数据。但在MVVM模式下，狭义的数据、事件、行为都变成了能够绑定的一种元素，也能够说是数据。

咱们在前面提过，View和ViewModel改变状态时，都是经过相似广播的方式去作的。它们不会传递对象，而只会传递一个名称。因此，为了可让程序员和美工分头行事，在命名方面，咱们应该一开始就固定下来。

如今，咱们能够开始开发Model层了。Model层的代码以下：

namespace LoginDemo.ViewModel.Login
{
    /// <summary>
    /// 登陆窗口Model
    /// </summary>
    public class LoginModel
    {
        /// <summary>
        /// 用户名
        /// </summary>
        public string UserName { get; set; }

        /// <summary>
        /// 密码
        /// </summary>
        public string Password { get; set; }

        /// <summary>
        /// 性别
        /// </summary>
        public int Gender { get; set; }
    }
}

Model层的代码就是这样，很是单纯，也没有什么新的知识。虽然咱们后面会实现各类交互的逻辑，但Model层的代码已经不会改变了。