基于WPF的圖片瀏覽器設計與實現(xiàn)

侯天峰， 張志偉， 葛陸蔚

(南京大學金陵學院 信息科學與工程學院，南京 210089)

基于WPF的圖片瀏覽器設計與實現(xiàn)

侯天峰， 張志偉， 葛陸蔚

(南京大學金陵學院 信息科學與工程學院，南京 210089)

對WPF框架及其所提供的技術和方法進行了研究和探討，設計并實現(xiàn)一個圖片瀏覽及處理系統(tǒng)。采用用戶界面與邏輯代碼分離的開發(fā)框架，運用WPF提供的新特性，較好地滿足用戶對圖片的放大、縮小、翻頁和漫游等瀏覽需求，并支持基本圖像處理操作。相較于Windows系統(tǒng)自帶的圖片瀏覽器具有更好的用戶體驗和處理效果。

WPF； XAML； C#； 圖片瀏覽器； 圖像處理

0 引言

近年隨著硬件的急速發(fā)展，各大技術廠商為了滿足用戶不斷提高的視覺和體驗需求，紛紛提出新的更為先進的圖形解決方案，如WPF(Windows Presentation Foundation)，XUL、Flash/Flex、Bindows、Apollo等。這當中WPF是微軟公司在Windows Vista之后引入的全新圖形子系統(tǒng)，由于其采用全新的顯示驅動模型，可提供更為震撼的視覺體驗，并且能利用GPU進行已購處理[1]。

考慮到WPF作為下一代用戶界面技術所具有的特點和優(yōu)勢，本文以WPF為基礎，通過引入統(tǒng)一的編程模型，運用WPF提供的新控件，實現(xiàn)視覺豐富的效果和優(yōu)異體驗，用戶可以使用基本的圖片瀏覽功能，并支持局部模糊、浮雕化、底片化、黑白化、撕裂化等圖像處理操作。在此基礎上，將WPF與原來的GDI+圖形系統(tǒng)進行比較，通過實驗分析指出WPF作為下一代技術的優(yōu)越之處。

1 WPF簡介及技術優(yōu)勢

具有靈活、易擴展的動畫機制。目前圖形系統(tǒng)開發(fā)面臨選擇很多不同技術工具的困擾，而WPF提供了與所有服務(如USER32界面、DirectShow媒體、2D/3D圖形等)交互的單一模型，使開發(fā)人員能夠用相同的構造來方便地實現(xiàn)數(shù)據(jù)綁定和樣式設置，至于是面向文本、2D抑或3D則無需考慮。

聲明性編程。WPF引入基于XML的語言的XAML，從而使其方便地進行UI 定義和構建工作。XAML主要用于界面可視化控件的定義和描述，會解析成.cs或.vb文件，最后將編譯為CLR中間運行語言。可以使用任何一種.Net編程語言(如C#，VB等)進行開發(fā)[2]。

簡易的部署。WPF提供兩種部署方式，支持獨立的應用程序和基于Web瀏覽器的插件程序，而且Web 瀏覽器應用還可以借助本地客戶端硬件資源，通過使用3D和媒體服務，從而獲得極其豐富的體驗。獨立應用可以通過MSI或ClickOnce技術實現(xiàn)在本地安裝。

在Windows Vista中，雖然WPF和GDI、GDI+兩種技術都存在，但WPF所有的提交都不依賴于GDI和GDI+，而是Direct3D，而且所有的Primitive都是通過Direct3D的本地接口實現(xiàn)的。圖1描述了WPF核心組件架構[3]。

WPF支持的功能豐富，集成了過去的圖形、多媒體、文檔等處理，為相應系統(tǒng)的開發(fā)提供統(tǒng)一的編程模型。開發(fā)人員不再需要去關注媒體、文檔內部處理的區(qū)別，做到了將開發(fā)人員與處理細節(jié)真正地隔離開來[3]。其最重要特色是矢量圖的強有力支持功能，比如自定義路徑、矩形、位圖等2D繪圖；文字顯示的增強，XPS和消鋸齒；3D控件；支持浮點值的像素表示以及高精度的(ARGB)顏色等。

圖1 WPF架構圖

2 圖片瀏覽器的設計與實現(xiàn)

2.1 總體開發(fā)方案及系統(tǒng)架構

開發(fā)環(huán)境為Visual Studio 2013 + Microsoft .NET Framework 4.5，編程語言為C#。瀏覽器系統(tǒng)業(yè)務邏輯和用戶界面相分離，使用VS集成集成開發(fā)環(huán)境開發(fā)用戶界面和定義控件，運用WPF支持的控件新特性以及雙精度、獨立于分辨率的像素尋址技術，實現(xiàn)圖片瀏覽器程序框架以及簡潔美觀的用戶界面，并將其生成為XAML資源文件。最后在VS2013中導入相關的資源文件，與業(yè)務邏輯代碼結合，從而完成整個程序的實現(xiàn)，系統(tǒng)總體架構，如圖2所示。

圖2 圖片瀏覽器總體架構

2.2 UI設計與開發(fā)

2.2.1 UI風格設計與控件布局設計

系統(tǒng)采用扁平化的UI設計理念，程序整體界面，如圖3所示。

圖3 縮略圖模式

將軟件功能簡單直接地展示出來，避免用戶操作繁瑣，減少新系統(tǒng)產生認知障礙[4]。

本文基于武漢軌道交通商務區(qū)站深基坑逆作法工程，利用有限元分析探討了該工程支撐方案選型，針對逆作法施工挖土時間較長以及施工組織較為復雜等問題，提出更為優(yōu)化的方案。

主界面中縮略圖的尺寸可通過上方滑動條方便地改變，以實現(xiàn)更自由的個性化設置。在主界面縮略圖列表中雙擊圖片，可以進入大圖查看模式，如圖4所示。

圖4 大圖查看模式

使用到WPF提供的五種布局面板：Canvas、DockPanel、StackPanel、Grid和WrapPanel。靈活的布局方式使得軟件可以自適應不同大小、分辨率的顯示屏。

界面的左下角顯示圖片的文件名和文件序號，中下方按鈕用于上一張/下一站翻閱，右下角為功能選擇按鈕，依次為自動播放、放大、縮小、旋轉、黑白化、浮雕化、底片化和撕裂化。所有按鈕均采用定制的Button控件，設計使用扁平化的圖片作為按鈕背景，恰當?shù)年P聯(lián)圖案及豐富的色彩既可以讓用戶直觀地選擇多種功能來瀏覽圖片，也不會讓程序整體顯得單調古板。

2.2.2 UI實現(xiàn)代碼

用XAML可以非常簡單地以聲明方式定義一個UI的行為的許多屬性，如下代碼前后翻頁按鈕的實現(xiàn)，如圖5所示。

圖5 翻頁按鈕實現(xiàn)代碼

Button控件的Style屬性設置了按鈕的風格，Click屬性用于設置按鈕的點擊事件處理程序。兩個Button被放在StackPanel布局面板中，StackPanel標簽設置了內容水平居中的布局方式，這樣一來，無論程序窗口大小如何改變，這兩個按鈕始終以水平排列的方式處于中央位置。

由以上所示的簡單的按鈕實現(xiàn)代碼可見，XAML所采用的聲明式編程方法極大地減輕了UI實現(xiàn)的復雜度，方便程序員把精力集中在邏輯代碼和控件交互的設計上。

如下代碼則是右箭頭的Style實現(xiàn)，如圖6所示。

WPF Style提供一個非常有用的機制：開發(fā)人員不需要逐個地編寫和繪制界面控件，設計者可以在獨立于程序結構和行為的情況下來，來設計程序外觀。本文圖片瀏覽器系統(tǒng)基于統(tǒng)一的風格，針對字體、背景、控件外形和框架顯示分別制定Style文件，從而更加美觀地展現(xiàn)整個程序界面。此步驟與控件外觀的開發(fā)同樣是基于WPF Style機制，步驟相似，既可以通過微軟Expression Blend可視化開發(fā)環(huán)境創(chuàng)建所需外觀，也可以通過手動編寫XAML文檔來實現(xiàn)，此XAML文檔將提交作為資源。

圖6 右箭頭的Style實現(xiàn)

另外為了增強交互性，開發(fā)人員還需要使用觸發(fā)器和故事板。觸發(fā)器用以識別系統(tǒng)一系列已經定義的狀態(tài)，例如IsMouseCaptured。觸發(fā)器易可識別某個特定對象的屬性變化情況從而觸發(fā)相應的事件。UI設計者通過觸發(fā)器就能簡便地指定事件與其動作的聯(lián)系，不必實現(xiàn)復雜的后臺代碼。本系統(tǒng)中為了使交互功能更為強大，關鍵控件均添加了觸發(fā)器。

2.3 業(yè)務邏輯設計與實現(xiàn)

本設計中，以C#編寫的.cs文件作為邏輯層，負責處理不同的控件事件和自定義事件。

2.3.1 基本事件處理

為了給用戶帶來更好的使用體驗，本設計支持鼠標和鍵盤兩種操作模式。對應基本的鼠標單擊事件、鼠標拖動事件、鼠標滾輪事件和鍵盤敲擊事件，暫不支持觸摸操作模式。

本設計的事件處理主要是響應用戶對不同功能的按鈕的點擊，執(zhí)行相應的圖像處理算法。

2.3.2 圖像處理功能

由于本設計主要用于圖片瀏覽，所有并未加入太多復雜的圖像處理功能。所實現(xiàn)的功能，如黑白化、浮雕效果、局部模糊效果、底片化效果均無需復雜的算法即可實現(xiàn)，可滿足用戶日常基本圖像處理需求[5]。使用Bitmap類提供的GetPixel和SetPixel方法對像素點的RGB值進行處理。不同處理功能的效果展示，如圖7所示。

3 清晰度對比實驗

通過實驗發(fā)現(xiàn)windows系統(tǒng)自帶的圖片瀏覽器放大圖片時鋸齒較為嚴重，特別是大倍率放大。針對這一失真問題，本系統(tǒng)與windows系統(tǒng)自帶的圖片瀏覽器進行了多組實驗對比，選擇了其中一組進行比較,如圖8所示。

同一張圖片放大相同倍數(shù)后，從對比圖中可以看出，windows照片查看器顯示的圖片精度明顯不及本設計實現(xiàn)的圖片瀏覽器的。由此可見WPF對圖像細節(jié)的處理能力也是符合要求的，更夠帶來更好的視覺效果。

4 總結

WPF技術不僅是圖形引擎，其優(yōu)秀的架構、統(tǒng)一的 UI 平臺提供了一種全新的開發(fā)模式，將給Windows應用程序開發(fā)帶來一次質的飛躍，開發(fā)人員和設計人員可以同步緊密地合作。本設計較好地滿足了用戶圖片瀏覽及處理的需求，相較于系統(tǒng)自帶軟件具有一定的交互及效果上的優(yōu)勢。另外在設計與實現(xiàn)過程中，也充分感受到了使用WPF所帶來的便利與高效。后續(xù)工作將關注于利用GPU對各項圖像處理功能進行優(yōu)化。

(a) 原始圖像

(b) 底片化

(c) 浮雕化

(d) 撕裂化

(e) 局部模糊 圖7 圖像基本處理功能

圖8 圖像基本處理功能 左：Windows圖片查看器，右：WPF圖片瀏覽器

[1] 李成剛,馮靜,凌玲.基于WPF的交互式繪圖系統(tǒng)的開發(fā)[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] 陸原.淺談界面設計中的“扁平化”現(xiàn)象[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-)，男，工程師，碩士，研究方向：嵌入式系統(tǒng)、無線網(wǎng)絡、云計算。 葛陸蔚(1995-)，男，本科，研究方向：計算機科學與技術。

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

TP311

A

2016.05.12)