WPF MVVM框架(5)

前面幾章節所講到的內容, 基本上屬於前端XAML的使用方法, 那么本章及后面的章節, 則會側重於UI與業務分離如何分離 、 UI與業務邏輯之間的互操作性,, 下面將介紹WPF中, 比較主流的MVVM框架的引用與使用方法。

• 1.NuGet引用MVVM框架包
  
  • 引入該框架包之后, 默認會在目錄下創建ViewModel層的示例代碼
    
• 2.第二步, 通過在MainViewModel中創建一些業務代碼, 將其與MainWindow.xaml 通過上下文的方式關聯起來, 而MainWindow則是通過Binding的寫法 引用業務邏輯的部分。
  • 在MainViewModel中, 添加同一個班級名稱, 與學生列表, 分別用於顯示在文本 和列表上展示, Command則用於綁定DataGrid的雙擊命令上, 通過雙擊, 展示點擊行的學生信息:
    

MainViewModel 繼承了 ViewModelBase, 該繼承的父類實在MVVM框架中, 實現雙向通知的基類, 通過引用該類, 那么其之類的屬性則可通過 添加 RaisePropertyChanged() 即可。
- 為MainViewModel添加一些模擬數據

  -  設計UI層, 添加一個文本用於顯示班級名稱,  添加一個DataGrid 用於展示學生列表,  同時DataGrid中添加一個綁定的命令(紅色區域)

關於上面紅色圈的代碼, 為一種綁定語法, 主要在MouseBinding中, MouseAction 以為觸發的事件類型, CommandParameter 則是命令傳遞的參數, 也就是DataGrid選中的一行的類型 Student。
Command 則是MainViewModel中定義的Command
- 現在, 前端的綁定工作已經設置好, 后台的代碼也添加完成, 目前只需要將MainViewModel 與MainWindow 通過MainWindow的DataContext關聯即可

運行效果如下:

RaisePropertyChanged() 實現動態通知更新

+ 通過set訪問器更新ClassName的同時, 調用RaisePropertyChanged 方法, 界面刷新更新后的值

+ 添加一個無參數的UpdateCommand , 並設置為 UpdateText 手動把ClassName更新為 "高三三班":

+ UI層添加一個簡單按鈕, 綁定后台的UpdateCommand命令

運行測試效果:

本章測試代碼下載