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

檀木雨林 2019-12-14

我们究竟要做一个怎样的东西呢?直接上图:

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

这看起来比较简单,但把这个登录窗口做完,MVVM的入门就基本完成了。(为什么登录界面要选择性别这么奇怪?无非是因为RadioButton的绑定也是一个课题)

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

首先,这个窗口只是一个项目众多窗口中的其中一个。为简单起见,我们把项目文件安排如下:

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

我们新建了一个ViewModel文件夹,里面按View的内容分文件夹,然后每个文件夹里面包含了Model类和ViewModel类。同时,ViewModel文件夹里有一个Common文件夹,存放一些ViewModel需要共用的类。当然,如果读者有更好的想法,完全没必要按这个模式去做。

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

中文名类型英文名
用户名stringUserName
密码stringPassword
性别intGender
窗口初始化View->ViewModelWndInit
登录事件View->ViewModelLoginClick
关闭行为ViewModel->ViewToClose
打开新窗口ViewModel->ViewOpenWnd

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

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

现在,我们可以开始开发Model层了。Model层的代码如下:

  1. namespace LoginDemo.ViewModel.Login
  2. {
  3. /// <summary>
  4. /// 登录窗口Model
  5. /// </summary>
  6. public class LoginModel
  7. {
  8. /// <summary>
  9. /// 用户名
  10. /// </summary>
  11. public string UserName { get; set; }
  12.  
  13. /// <summary>
  14. /// 密码
  15. /// </summary>
  16. public string Password { get; set; }
  17.  
  18. /// <summary>
  19. /// 性别
  20. /// </summary>
  21. public int Gender { get; set; }
  22. }
  23. }

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

相关推荐