基于WPF的UI設計模式研究

陳廣山

(遼寧對外經貿學院，遼寧 大連　116052)

?

基于WPF的UI設計模式研究

陳廣山

(遼寧對外經貿學院，遼寧 大連116052)

在使用編程語言設計UI的模式中，UI與數據的交互采用的是事件驅動的消息處理機制，數據與UI耦合度高，不利于UI的設計與軟件的后期維護。基于WPF的UI設計對傳統模式進行了改進，在事件驅動的基礎上引入了數據驅動的理念，讓數據重歸核心地位。MVVM是基于WPF技術的開發模式，它利用XMAL和DataBinding技術，使代碼和UI得到很好的分離，既有益于UI設計者與程序員的合作，又增加了用戶的體驗。

UI；WPF；MVVM；數據驅動；綁定

0　引言

UI(User Interface，用戶界面)設計是指對軟件的人機交互、操作邏輯、界面美觀的整體設計。軟件產品UI的設計過程通常包括：圖形設計，即產品的外觀設計；交互設計，即操作流程、操作規范等項目的設計；測試，即測試交互設計的合理性及圖形設計的美觀性。基于Windows的GUI(Graphical User Interface)開發大致經歷了API、封裝、組件化和WPF時代，每一個時代的變遷都使開發效率和質量產生飛躍。

近年來，基于組件化的開發技術一直是UI設計的主流，其中，NET體系中的WinForm可以看成是其中的典型代表。組件化的特點是消息被封裝成事件，系統按照消息的方式進行處理，UI被事件驅動，事件由用戶或者系統觸發，程序開發者需要在事件中編寫相應的代碼。事件驅動由“事件——訂閱——事件處理器”關系交織在一起構成程序，這種機制很容易導致UI邏輯和業務邏輯糾纏在一起，代碼復雜難懂，UI邏輯難以測試和維護。

1　WPF技術

隨著以手機為代表的移動信息產品的普及，UI設計的意義和作用越來越受到企業的重視。優秀的UI設計不僅能夠讓信息產品變得更有個性和品位，而且還能夠讓用戶的體驗變得更加舒適、簡單。相反，如果UI的設計模式不理想，代碼的管理就會變得非常困難，后期維護和改進的成本也會大大增加。如果開發人員進行調整，后繼者將不得不花費大量的時間和精力去研究和分析混亂的程序代碼。

1.1 WPF。

WPF(Windows Presentation Foundation)是微軟推出的基于Windows Vista的用戶界面框架。它提供了統一的編程模型、語言和框架，實現了UI邏輯和業務邏輯的分離。WPF主要由引擎和編程框架兩部分組成。WPF引擎統一了程序開發人員和UI設計人員的體驗文檔、媒體和UI的方式，應用程序不僅能夠充分利用計算機中現有圖形硬件的全部功能，而且還能夠利用硬件未來發展的潛能。WPF框架為媒體、UI設計和文檔提供的解決方案異常豐富，并充分考慮了可擴展性，程序開發人員完全可以在WPF引擎的基礎上創建自己的控件，還可以通過對現有WPF控件進行再分類來創建自己的控件。

基于WPF的UI設計可以使用專門的語言XAML(eXtensible Application Markup Language)，XAML是一種聲明性標記語言，它提供了易于理解的UI說明模式，能夠把UI設計從基礎代碼中分離出來。XAML工作流允許各方采用不同的工具處理應用程序的UI和業務邏輯，易于UI設計人員和程序開發人員的分工與合作。

1.2數據驅動。

傳統的UI都是由Windows消息通過事件傳遞給應用程序，程序的事件由用戶的相應操作激發，事件發生以后事件處理器就會執行，程序就在事件的驅動下完成特定的功能，并把處理好后的數據呈現在UI上。在這個過程中，事件驅動的數據是靜態和被動的，UI控件是主動的，UI邏輯和業務邏輯之間的橋梁是事件。

而基于WPF的UI設計數據是核心，數據發生的改變會主動通知UI控件，推動控件呈現最新的數據。在數據驅動理念里，數據是主動的，而UI從屬于數據，被動地表示數據，當數據發生改變后，與該數據相關的UI元素也會做出相應的改變。

1.3綁定。

程序的本質是數據和算法，數據會在存儲、邏輯和表示層流動，在WPF機制中，數據與表示層間(即UI)的橋梁是綁定(Binding)。一般情況下，Binding的源是邏輯層的對象，目標是UI層的控件對象，通過Binding，數據可以源源不斷地流向UI，并展示給用戶；被用戶修改過的數據也會自動從UI傳回邏輯層。有了Binding機制，能夠把UI元素與數據一一關聯，數據在邏輯層與UI間的流動就會直來直去，所有與業務邏輯相關的算法都處在邏輯層，UI部分幾乎不包括算法，完全依賴和從屬于邏輯層。

2 基于WFP的UI設計

2.1 MVVM模式。

MVVM(Model-View-ViewModel)模式是微軟提出的開發模式，MVVM將數據層、業務邏輯層以及表現層區分開來。它充分利用WPF中的XAML和Data Binding的功能，能夠最大程度地把業務邏輯與UI分離開，使代碼結構更加清晰，易于閱性，非常方便測試、維護、擴展和改進。對于程序開發人員與UI設計人員來說，因為MVVM解耦了View和ViewModel，所以，程序開發人員只要重點關注ViewModel 類的創建，UI設計人員則只需專注于View的創建就行了。如圖2.1所示為MVVM體系結構。

其中，View為視圖，其主要作用是定義UI。通常情況下，所有UI及其邏輯都在XAML中定義；ViewModel 為視圖模型，是用來存放顯示邏輯和狀態的類，它為視圖封裝了展示邏輯；Model為模型，用來存放業務邏輯和數據，業務邏輯定義了一系列規則，以實現代碼重用的最大化。

從圖2.1可知，用戶與View 進行交互，View 與ViewModel 通過數據和命令綁定的形式進行交互，ViewModel 與Model進行服務交互，Model也可以與其他提供服務的對象進行交互。

2.2 MVVM模式的主要特點。

(1)低耦合性：View可以獨立變化而不依賴于Model，一個ViewModel可以同時綁定到多個不同的View上，View的改變不一定引起Model的改變，同樣，Model變化View也無需隨之改變。

(2)可重用性：一個ViewModel中可以放置多個View邏輯，讓多個View重用該View邏輯。

(3)獨立開發性：頁面設計者只需專注于頁面的設計，程序員則只需關注數據和業務邏輯的開發。

(4)可測試性：UI測試歷來較難，有了MVVM模式，測試只需針對ViewModel來寫就可以了，因為UI和功能的耦合較松，所以功能的可測試性非常強。

圖2.1　MVVM模式體系結構圖

2.3基于MVVM的UI設計分析。

在MVVM的模式中，因為View能夠綁定到ViewModel，并向它請求一個動作；ViewModel與Model交互，通知它用更新來響應UI的變化，使得UI的構建非常容易。以如圖2.2所示的通常UI設計過程為例，功能是單擊“顯示校名”按鈕，在文本框中顯示學校的名稱。

2.3.1View層的實現。

View的主要功能是界面的構建，并通過DataContext和ViewModel進行數據綁定，通過綁定Behavior/Command來調用ViewModel的方法。Command通過ICommand接口實現綁定的功能，使View觸發相應的事件，讓ViewModel處理對應的事件完成事件的功能。

圖2.2　UI圖例

UI前端的設計使用XAML語言，主要代碼如下：

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="MainWindow" Height="350" Width="525">

UI后端C#實現的關鍵代碼如下所示，主要功能是通過DataContext與SchoolViewModel()類進行數據綁定。

public partial class MainWindow : Window

{public MainWindow()

{ InitializeComponent();

this.DataContext = new SchoolViewModel();} }

DataContext屬性定義在基類FrameworkElement中，所有WPF控件都具備這個屬性，WPF中的UI控件是一個樹型結構，當一個Binding只知道路徑而不知道數據源時，它會逐層向UI控件樹的根部查找，每路過一個節點，就查找其DataContext有沒有Path所指定的屬性，如果有，就把這個對象作為自己的源。

2.3.2 ViewModel層的實現。

ViewModel主要包括模型數據封裝和界面邏輯，它是View和Model的橋梁，是對Model的抽象。實現ViewModel先要實現Silverlight的接口INotifyPropertyChanged，該接口用于實現屬性和集合的Change Notifications，使在View上所做的操作都可以實時通知到ViewModel。

本例中ViewModel功能通過類SchoolViewModel實現,關鍵代碼如下：

public class SchoolViewModel

{ public DelegateCommand ShowCommand { get; set; }

public SchoolModel School { get; set; }

public SchoolViewModel()

{School = new SchoolModel();

ShowCommand=new DelegateCommand();

ShowCommand.ExecuteCommand = new Action