跳到主要內容

使用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頁面的轉換

標籤：

留言

張貼留言

這個網誌中的熱門文章

[解決方法] docker: permission denied

前言 當我們執行docker 指令時若出現以下錯誤訊息 docker: Got permission denied while trying to connect to the Docker daemon socket at unix:///var/run/docker.sock: Post http://%2Fvar%2Frun%2Fdocker.sock/v1.26/containers/create: dial unix /var/run/docker.sock: connect: permission denied. See 'docker run --help'. 表示目前的使用者身分沒有權限去存取docker engine, 因為docker的服務基本上都是以root的身分在執行的, 所以在指令前加sudo就能成功執行指令 但每次實行docker指令(就連docker ps)都還要加sudo實在有點麻煩, 正確的解法是 我們可以把目前使用者加到docker群組裡面, 當docker service 起來時, 會以這個群組的成員來初始化相關服務 sudo groupadd docker sudo usermod -aG docker $USER 需要退出重新登錄後才會生效 Workaround 因為問題是出在權限不足, 如果以上方法都不管用的話, 可以手動修改權限來解決這個問題 sudo chmod 777 /var/run/docker.sock https://docs.docker.com/install/linux/linux-postinstall/
張貼留言
閱讀完整內容

[C#] Visual Studio, 如何在10分鐘內快速更改命名專案名稱

前言: 由於工作需要, 而且懶得再重寫類似的專案, 所以常常將之前寫的專案複製一份加料後, 再重新命名編譯 假設今天我有一個專案HolyUWP, 我想把它重新命名成 BestUWP 時該怎麼做? 以下是幾個簡單的的步驟 使用Visual Studio 2017 備份原來專案 更改Solution名稱 更改Assembly name, Default namespce 更改每支程式碼的Namespace 更改專案資料夾名稱 備份原來專案 由於怕改壞掉, 所以在改之前先備份 更改Solution名稱 更改sln的名稱, 這邊我改成BestUWP.sln 使用Visual Studio打開你的.sln, 右鍵點擊Solution後選擇Rename, 這邊我把它重新命名成BestUWP(跟檔案名稱一致) 必要的話可以順便修改Porject名稱 更改Assembly name, Default namespce 進入 Project > OOXX Properties    修改Assembly Name, Default namesapce 更改每支程式碼的Namespace 基本上隨便挑一支有用到預設Namesapce(HolyUWP)的程式碼來改就好了 重新命名後點擊Apply,  這個動作做完後所有用到舊Namespace的程式碼都會被改成新的 更改專案資料夾名稱 以上動作做完後, 基本上就可以把專案編譯出來測看看了~
2 則留言
閱讀完整內容

[解決方法] mac 作業系統上無法使用 docker

  錯誤訊息 Cannot connect to the Docker daemon at unix:///var/run/docker.sock. Is the docker daemon running? 原因 因為 docker 的設計是走 client-server 的架構,  如果少裝了 server 的部分就會出現以上的錯誤訊息 解決方法 因為 docker daemon 需要使用 linux kernel 上的某些功能, 所以若想要在 mac 的 OS X 上使用 docker 必須額外起一台 linux VM 給 docker daemon 用  Step 1. 安裝 virtual box $ brew install virtualbox --cask   Step 2. 安裝 docker machine $ brew install docker-machine --cask   Step 3. 設定 使用 docker-machine 建立 VM 跑容器 $docker-machine create --driver virtualbox default $docker-machine restart   輸出環境變數 $docker-machine env default 如果執行以上的指令出現錯誤訊息 Error checking TLS connection: ...  可以執行以下指令重新產生憑證 $docker-machine regenerate-certs 最後套用環境變數, 讓 docker 知道要怎麼去跟這台 VM 溝通  $eval $(docker-machine env default)   測試 若做完以上的步驟沒噴錯誤訊息的話, 可以跑個 hello-world 看看 docker daemon 有沒有起來 $docker run hello-world Unable to find image 'hello-world:latest' locally latest: Pulling from library/hello-world 0e03bdcc26d7: Pull complete Digest: sha256:95ddb6c31407e84e91a986b004aee40975cb0
張貼留言
閱讀完整內容