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層的代碼已經不會改變了。