使用UWP 設計 MVVM 軟體架構(一)

前言:

什麼是MVVM? 簡單的說他是由 Model, ViewModel, 和View 所構成的軟體架構

1. Model, 指的是我們用來存放資料的類別, 除此之外, 商業邏輯也會被封裝在裡面, 他只負責處理跟資料有關的行為 
2. ViewModel, 作為整個架構的中間層, 負責提供View需要的資料
3. View, 架構中負責呈現介面的元件

會有這個概念, 一開始是為了避免View當中存在太多的商業邏輯使得程式碼變得很難trace 或是維護, 所以我們把關於資料實體的商業邏輯還有資訊都封裝在一個類別後抽出來成為一個Model.

然而這樣的程式碼還是不夠乾淨, 因為View 和  Model 之間的相依性, 會出現當Model一改View就要跟著改得情況, 所以最後我們在View和Model之間多了一層ViewModel的類別, 負責提供或轉換適當的資料給View, 以降低View和Model之間的相依性

以下是個簡單的範例, 說明如何在UWP的專案中設計出MVVM的軟體架構
這個範例是一個顯示電影清單的程式, 基本上有幾個步驟

1. 建立一個新專案
2. 設計Model,  我們會有個Movie類別, 來表示電影的名稱以及價錢
3. 設計ViewModel, 我們會有個 MovieViewModel的類別, 提供適當的 Movie 資料給View使用
4. 設計View, 我們會簡單的加入ListBox來呈現電影清單, 以及一個Button來刪除畫面上的所有電影

第一步：建立專案

選擇C#>Windows Universal>Blank App

第二步：設計Model

• 首先建立Models的資料夾
• 之後在裡面建立一個新類別Movie

• 繼承並實作介面INotifyPropertyChanged, 如下

• 建立資料夾Data, 之後再這個資料夾裡面建立一個FakeDatabase的類別

• 這是一個假的資料庫用來提供電影資料給ViewModel, 實際上我們是把資料寫在外部的XML中

第三步, 建立 ViewModel

• 建立一個ViewModelBase的類別
• 用來作為所有ViewModel的基底並且繼承INotifyPropertyChanged

• 接下來, 我們建立MovieListViewModel負責處理View上的電影清單相關資料的呈現邏輯
• 建立ViewModelLocator負責提供所有ViewModel元件的實體並且在這邊把FakeDatabase注入到我們的ViewModel裡面

第四步, 設計View元件

• 先替MainPage改個比較直覺的名字, 我們在這裡把它改成MovieListView
• 修改App.xmal(註冊ViewModelLocator)
• 修改MovieListView, 將DataContext 設為MovieListViewModel, 並加入ListBox, Button等元件

完成以上的步驟後, 基本上MVVM的架構就出來了　　

DEMO.

使用UWP 設計 MVVM 軟體架構(二) 處理View頁面的轉換