WPF:MVVM的由來與屬性繫結的過程

追忆呢發表於2024-08-21

WPF:MVVM的由來與屬性繫結的過程

1、MVVM

(1)MVVM是什麼?

​ MVVM(Model-View-ViewModel)是一種軟體架構設計模式MVVM模式。有助於分離應用程式的業務邏輯和使用者介面層,使得開發過程更易於管理,同時也便於單元測試。

image-20240821184048203

Model?

現實世界中物件的抽象結果。

View?

View=UI。

View Model?

ViewModel=Model for View。

View 與 View Model之間的溝通:傳遞資料:資料屬性 傳遞操作:命令屬性

(2)為什麼要使用MVVM?

  • 可測試性:由於業務邏輯被封裝在ViewModel中,這使得編寫單元測試變得更容易。
  • 解耦:View和Model之間透過ViewModel間接通訊,使得它們彼此獨立,易於單獨修改和維護。
  • 可維護性:清晰的分層結構使得程式碼更易於理解和維護。

2、資料繫結

現在我們做一個實驗,實現一個簡單的加法,透過MVVM去實現。

image-20240821185036615

從圖中可以看出,有3個資料屬性和2個命令屬性。

先建立好各層資料夾如下:

image-20240821185305645

對於資料屬性,我們先建立一個NotificationObject類,去繼承INotifyPropertyChanged這個介面,這個介面用來是實現UI與資料屬性之間雙向繫結的

image-20240821190221001

對於命令屬性,我們先建立一個DelegateCommand類,繼承ICommand這個介面。

image-20240821190910144

ViewModel裡面的程式碼如下:

image-20240821191133811

結果如下:

image-20240821191259007

3、分析

如何執行資料屬性呢?(ViewModel與View之間雙向互動)

資料繫結的過程,INotifyPropertyChanged裡面介面是用來幹嘛的?

當我們在UI層裡面輸入1時(此時對應的值已經傳到了Input1了),這個時候會執行屬性對應的Set裡面的方法

image-20240821191524420

然後執行方法裡面的事件,將這個屬性名字傳遞到UI,然後UI繫結的對應的屬性就隨之改變

image-20240821191735106

也就是說:Input1和Inpu2我們只是透過UI去傳值,所以我們並不需要去執行RaisePropertyChanged這個方法。於是,當我註釋掉裡面的RaisePropertyChanged方法時,經過除錯與實驗,依然可以顯示結果。這個過程是從View到ViewModel的過程。

再來說Input3,這個為什麼不可以去掉RaisePropertyChanged這個方法呢?因為當我們去執行命令後,Input3在ViewModel裡面的值進行了改變,然後透過事件觸發通知UI,傳遞給相對應的屬性名字,這樣UI層的值就改變了。這個過程是View Model到View的過程。

如何執行命令屬性呢?(View到ViewModel)

我們知道,在MainWindow裡面我們需要將xaml的上下文與View Model繫結

image-20240821193016065

然而在建立的ViewModel物件裡面,就執行了這個命令屬性嗎?

image-20240821193148101

於是,經過除錯,我發現在new完後並沒有去觸發委託裡面的Add方法,這是為什麼呢?

在初始化階段,AddCommand被建立並設定好執行的動作(即Add方法),但這並不意味著Add方法被立即執行。只有當使用者與UI進行互動時(比如點選按鈕),AddCommand才會被觸發,從而執行Add方法。
這裡注意,命令屬性的繫結方法:

image-20240821193627815

資料屬性的繫結方法,比如文中的TextBox:

image-20240821193719987

相關文章