基于WPF的UI設(shè)計(jì)模式研究

陳廣山

(遼寧對外經(jīng)貿(mào)學(xué)院，遼寧 大連　116052)

?

基于WPF的UI設(shè)計(jì)模式研究

陳廣山

(遼寧對外經(jīng)貿(mào)學(xué)院，遼寧 大連116052)

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

UI；WPF；MVVM；數(shù)據(jù)驅(qū)動(dòng)；綁定

0　引言

UI(User Interface，用戶界面)設(shè)計(jì)是指對軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。軟件產(chǎn)品UI的設(shè)計(jì)過程通常包括：圖形設(shè)計(jì)，即產(chǎn)品的外觀設(shè)計(jì)；交互設(shè)計(jì)，即操作流程、操作規(guī)范等項(xiàng)目的設(shè)計(jì)；測試，即測試交互設(shè)計(jì)的合理性及圖形設(shè)計(jì)的美觀性?；赪indows的GUI(Graphical User Interface)開發(fā)大致經(jīng)歷了API、封裝、組件化和WPF時(shí)代，每一個(gè)時(shí)代的變遷都使開發(fā)效率和質(zhì)量產(chǎn)生飛躍。

近年來，基于組件化的開發(fā)技術(shù)一直是UI設(shè)計(jì)的主流，其中，NET體系中的WinForm可以看成是其中的典型代表。組件化的特點(diǎn)是消息被封裝成事件，系統(tǒng)按照消息的方式進(jìn)行處理，UI被事件驅(qū)動(dòng)，事件由用戶或者系統(tǒng)觸發(fā)，程序開發(fā)者需要在事件中編寫相應(yīng)的代碼。事件驅(qū)動(dòng)由“事件——訂閱——事件處理器”關(guān)系交織在一起構(gòu)成程序，這種機(jī)制很容易導(dǎo)致UI邏輯和業(yè)務(wù)邏輯糾纏在一起，代碼復(fù)雜難懂，UI邏輯難以測試和維護(hù)。

1　WPF技術(shù)

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

1.1 WPF。

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

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

1.2數(shù)據(jù)驅(qū)動(dòng)。

傳統(tǒng)的UI都是由Windows消息通過事件傳遞給應(yīng)用程序，程序的事件由用戶的相應(yīng)操作激發(fā)，事件發(fā)生以后事件處理器就會(huì)執(zhí)行，程序就在事件的驅(qū)動(dòng)下完成特定的功能，并把處理好后的數(shù)據(jù)呈現(xiàn)在UI上。在這個(gè)過程中，事件驅(qū)動(dòng)的數(shù)據(jù)是靜態(tài)和被動(dòng)的，UI控件是主動(dòng)的，UI邏輯和業(yè)務(wù)邏輯之間的橋梁是事件。

而基于WPF的UI設(shè)計(jì)數(shù)據(jù)是核心，數(shù)據(jù)發(fā)生的改變會(huì)主動(dòng)通知UI控件，推動(dòng)控件呈現(xiàn)最新的數(shù)據(jù)。在數(shù)據(jù)驅(qū)動(dòng)理念里，數(shù)據(jù)是主動(dòng)的，而UI從屬于數(shù)據(jù)，被動(dòng)地表示數(shù)據(jù)，當(dāng)數(shù)據(jù)發(fā)生改變后，與該數(shù)據(jù)相關(guān)的UI元素也會(huì)做出相應(yīng)的改變。

1.3綁定。

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

2 基于WFP的UI設(shè)計(jì)

2.1 MVVM模式。

MVVM(Model-View-ViewModel)模式是微軟提出的開發(fā)模式，MVVM將數(shù)據(jù)層、業(yè)務(wù)邏輯層以及表現(xiàn)層區(qū)分開來。它充分利用WPF中的XAML和Data Binding的功能，能夠最大程度地把業(yè)務(wù)邏輯與UI分離開，使代碼結(jié)構(gòu)更加清晰，易于閱性，非常方便測試、維護(hù)、擴(kuò)展和改進(jìn)。對于程序開發(fā)人員與UI設(shè)計(jì)人員來說，因?yàn)镸VVM解耦了View和ViewModel，所以，程序開發(fā)人員只要重點(diǎn)關(guān)注ViewModel 類的創(chuàng)建，UI設(shè)計(jì)人員則只需專注于View的創(chuàng)建就行了。如圖2.1所示為MVVM體系結(jié)構(gòu)。

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

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

2.2 MVVM模式的主要特點(diǎn)。

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

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

(3)獨(dú)立開發(fā)性：頁面設(shè)計(jì)者只需專注于頁面的設(shè)計(jì)，程序員則只需關(guān)注數(shù)據(jù)和業(yè)務(wù)邏輯的開發(fā)。

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

圖2.1　MVVM模式體系結(jié)構(gòu)圖

2.3基于MVVM的UI設(shè)計(jì)分析。

在MVVM的模式中，因?yàn)閂iew能夠綁定到ViewModel，并向它請求一個(gè)動(dòng)作；ViewModel與Model交互，通知它用更新來響應(yīng)UI的變化，使得UI的構(gòu)建非常容易。以如圖2.2所示的通常UI設(shè)計(jì)過程為例，功能是單擊“顯示校名”按鈕，在文本框中顯示學(xué)校的名稱。

2.3.1View層的實(shí)現(xiàn)。

View的主要功能是界面的構(gòu)建，并通過DataContext和ViewModel進(jìn)行數(shù)據(jù)綁定，通過綁定Behavior/Command來調(diào)用ViewModel的方法。Command通過ICommand接口實(shí)現(xiàn)綁定的功能，使View觸發(fā)相應(yīng)的事件，讓ViewModel處理對應(yīng)的事件完成事件的功能。

圖2.2　UI圖例

UI前端的設(shè)計(jì)使用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#實(shí)現(xiàn)的關(guān)鍵代碼如下所示，主要功能是通過DataContext與SchoolViewModel()類進(jìn)行數(shù)據(jù)綁定。

public partial class MainWindow : Window

{public MainWindow()

{ InitializeComponent();

this.DataContext = new SchoolViewModel();} }

DataContext屬性定義在基類FrameworkElement中，所有WPF控件都具備這個(gè)屬性，WPF中的UI控件是一個(gè)樹型結(jié)構(gòu)，當(dāng)一個(gè)Binding只知道路徑而不知道數(shù)據(jù)源時(shí)，它會(huì)逐層向UI控件樹的根部查找，每路過一個(gè)節(jié)點(diǎn)，就查找其DataContext有沒有Path所指定的屬性，如果有，就把這個(gè)對象作為自己的源。

2.3.2 ViewModel層的實(shí)現(xiàn)。

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

本例中ViewModel功能通過類SchoolViewModel實(shí)現(xiàn),關(guān)鍵代碼如下：

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