侯天峰， 张志伟， 葛陆蔚

(南京大学金陵学院 信息科学与工程学院，南京 210089)

基于WPF的图片浏览器设计与实现

侯天峰， 张志伟， 葛陆蔚

(南京大学金陵学院 信息科学与工程学院，南京 210089)

对WPF框架及其所提供的技术和方法进行了研究和探讨，设计并实现一个图片浏览及处理系统。采用用户界面与逻辑代码分离的开发框架，运用WPF提供的新特性，较好地满足用户对图片的放大、缩小、翻页和漫游等浏览需求，并支持基本图像处理操作。相较于Windows系统自带的图片浏览器具有更好的用户体验和处理效果。

WPF； XAML； C#； 图片浏览器； 图像处理

0 引言

近年随着硬件的急速发展，各大技术厂商为了满足用户不断提高的视觉和体验需求，纷纷提出新的更为先进的图形解决方案，如WPF(Windows Presentation Foundation)，XUL、Flash/Flex、Bindows、Apollo等。这当中WPF是微软公司在Windows Vista之后引入的全新图形子系统，由于其采用全新的显示驱动模型，可提供更为震撼的视觉体验，并且能利用GPU进行已购处理[1]。

考虑到WPF作为下一代用户界面技术所具有的特点和优势，本文以WPF为基础，通过引入统一的编程模型，运用WPF提供的新控件，实现视觉丰富的效果和优异体验，用户可以使用基本的图片浏览功能，并支持局部模糊、浮雕化、底片化、黑白化、撕裂化等图像处理操作。在此基础上，将WPF与原来的GDI+图形系统进行比较，通过实验分析指出WPF作为下一代技术的优越之处。

1 WPF简介及技术优势

具有灵活、易扩展的动画机制。目前图形系统开发面临选择很多不同技术工具的困扰，而WPF提供了与所有服务(如USER32界面、DirectShow媒体、2D/3D图形等)交互的单一模型，使开发人员能够用相同的构造来方便地实现数据绑定和样式设置，至于是面向文本、2D抑或3D则无需考虑。

声明性编程。WPF引入基于XML的语言的XAML，从而使其方便地进行UI 定义和构建工作。XAML主要用于界面可视化控件的定义和描述，会解析成.cs或.vb文件，最后将编译为CLR中间运行语言。可以使用任何一种.Net编程语言(如C#，VB等)进行开发[2]。

简易的部署。WPF提供两种部署方式，支持独立的应用程序和基于Web浏览器的插件程序，而且Web 浏览器应用还可以借助本地客户端硬件资源，通过使用3D和媒体服务，从而获得极其丰富的体验。独立应用可以通过MSI或ClickOnce技术实现在本地安装。

在Windows Vista中，虽然WPF和GDI、GDI+两种技术都存在，但WPF所有的提交都不依赖于GDI和GDI+，而是Direct3D，而且所有的Primitive都是通过Direct3D的本地接口实现的。图1描述了WPF核心组件架构[3]。

WPF支持的功能丰富，集成了过去的图形、多媒体、文档等处理，为相应系统的开发提供统一的编程模型。开发人员不再需要去关注媒体、文档内部处理的区别，做到了将开发人员与处理细节真正地隔离开来[3]。其最重要特色是矢量图的强有力支持功能，比如自定义路径、矩形、位图等2D绘图；文字显示的增强，XPS和消锯齿；3D控件；支持浮点值的像素表示以及高精度的(ARGB)颜色等。

图1 WPF架构图

2 图片浏览器的设计与实现

2.1 总体开发方案及系统架构

开发环境为Visual Studio 2013 + Microsoft .NET Framework 4.5，编程语言为C#。浏览器系统业务逻辑和用户界面相分离，使用VS集成集成开发环境开发用户界面和定义控件，运用WPF支持的控件新特性以及双精度、独立于分辨率的像素寻址技术，实现图片浏览器程序框架以及简洁美观的用户界面，并将其生成为XAML资源文件。最后在VS2013中导入相关的资源文件，与业务逻辑代码结合，从而完成整个程序的实现，系统总体架构，如图2所示。

图2 图片浏览器总体架构

2.2 UI设计与开发

2.2.1 UI风格设计与控件布局设计

系统采用扁平化的UI设计理念，程序整体界面，如图3所示。

图3 缩略图模式

将软件功能简单直接地展示出来，避免用户操作繁琐，减少新系统产生认知障碍[4]。

本文基于武汉轨道交通商务区站深基坑逆作法工程，利用有限元分析探讨了该工程支撑方案选型，针对逆作法施工挖土时间较长以及施工组织较为复杂等问题，提出更为优化的方案。

主界面中缩略图的尺寸可通过上方滑动条方便地改变，以实现更自由的个性化设置。在主界面缩略图列表中双击图片，可以进入大图查看模式，如图4所示。

图4 大图查看模式

使用到WPF提供的五种布局面板：Canvas、DockPanel、StackPanel、Grid和WrapPanel。灵活的布局方式使得软件可以自适应不同大小、分辨率的显示屏。

界面的左下角显示图片的文件名和文件序号，中下方按钮用于上一张/下一站翻阅，右下角为功能选择按钮，依次为自动播放、放大、缩小、旋转、黑白化、浮雕化、底片化和撕裂化。所有按钮均采用定制的Button控件，设计使用扁平化的图片作为按钮背景，恰当的关联图案及丰富的色彩既可以让用户直观地选择多种功能来浏览图片，也不会让程序整体显得单调古板。

2.2.2 UI实现代码

用XAML可以非常简单地以声明方式定义一个UI的行为的许多属性，如下代码前后翻页按钮的实现，如图5所示。

图5 翻页按钮实现代码

Button控件的Style属性设置了按钮的风格，Click属性用于设置按钮的点击事件处理程序。两个Button被放在StackPanel布局面板中，StackPanel标签设置了内容水平居中的布局方式，这样一来，无论程序窗口大小如何改变，这两个按钮始终以水平排列的方式处于中央位置。

由以上所示的简单的按钮实现代码可见，XAML所采用的声明式编程方法极大地减轻了UI实现的复杂度，方便程序员把精力集中在逻辑代码和控件交互的设计上。

如下代码则是右箭头的Style实现，如图6所示。

WPF Style提供一个非常有用的机制：开发人员不需要逐个地编写和绘制界面控件，设计者可以在独立于程序结构和行为的情况下来，来设计程序外观。本文图片浏览器系统基于统一的风格，针对字体、背景、控件外形和框架显示分别制定Style文件，从而更加美观地展现整个程序界面。此步骤与控件外观的开发同样是基于WPF Style机制，步骤相似，既可以通过微软Expression Blend可视化开发环境创建所需外观，也可以通过手动编写XAML文档来实现，此XAML文档将提交作为资源。

图6 右箭头的Style实现

另外为了增强交互性，开发人员还需要使用触发器和故事板。触发器用以识别系统一系列已经定义的状态，例如IsMouseCaptured。触发器易可识别某个特定对象的属性变化情况从而触发相应的事件。UI设计者通过触发器就能简便地指定事件与其动作的联系，不必实现复杂的后台代码。本系统中为了使交互功能更为强大，关键控件均添加了触发器。

2.3 业务逻辑设计与实现

本设计中，以C#编写的.cs文件作为逻辑层，负责处理不同的控件事件和自定义事件。

2.3.1 基本事件处理

为了给用户带来更好的使用体验，本设计支持鼠标和键盘两种操作模式。对应基本的鼠标单击事件、鼠标拖动事件、鼠标滚轮事件和键盘敲击事件，暂不支持触摸操作模式。

本设计的事件处理主要是响应用户对不同功能的按钮的点击，执行相应的图像处理算法。

2.3.2 图像处理功能

由于本设计主要用于图片浏览，所有并未加入太多复杂的图像处理功能。所实现的功能，如黑白化、浮雕效果、局部模糊效果、底片化效果均无需复杂的算法即可实现，可满足用户日常基本图像处理需求[5]。使用Bitmap类提供的GetPixel和SetPixel方法对像素点的RGB值进行处理。不同处理功能的效果展示，如图7所示。

3 清晰度对比实验

通过实验发现windows系统自带的图片浏览器放大图片时锯齿较为严重，特别是大倍率放大。针对这一失真问题，本系统与windows系统自带的图片浏览器进行了多组实验对比，选择了其中一组进行比较,如图8所示。

同一张图片放大相同倍数后，从对比图中可以看出，windows照片查看器显示的图片精度明显不及本设计实现的图片浏览器的。由此可见WPF对图像细节的处理能力也是符合要求的，更够带来更好的视觉效果。

4 总结

WPF技术不仅是图形引擎，其优秀的架构、统一的 UI 平台提供了一种全新的开发模式，将给Windows应用程序开发带来一次质的飞跃，开发人员和设计人员可以同步紧密地合作。本设计较好地满足了用户图片浏览及处理的需求，相较于系统自带软件具有一定的交互及效果上的优势。另外在设计与实现过程中，也充分感受到了使用WPF所带来的便利与高效。后续工作将关注于利用GPU对各项图像处理功能进行优化。

(a) 原始图像

(b) 底片化

(c) 浮雕化

(d) 撕裂化

(e) 局部模糊 图7 图像基本处理功能

图8 图像基本处理功能 左：Windows图片查看器，右：WPF图片浏览器

[1] 李成刚,冯静,凌玲.基于WPF的交互式绘图系统的开发[J].微型机与应用.2011, 30(6):50-52.

[2] Chris Sells, Ian Griffiths. Programming Windows Presentation Foundation[M]. America:O'Reilly Media,2006:45-51,101-120.

[3] 赖仪灵.WPF全景体验[J].程序员,2007,3(3):98-101.

[4] 陆原.浅谈界面设计中的“扁平化”现象[J].南京艺术学院学报(美术与设计版).2014(6):213-216.

[5] 任超,冯勇建.EmguCV图像处理库在WPF中的应用[J].计算机应用与软件.2013, 30(5):233-235.

Implementation and Design of Picture Viewer Based on WPF

Hou Tianfeng, Zhang Zhiwei, Ge Luwei

(School of Information Science and Engineering,Nanjing University Jinling College,Nanjing 210089,China)

This paper studies and discusses the WPF framework and the technologies, designs and implements a picture browsing and processing system. By using the development framework with user interface and logic codes separated from each other, the system can better meet user’s requirements of picture zooming, roaming and browsing with the new features of WPF, and support basic image processing operations. It has a better user experience and processing effects compared to Windows system’s own picture browser.

WPF; XAML; C#; Picture Viewer; Image Processing

侯天峰(1985-)，男，讲师，硕士，研究方向：图像重建、图像增强、软件工程等。 张志伟(1988-)，男，工程师，硕士，研究方向：嵌入式系统、无线网络、云计算。 葛陆蔚(1995-)，男，本科，研究方向：计算机科学与技术。

1007-757X(2017)04-0053-03

TP311

A

2016.05.12)