[MVVM] 初步認識 MVVM 設計模式

image_thumb

View：其實就是XAML檔，也就是使用者介面，使用者介面設計人員只需要在Blend中進行對它的編輯，並透過Binding來和ViewModel溝通(將DataContext指定為某個ViewModel，以更進一步的與其中的屬性進行Binding)。

ViewModel：顧名思義，ViewModel就是供View使用的Model，透過公開的屬性(public property)給View進行Binding，供其使用。

Model：用來描述資料實體(Entity)的簡單類別(Class)，也可以在這邊實作商業邏輯以及與資料庫溝通等資料存取相關的功能。

*注意：上圖中的箭頭是有意義的，上層的物件可以向下存取，但是下層的物件並不會知道上層的東西長什麼樣子，透過此原則，才得以做到乾淨的分層與鬆散藕合。

而這個設計模式能幫我們帶來什麼好處呢?

對程式設計人員(Developer)來說：

1. 程式的階層切分更為乾淨、簡潔

2. 相對減少透過程式進行與使用者介面的互動

3. 可以根據設計期/執行期決定不同的資料來源

4. 程式的撰寫可以完全的與使用者介面上的控制項脫鉤，不需再撰寫使用者控制項的Event Handler

5. 可以完全將設計的重心著重在資料流和商業邏輯，而不需要花費心思在使用者介面和流程

 

對使用者介面設計人員(Designer)來說：

1. 只需要將心思著重在使用者介面操作的流程使用者介面的呈現方式

2. 可以藉由程式設計人員提供的設計時期資料製作更接近現實的使用者介面

3. 更輕鬆的透過Binding、Behavior和Action就可以實作出整個使用者介面

4. 與控制項的互動一樣只需要透過Binding進行設定，不需要費心在Event Handler上

5. 更輕鬆的透過Blend就進行完所有使用者介面的設計，並輕鬆和程式進行結合

 

轉貼至 : http://www.dotblogs.com.tw/ouch1978/archive/2011/04/23/introducing-mvvm.aspx

留言

張貼留言

這個網誌中的熱門文章

WPF - 深入 Style

圖片
Style 用來在類型的不同實例之間共享屬性、資源和事件處理程序，您可以將 Style 看作是將一組屬性值應用到多個元素的捷徑。 　　這是MSDN上對Style的描述，翻譯的還算中規中矩。Style（樣式），簡單來說，就是一種對屬性值的批處理，類似于Html的CSS，可以快速的設置一系列屬性值到UI元素。   示例 　　一個最簡單的Style的例子： <Window> <Grid> <Grid.Resources> <Style TargetType="{x:Type Button}" x:Key="ButtonStyle"> <Setter Property="Height" Value="22"/> <Setter Property="Width" Value="60"/> </Style> </Grid.Resources> <Button Content="Button" Style="{StaticResource ButtonStyle}"/> <Button Content="Button" Style="{StaticResource ButtonStyle}" Margin="156,144,286,145" /> </Grid> </Window> 　　關于Resources的知識，請參見 MSDN ，這里創建了一個目標類型為Button的ButtonStyle，兩個Button使用靜態資源（ StaticResource ）的查找方式來找到這個Style。Style中定義了Button的高度（Height）和寬度（Width），當使用了這個Style后，兩個Button無需手動設置，即可自動設置...
閱讀完整內容

C# – M$ Chart Control 自定 ToolTip 的顯示

圖片
在使用 M$ Chart Control 來顯示 Chart 時, 一般的 Requirments 其 ToolTip 在顯示一般都為 X/Y Value，可是當有特別的資料需顯示時，那又該如何呢？在其 DataPoint Class 中提供一個SetCustomProperty Member 讓 User 可以設定其 Custom Property Value，那只需在 Series Class 中設定 ToolTipProperty 後，其 ToolTip 即可顯示 Custom Property. Series s = new Series(); s.Name = "SeriesName"; s.ChartType = SeriesChartType.Line; s.MarkerStyle = MarkerStyle.Circle; s.MarkerSize = 8; s.BorderWidth = 3; s.ToolTip = "Wafer Id: #AXISLABEL\n" + "Time: #CUSTOMPROPERTY(TIME) \n" + "Y Value: #VALY";
閱讀完整內容

Vue.js - 基礎介紹教學

今年的 iT邦幫忙鐵人賽中剛好就有位鐵人利用了 30 天的時間，天天一篇文章從頭到尾來介紹 vue.js 的基礎教學，這真的是太佛心來了，在此記錄一下也方便以後有需要的時候可以直接取得相關的訊息. vue & vuex 01 - Vue Introduction & 鐵人賽說明 vue & vuex 02 - 使用 Vue-cli 安裝 vue 和 webpack 環境與相關套件 vue & vuex 03 - Hello World & 雙向綁定 vue & vuex 04 - 使用 vue-router 建構 Single Page Application vue & vuex 05 - 攝氏轉換華氏工具 - I (computed) vue & vuex 06 - 攝氏轉換華氏工具 - II (v-if, v-show, methods) vue & vuex 07 - component - I (元件拆解，合併，靜態資料引用) vue & vuex 08 - component - II (v-for 小幫手解決重複元件) vue & vuex 09 - component - III (slot 在元件上鑽洞) vue & vuex 10 - 什麼是 vuex? vue & vuex 11 - 計數器 - I (vuex 職權與流程說明) vue & vuex 12 - 計數器 - II (action, mutation 傳遞資料) vue & vuex 13 - 經典 todo list - I (create, read) vue & vuex 14 - 經典 todo list - II (改變狀態與 delete) vue & vuex 15 - 經典 todo list - III (update) vue & vuex 16 - 自訂按鈕 custom checkbox ($emit, $on) vue & vuex 17 - 覺得 store 有點亂，動手拆成 modules 吧！ vue & vuex 18 - 開發小技巧 vue ...
閱讀完整內容