基于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