WPF:MVVM的由來與屬性繫結的過程
1、MVVM
(1)MVVM是什麼?
MVVM(Model-View-ViewModel)是一種軟體架構設計模式MVVM模式。有助於分離應用程式的業務邏輯和使用者介面層,使得開發過程更易於管理,同時也便於單元測試。
![image-20240821184048203](https://img2023.cnblogs.com/blog/3267782/202408/3267782-20240821184052777-1402057767.png)
Model?
現實世界中物件的抽象結果。
View?
View=UI。
View Model?
ViewModel=Model for View。
View 與 View Model之間的溝通:傳遞資料:資料屬性 傳遞操作:命令屬性。
(2)為什麼要使用MVVM?
- 可測試性:由於業務邏輯被封裝在ViewModel中,這使得編寫單元測試變得更容易。
- 解耦:View和Model之間透過ViewModel間接通訊,使得它們彼此獨立,易於單獨修改和維護。
- 可維護性:清晰的分層結構使得程式碼更易於理解和維護。
2、資料繫結
現在我們做一個實驗,實現一個簡單的加法,透過MVVM去實現。
![image-20240821185036615](https://img2023.cnblogs.com/blog/3267782/202408/3267782-20240821185037615-289624595.png)
從圖中可以看出,有3個資料屬性和2個命令屬性。
先建立好各層資料夾如下:
對於資料屬性,我們先建立一個NotificationObject類,去繼承INotifyPropertyChanged這個介面,這個介面用來是實現UI與資料屬性之間雙向繫結的。
![image-20240821190221001](https://img2023.cnblogs.com/blog/3267782/202408/3267782-20240821190222246-1622044677.png)
對於命令屬性,我們先建立一個DelegateCommand類,繼承ICommand這個介面。
![image-20240821190910144](https://img2023.cnblogs.com/blog/3267782/202408/3267782-20240821190911631-378596340.png)
ViewModel裡面的程式碼如下:
![image-20240821191133811](https://img2023.cnblogs.com/blog/3267782/202408/3267782-20240821191135030-495080663.png)
結果如下:
3、分析
如何執行資料屬性呢?(ViewModel與View之間雙向互動)
資料繫結的過程,INotifyPropertyChanged裡面介面是用來幹嘛的?
當我們在UI層裡面輸入1時(此時對應的值已經傳到了Input1了),這個時候會執行屬性對應的Set裡面的方法
然後執行方法裡面的事件,將這個屬性名字傳遞到UI,然後UI繫結的對應的屬性就隨之改變
也就是說:Input1和Inpu2我們只是透過UI去傳值,所以我們並不需要去執行RaisePropertyChanged這個方法。於是,當我註釋掉裡面的RaisePropertyChanged方法時,經過除錯與實驗,依然可以顯示結果。這個過程是從View到ViewModel的過程。
再來說Input3,這個為什麼不可以去掉RaisePropertyChanged這個方法呢?因為當我們去執行命令後,Input3在ViewModel裡面的值進行了改變,然後透過事件觸發通知UI,傳遞給相對應的屬性名字,這樣UI層的值就改變了。這個過程是View Model到View的過程。
如何執行命令屬性呢?(View到ViewModel)
我們知道,在MainWindow裡面我們需要將xaml的上下文與View Model繫結
然而在建立的ViewModel物件裡面,就執行了這個命令屬性嗎?
於是,經過除錯,我發現在new完後並沒有去觸發委託裡面的Add方法,這是為什麼呢?
在初始化階段,AddCommand
被建立並設定好執行的動作(即Add
方法),但這並不意味著Add
方法被立即執行。只有當使用者與UI進行互動時(比如點選按鈕),AddCommand
才會被觸發,從而執行Add
方法。
這裡注意,命令屬性的繫結方法:
資料屬性的繫結方法,比如文中的TextBox: