基于WPF的UI设计模式研究
2016-08-16陈广山
陈广山
(辽宁对外经贸学院，辽宁 大连 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
private void ShowSchoolData(object obj)
{ School. SchoolName = "辽宁对外经贸学院"; } }
在此基础上，定义DelegateCommand类，并实现ICommand接口；然后将该接口的命令DelegateCommand赋值给Button的Command属性，以实现Button与命令的绑定。
2.3.3 Model层的实现。
Model的作用是封装与业务逻辑相关的数据，以及数据的处理方法，它的权利可以对数据进行直接访问。Model不依赖于View和ViewModel，也就是说，不必关心如何被显示或被操作，也不能包含任何与UI相关的逻辑。
Model功能实现方法的关键是实现INotifyPropertyChanged接口，目的是把UI上的变化实时通知到ViewModel层。
public class School : INotifyPropertyChanged
{private string schoolname;
public string schoolname
{get{return schoolname;}
set { schoolname = value;
NotifyPropertyChanged("schoolname ");} }
public event PropertyChangedEventHandler PropertyChanged;
public void NotifyPropertyChanged(string propertyName)
{if (PropertyChanged != null)
{PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); } }
3 结束语
采用MVVM数据驱动模式的设计，可以很好地配合WPF的数据绑定机制实现UI灵活设计。这种模式下数据的变化系统能够自动通知UI进行变更，可以大大降低UI与后端逻辑代码间的依赖关系。UI的更换也非常便捷，只需要修改少量的代码即可，有的甚至无需修改，使系统开发的效率大大提高，易于维护，用户的体验也更加丰富。MVVM模式虽然很好，因为该模式的搭建需要相当的时间，所以规模较小的系统开发并不建议使用。
[1]刘立. MVVM模式分析与应用[J].微型电脑应用，2012, 28(12): 57-60.
[2]明日科技.C#项目案例分析[M].北京:清华大学出版社，2012.
[3]李龙澍,华骁飞. Silverlight 下的 MVVM 模式的应用[J].计算机技术与发展，2013(12)：203-207.
[4]张建奇,李墨翰,郑伟. 基于WPF的工厂物流管理系统界面设计[J].自动化技术与应用，2011(12)：17-21.
[5]蒲哲,朱名日. 基于WPF MVVM的甘蔗种植管理系统[J].计算机与现代化，2014(2)：110-117.
Class No.:TP3Document Mark：A
(责任编辑：蔡雪岚)
Research of UI Design Pattern Based on WPF
Chen Guangshan
(Liaoning University of International Business and economics，Dalian，Liaoning 116052，China)
In the UI design , with the programming language, the interaction between UI and data is driven by the message processing mechanism of event,. Since the coupling degree is high between data and UI, the design is not conducive to the software maintenance. The traditional design model of UI is modified based on WPF into which the concept of data driven is introduced based on event-driven pattern. MVVM is based on the WPF under XMAL and Data Binding technology which made a separation between the code and UI. The design is beneficial to the cooperation of UI designers and programmers and the experiences of users as well.
UI; WPF; MVVM; data driven; binding
A
陈广山，硕士，教授，辽宁对外经贸学院信息管理系。研究方向：计算机网络应用。
辽宁对外经贸学院创新团队“互联网背景下的图形用户界面设计研究”。
1672-6758(2016)08-0032-4
TP3
