霍曉鋼

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

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

中圖分類號：TP311 ? ? ?文獻(xiàn)標(biāo)識碼：A

文章編號：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ǒng)，WPF有著靈活、易擴(kuò)展的動畫機(jī)制，接口設(shè)計(jì)非常直觀，能方便地進(jìn)行可視化編輯[1]。也能夠方便快捷地制作精美復(fù)雜的UI（用戶界面設(shè)計(jì)）并無須大量的程序代碼的設(shè)計(jì)。

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

1 Blend行為的設(shè)置

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

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

1.2 添加控件對象的行為

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

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

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

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

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

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

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

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

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

2.1 音頻視頻的控制

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

制作過程如下。

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

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

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

l觸發(fā)器屬性：

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

SouceObject：播放按鈕（btnplay）

EventName：事件名稱（Click）

l公共屬性：

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

Storyboard：故事面板動畫名稱。（如圖4所示）

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

2.2 圖片大小的控制

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

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

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

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

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

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

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

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

l公共屬性中：目標(biāo)對象（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就會以5pt的增量放大。

3 結(jié)論

通過幾年的教學(xué)實(shí)踐，以Microsoft Expression Blend4為設(shè)計(jì)平臺，從矢量圖形設(shè)計(jì)、動畫設(shè)計(jì)、控件控制和簡單編程等方面著手，訓(xùn)練沒有程序設(shè)計(jì)編程基礎(chǔ)的數(shù)字媒體專業(yè)的學(xué)生開發(fā)出windows下有一定應(yīng)用價(jià)值應(yīng)用程序。其中，利用WPF行為僅為控件控制應(yīng)用的一個(gè)項(xiàng)目。本文僅為說明非專業(yè)程序設(shè)計(jì)人員不寫代碼或少寫代碼來實(shí)際自己編寫應(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].天津：南開大學(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)編輯：唐一東】