WPF中應(yīng)用行為實(shí)現(xiàn)對(duì)媒體的控制

霍曉鋼

摘要： 為了解決沒(méi)有編程基礎(chǔ)的數(shù)字媒體開(kāi)發(fā)人員，對(duì)數(shù)字媒體的控制需求，WPF開(kāi)發(fā)工具Expression Blend引入行為（behavior）編程包直接作用于控件，使得只需修改對(duì)應(yīng)屬性參數(shù)就可方便對(duì)數(shù)字媒體對(duì)象加以有效地控制。本文介紹WPF行為的應(yīng)用，展示不用編程完成應(yīng)用程序中對(duì)數(shù)字媒體控制的設(shè)計(jì)與制作過(guò)程。

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

中圖分類(lèi)號(hào)：TP311 ? ? ?文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2021）35-0102-03

Application Behavior in WPF to Control Media

HUO Xiao-gang

（Zhejiang Technical Institute of Economics，Hangzhou 310006，China）

Abstract： In order to solve the control requirements of digital media developers without programming foundation， WPF development tool expression blend introduces behavior programming package to directly act on the control， which makes it easy to control digital media objects effectively by modifying the corresponding attribute parameters. This paper introduces the application of WPF behavior， and shows the design and production process of digital media control without programming.

Key words ： WPF;behavior;digital media;computer coding

WPF（Windows Presentation Foundation，直譯為：窗口展示平臺(tái)）是微軟新一代矢量圖形系統(tǒng)，WPF有著靈活、易擴(kuò)展的動(dòng)畫(huà)機(jī)制，接口設(shè)計(jì)非常直觀，能方便地進(jìn)行可視化編輯[1]。也能夠方便快捷地制作精美復(fù)雜的UI（用戶界面設(shè)計(jì)）并無(wú)須大量的程序代碼的設(shè)計(jì)。

微軟開(kāi)發(fā)了Expression Studio套裝工具可視化的設(shè)計(jì)界面中的Expression Blend，自Visual Studio2013以后全部集成安裝在開(kāi)發(fā)系統(tǒng)中。所寫(xiě)的目標(biāo)代碼適用于微軟支持的所有平臺(tái)，在Expression Blend中，通過(guò)美工板上繪制形狀、路徑和控件，然后修改其外觀、動(dòng)畫(huà)和行為，能夠直觀地設(shè)計(jì)應(yīng)用程序。也可以通過(guò)導(dǎo)入圖像、視頻和聲音，只需修改其屬性就可以對(duì)項(xiàng)目對(duì)象進(jìn)行有效地控件，大大方便沒(méi)有程序設(shè)計(jì)基礎(chǔ)的制作人員。本文通過(guò)介紹Expression Blend中行為的應(yīng)用，展示不用編寫(xiě)程序代碼或較少地編寫(xiě)程序代碼，對(duì)數(shù)字媒體控制的方法。

1 Blend行為的設(shè)置

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

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

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

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

例如，若要用一個(gè)按鈕（Button）控件實(shí)現(xiàn)對(duì)動(dòng)畫(huà)（Storyboard）對(duì)象的播放、暫停、停止等進(jìn)行控制，可使用“控制故事面板（ControlStoryboardAction）”行為，將其拖到按鈕Button 對(duì)象上，然后，在屬性面板中的“ControlStoryboardOption”選擇播放（Play）、暫停（Pause）、停止（Stop）（如圖1所示）。

說(shuō)明：在“控制故事面板（ControlStoryboardAction）”行為可設(shè)置下列屬性：

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

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

控制面板選項(xiàng)（ControlStoryboardOption）屬性：設(shè)置行為觸發(fā)的故事面板動(dòng)畫(huà)（Storyboard）的操作，包括播放（Play）、暫停（Pause）、停止（Stop）。

故事面板（StoryBoard）屬性：設(shè)置單擊按鈕時(shí)播放的故事面板的對(duì)象的名稱(chēng)。

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

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

2.1 音頻視頻的控制

一般來(lái)說(shuō)，制作一個(gè)音視頻控制軟件需要編寫(xiě)很多控制代碼，下面通過(guò)添加“行為”的方式實(shí)現(xiàn)不需要編寫(xiě)代碼，完成對(duì)音視頻元素的播放的控制。即：點(diǎn)擊“播放”按鈕，音視頻播放;按下“暫?！币粢曨l暫停播放等。

制作過(guò)程如下。

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

（2）從“資產(chǎn)”→“行為”中找到“ControlStoryboardAction”行為拖入到按鈕btnplay（播放）下方（如圖3所示）。

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

l觸發(fā)器屬性：

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

SouceObject：播放按鈕（btnplay）

EventName：事件名稱(chēng)（Click）

l公共屬性：

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

Storyboard：故事面板動(dòng)畫(huà)名稱(chēng)。（如圖4所示）

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

2.2 圖片大小的控制

在數(shù)字媒體展示時(shí)，一般用戶會(huì)由自己改變圖片的大小來(lái)適應(yīng)于自我觀看的需要。在Expression Blend中利用行為，也是不需要編寫(xiě)一行代碼的就能完成這一設(shè)計(jì)任務(wù)。

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

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

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

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

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

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

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

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

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

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

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

3 結(jié)論

通過(guò)幾年的教學(xué)實(shí)踐，以Microsoft Expression Blend4為設(shè)計(jì)平臺(tái)，從矢量圖形設(shè)計(jì)、動(dòng)畫(huà)設(shè)計(jì)、控件控制和簡(jiǎn)單編程等方面著手，訓(xùn)練沒(méi)有程序設(shè)計(jì)編程基礎(chǔ)的數(shù)字媒體專(zhuān)業(yè)的學(xué)生開(kāi)發(fā)出windows下有一定應(yīng)用價(jià)值應(yīng)用程序。其中，利用WPF行為僅為控件控制應(yīng)用的一個(gè)項(xiàng)目。本文僅為說(shuō)明非專(zhuān)業(yè)程序設(shè)計(jì)人員不寫(xiě)代碼或少寫(xiě)代碼來(lái)實(shí)際自己編寫(xiě)應(yīng)用程序的一種方法，與有同樣想法與經(jīng)驗(yàn)的同仁相互交流。

參考文獻(xiàn)：

[1] 百度百科.Microsoft Expression Blend 詞條[DB/CD].北京：百度，1996.

[2] 微軟. Microsoft Expression Blend4行為的使用[DB/CD].?北京：2017?-?10?-?11.

[3] 微軟. Microsoft Expression Blend4幫助.[DB/CD].?北京：2017?-?10?-11.

[4] 張洪定，郭早早，梁竣.WPF和Silverlight教程[M].天津：南開(kāi)大學(xué)出版社，2012.

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

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

【通聯(lián)編輯：唐一東】