iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 3
1
自我挑戰組

C# 碰 ECG,生醫能迸出什麼花火?系列 第 3

慢慢地讓ECG來MVVM?!

MVVM是什麼呢? MVVM是一種設計模式。

它可以達到甚麼目的呢? 遵循MVVM設計模式,讓你的系統程式碼較容易維護與 reusability !?

參考以下文章先了解一下MVVM這個設計模式 ... (我也仍是一知半解...)

  1. WPF MVVM架構
  2. MVVM VS MVC:透過 MVVM 設計模式重構 MVC 應用程式 減低應用程式的複雜性
  3. VIPER 和 MVVM 到底有什麼區別

糊塗的我就先把昨天的程式碼重構(Refactoring)一下,轉換成 MVVM 的樣子!?

  1. 最簡單的先在專案底下新增 3 個資料夾吧! 分別為
    • Models
      
    • ViewModels
      
    • Views
      

https://ithelp.ithome.com.tw/upload/images/20181003/20092103RJ8LWpqaIE.png

  1. 在Models資料夾中新增一個Class,這裡取名為Paper.cs
    https://ithelp.ithome.com.tw/upload/images/20181003/20092103qcrDRGqGpl.png

  2. 在Paper的類別裡新增兩個屬性,分別為

    • smallBlock
      
    • bigBlock
      

https://ithelp.ithome.com.tw/upload/images/20181003/20092103cYFuAhTLvI.png

  1. 在ViewModels資料夾中新增一個Class,這裡取名為PaperViewModel.cs
    https://ithelp.ithome.com.tw/upload/images/20181003/200921039M73ABDOs6.png

  2. 接下來PaperViewModel.cs裡的Code撰寫,參考前面網站邏輯而寫的 (WPF MVVM架構
    https://ithelp.ithome.com.tw/upload/images/20181003/200921039aUShih99U.png
    https://ithelp.ithome.com.tw/upload/images/20181003/20092103mhHEMr0H90.png
    https://ithelp.ithome.com.tw/upload/images/20181003/20092103Es3BzIrcN7.png
    https://ithelp.ithome.com.tw/upload/images/20181003/20092103rJeGSajROH.png

  3. 最後 View的部分,把預設的MainWindow.xaml移動到資料夾Views底下吧!
    https://ithelp.ithome.com.tw/upload/images/20181003/20092103D1CksCCVJx.png
    https://ithelp.ithome.com.tw/upload/images/20181003/20092103K1q5dGbMQ0.png

摁... 感覺還是沒有領悟 MVVM的精神以及 ECG 啊...

(沉思...)

今天程式碼是 branch : dayThree


上一篇
畫心電圖紙?!
下一篇
UI 質感 UP !?
系列文
C# 碰 ECG,生醫能迸出什麼花火?9

尚未有邦友留言

立即登入留言