數(shù)字媒體系統(tǒng)開發(fā)中基于WPF的行為的應(yīng)用

摘要：為了培養(yǎng)數(shù)字媒體專業(yè)的學(xué)生把專業(yè)知識(shí)技能與計(jì)算機(jī)應(yīng)用程序設(shè)計(jì)結(jié)合，在教學(xué)過程中引入了WPF程序設(shè)計(jì)。通過美工板上繪制形狀、路徑和控件，然后設(shè)置其屬性、動(dòng)畫和行為等，使學(xué)生輕松地設(shè)計(jì)出自己的應(yīng)用程序，有效地訓(xùn)練沒有編程知識(shí)的媒體專業(yè)的學(xué)生完成應(yīng)用程序的制作。文章試圖以介紹WPF行為的應(yīng)用，來展示不用編程完成應(yīng)用程序的設(shè)計(jì)與制作過程，達(dá)到學(xué)習(xí)WPF拋磚引玉的作用。

關(guān)鍵詞：WPF;行為;數(shù)字媒體;編程

中圖分類號(hào)：TP319 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1006-8228（2020）08-61 -04

0 引言

在計(jì)算機(jī)數(shù)字媒體專業(yè)，學(xué)生在大一及大二時(shí)，重點(diǎn)學(xué)習(xí)平面設(shè)計(jì)、視頻制作、動(dòng)畫設(shè)計(jì)等課程，但沒有開設(shè)專門的計(jì)算機(jī)程序設(shè)計(jì)課程，導(dǎo)致數(shù)字媒體專業(yè)的學(xué)生沒法利用所學(xué)的知識(shí)與技能開發(fā)出自己的應(yīng)用程序，如此便失去了計(jì)算機(jī)數(shù)字媒體專業(yè)的計(jì)算機(jī)專業(yè)的特色。如何把所學(xué)的平面設(shè)計(jì)、視頻制作、動(dòng)畫設(shè)計(jì)等合成一個(gè)有實(shí)用價(jià)值的應(yīng)用程序系統(tǒng)是當(dāng)前計(jì)算機(jī)數(shù)字媒體專業(yè)的一個(gè)急待解決的問題。

WPF（Windows Presentation Foundation，直譯為：窗口展示平臺(tái)）是微軟新一代矢量圖形系統(tǒng)，用于為不同用戶界面提供統(tǒng)一的顯示系統(tǒng)，使程序人員與美工人員明確分工，美工人員可以使用ExpressionStudio中套裝工具可視化的設(shè)計(jì)界面，程序人員僅負(fù)責(zé)數(shù)據(jù)處理，不再需要自己設(shè)計(jì)頁面。WPF有著靈活、易擴(kuò)展的動(dòng)畫機(jī)制，接口設(shè)計(jì)非常直觀，使開發(fā)工具能可視化編輯[5]。這樣的設(shè)計(jì)剛好符合計(jì)算機(jī)數(shù)字媒體專業(yè)的定位與需求，學(xué)生們可以在完全沒有編程基礎(chǔ)的條件下設(shè)計(jì)出高質(zhì)量的圖形/圖像界面，為今后更廣的就業(yè)打下基礎(chǔ)。

在這個(gè)“看臉”的時(shí)代，為提高界面設(shè)計(jì)效率與美觀，微軟開發(fā)了Expression Studio套裝工具可視化的設(shè)計(jì)界面中的Expression Blend，自Visual Studi02013以后全部集成安裝在開發(fā)系統(tǒng)中。所寫的目標(biāo)代碼適用于微軟支持的所有平臺(tái)，制作精美復(fù)雜的UI（用戶界面設(shè)計(jì)）再也無需編寫大量的程序代碼。

在Expression Blend中，通過美工板上繪制形狀、路徑和控件，再修改其外觀、動(dòng)畫和行為，能夠直觀地設(shè)計(jì)應(yīng)用程序。也可以通過導(dǎo)入圖像、視頻和聲音，只需修改其屬性就可以對(duì)項(xiàng)目對(duì)象進(jìn)行有效地控件，大大方便沒有程序設(shè)計(jì)基礎(chǔ)地制作人員。在近幾年的數(shù)字媒體專業(yè)教學(xué)過程中，利用這一軟件大大提高了學(xué)生開發(fā)基于windows平臺(tái)的數(shù)字媒體系統(tǒng)的效率。本文通過介紹Expressionblend中行為的應(yīng)用，展示不用編寫程序代碼或較少地編寫程序代碼，對(duì)數(shù)字媒體控制的方法。

1 Blend行為的設(shè)置

1.1 Blend工作區(qū)界面布局簡(jiǎn)介

Microsoft Expression Blend中的工作區(qū)包含所有可視界面元素。這些元素包括美工板、面板、“工具”面板、工作區(qū)配置、創(chuàng)作視圖和菜單[2]，如圖1所示。

1.2 Expression Blend內(nèi)置行為

Expression Blend中的行為是一些可重用的封裝代碼段，將這些代碼段拖動(dòng)到控件對(duì)象上后，僅通過更改其行為屬性進(jìn)行微調(diào)，不需要編寫任何代碼[4]，就可向應(yīng)用程序添加交互、動(dòng)畫等功能，設(shè)計(jì)出所需的應(yīng)用程序響應(yīng)的方式[6]。在Expression Blend中內(nèi)置的行為有十幾個(gè)，這里例舉幾個(gè)常見的內(nèi)置行為，見表1。

1.3 添加控件對(duì)象的行為

在Expression Blend中，添加應(yīng)用程序的交互性，只需從“資產(chǎn)”面板中將行為拖到應(yīng)用程序中的控件對(duì)象上，并設(shè)置該行為的屬性調(diào)整即可完成。

例如，想要用一個(gè)按鈕（ Button）對(duì)象來控制動(dòng)畫（ Storyboard）對(duì)象的播放、暫停、停止等，就可以將“控制故事面板（ ControIStoryboardAction）”行為拖到按鈕Button對(duì)象上，然后，在屬性面板中選擇播放（Play）、暫停（ Pause）、停止（Stop）（如圖2所示）。

在“控制故事面板（ ControIStoryboardAction）”行為可設(shè)置下列屬性。

（1）源名稱（ SourceName）屬性

設(shè)置控制動(dòng)畫播放的對(duì)象。如果將行為拖到Button對(duì)象上，可以將SourceName屬性設(shè)置為Button對(duì)象的名稱，默認(rèn)情況下，SourceName被設(shè)置為父對(duì)象（行為施加的對(duì)象）。

（2）事件名稱（EventName）屬性

此屬性設(shè)置觸發(fā)行為的事件名稱。本例中，Button對(duì)象的將按鈕按下（Click）事件來觸發(fā)行為的操作。

（3）控制面板選項(xiàng)（ ControIStoryboardOption）屬性

設(shè)置行為觸發(fā)的故事面板動(dòng)畫（ Storyboard）的操作，包括播放（ Play）、暫停（Pause）、停止（Stop）。

（4）故事面板（StoWBoard）屬性

設(shè)置單擊按鈕時(shí)播放的故事面板的對(duì)象的名稱。

以下通過實(shí)例進(jìn)一步說明在Expression Blend中行為的實(shí)際應(yīng)用。

2 行為應(yīng)用實(shí)例

2.1 音頻視頻的控制 一般來說，制作一個(gè)音視頻控制軟件需要編寫很多代碼來控制控件，下面的實(shí)例并不需要編寫代碼，就能完成對(duì)音視頻元素的控制[1]。即：當(dāng)點(diǎn)擊“播放”按鈕，音視頻播放;按下“暫?！币粢曨l暫停播放等。制作過程如下。

（1）直接從文件窗口中拖入一個(gè)音視頻文件作為故事面板動(dòng)畫播放或加入一個(gè)故事面板動(dòng)畫，并加入四個(gè)按鈕控件，分別為播放（btnplay）、暫停（btnpause）、繼續(xù)（btnresume）、停止（btnstop），如圖3所示。

（2）從“資產(chǎn)”一“行為”中找到“ControIStoryboar-dAction”行為拖入到按鈕btnplay（播放）下方（如圖4）。

（3）設(shè)置ControIStoryboardAction行為屬性如圖。

①觸發(fā)器屬性

TriggerType：事件觸發(fā)（ExentTrigger）

SouceObject：播放按鈕（btnplay）

EventName：事件名稱（Click）

②公共屬性

ControIStoryboardOption：控件故事面板選項(xiàng)（Play）

Storyboard：故事面板動(dòng)畫名稱（如圖5）。

（4）剩下的三個(gè)按鈕：暫停（btnpause）、繼續(xù)（btn-resume）、停止（btnstop），用同樣的方法加入Control-StoryboardAction行為修改其ControIStoryboardOption（控件故事面板選項(xiàng)）屬性設(shè)置成：Pause、Resume和Stop。然后運(yùn)行調(diào)試。按下播放按鈕開始播放影片，按其他按鈕可以控制音視頻的播放（如圖6所示）。

2.2 圖片大小的控制

在數(shù)字媒體展示時(shí)，能夠使用戶自己改變圖片的大小來適應(yīng)于自我觀看的設(shè)計(jì)也需要大量的技巧與程序代碼[3]，但下面利用行為，也是連一行代碼不需要編寫就能完成這一設(shè)計(jì)任務(wù)。

如圖7所示，當(dāng)點(diǎn)擊“圖片放大”按鈕時(shí)，圖片逐步放大;當(dāng)點(diǎn)擊“圖片縮小”時(shí)，圖片逐漸縮小。制作過程如下：

（1）在窗口中加入如圖8所示放置所需控件。

①一個(gè)Image控件，命名為：img01，寬、高都設(shè)置為200。

②二個(gè)按鈕控件，分別命名為：btnfangda（圖片放大）和btnsuoxiao（圖片縮?。?。

（2）在控件img01下加入三個(gè)ChangePropertyAction分別命名為：加邊距、加寬、加高，然后分別設(shè)置其屬性。

（3）“加邊距”屬性設(shè)置如圖9所示。

①觸發(fā)器類型（ TriggerType）為：EvertTrigger，源對(duì)象（ SourceObject）選擇為按鈕控件btnfagda，事件名稱（ Click）;

②公共屬性中：目標(biāo)對(duì)象（ TargetObject）為圖像文件img01，選擇增量（Increment）為可用，屬性名稱（PropertyName）選擇Margin（白邊），并把向右（→）、向下（↓）的值分別設(shè)置為5。

加寬、加高的行為除屬性名稱（ PropertyName）選擇為Withen（寬），值設(shè)置為5、Height（高）值設(shè)置為5外，其余與“加邊距”行為的屬性相同。

圖片縮小的方法與前面放大圖片的方法一致，只是把參數(shù)值由5改為-5。

運(yùn)行程序，當(dāng)點(diǎn)擊按鈕“圖片放大”時(shí)，圖片img01就會(huì)以5pt的增量放大。

3 結(jié)束語

通過幾年的教學(xué)實(shí)踐，在數(shù)字媒體專業(yè)采用WPF教授《數(shù)字媒體技術(shù)的案例開發(fā)》課程取得了較好的效果。在教學(xué)過程中，我們以Microsoft ExpressionBlend4為設(shè)計(jì)平臺(tái)，從矢量圖形設(shè)計(jì)、動(dòng)畫設(shè)計(jì)、控件控制和簡(jiǎn)單編程等方面著手，訓(xùn)練沒有程序設(shè)計(jì)編程基礎(chǔ)的數(shù)字媒體專業(yè)的學(xué)生開發(fā)出Windows下有一定價(jià)值的應(yīng)用程序。其中，利用WPF行為僅為控件控制應(yīng)用的一個(gè)項(xiàng)目。本文是說明非專業(yè)程序設(shè)計(jì)人員不寫代碼或少寫代碼來實(shí)現(xiàn)自己編寫應(yīng)用程序的一種方法，與有同樣想法與經(jīng)驗(yàn)的同仁相互交流。

參考文獻(xiàn)（References）：

[1]張洪定，郭早早.WPF和Silverlight教程[M].南開大學(xué)出版社，2012.

[2]張洪定，孟冬梅主編.基于Expression Blend 4中文版WPF和Silverlight項(xiàng)目設(shè)計(jì)基礎(chǔ)[M].清華大學(xué)出版社，2011.

[3]張洪定i編.WPF和Silverlight項(xiàng)目設(shè)計(jì)實(shí)例[M].清華大學(xué)出版社.2012.

[4]微軟.Microsoft Expression Blend4行為的使用[DB/CD]，2017.10.

[5]百度百科.Microsoft Expression Blend詞拳[DB/CD].百度，1996.

[6]微軟.Microsoft Expression Blend4幫助[DB/CD]，2017.10.

作者簡(jiǎn)介：霍曉鋼（1963-），男，陜西西安人，工程碩士，副教授，主要研究方向：數(shù)字媒體制作與數(shù)據(jù)庫。