淺談 MVP 與 MVVM 設計模式演進與 WPF 整合應用

WPF 引入 Binding、DependencyProperty、Command、Template 等新特性，催生 MVVM（Model-View-ViewModel）架構，乃 MVP（Model-View-Presenter）與 WPF 技術結合演進而來。

MVP 架構回顧

• Model：核心資料與業務邏輯（同 MVC 的 M）
• View：UI 介面（Aspx/WinForm/WPF 視窗）
• Presenter：處理 UI 事件、協調 Model 與 View（類 MVC Controller 但針對單一頁面）

關鍵點：引入 IView 介面解耦 UI 與邏輯，支援單元測試與多 UI 實現（Web/WinForm/WPF 共用 Presenter）。

WPF 技術特性驅動 MVVM 演進

• Binding：View 與 ViewModel 雙向同步，取代事件驅動
• DependencyProperty：屬性變更通知基礎
• Command：動作封裝，直接綁定至 ViewModel 方法
• DataTemplate/ControlTemplate：視覺化與邏輯完全分離

MVVM 架構

• View：純 XAML 定義，透過 Binding 連結 ViewModel
• ViewModel：專為 View 定制的模型，包含 UI 狀態、命令、驗證邏輯，實作 INotifyPropertyChanged
• Model：領域模型/資料存取，不感知 UI

核心差異：Presenter 操作 View（介面方法），ViewModel 提供屬性/命令供 View Binding（資料驅動）。

ViewModel 範例

public class FamilyTreeViewModel {
    public FamilyTreeViewModel(Person rootPerson) {
        _rootPerson = new PersonViewModel(rootPerson);
        _firstGeneration = new ReadOnlyCollection<PersonViewModel>(new[] { _rootPerson });
        _searchCommand = new SearchFamilyTreeCommand(this); // Command 封裝
    }
    // 屬性供 View Binding：_rootPerson, _firstGeneration, _searchCommand
}

架構演進脈絡

MVC (系統級) → MVP (頁面級，IView 解耦) → MVVM (WPF Binding/Command 整合, ViewModel 專屬模型)

參考：TreeView with ViewModel、Prism (Composite Application Guidance for WPF)。

優勢總結

• UI 與邏輯完全分離，設計師可用 Blend 獨立設計介面
• ViewModel 可獨立單元測試，無需 UI 執行環境
• Command 模式統一處理使用者互動，程式碼更清晰