本篇文章閱讀的基礎是在讀者對於WPF有一定的了解並且有WPF相關的編碼經驗,對於Blend的界面布局有基礎的知識.文章中對於相應的在Blend中的操作進行演示,並不會進行細致到每個屬性的介紹.同時,本篇文章所用的Blend版本是5.0.40218.0,即VS2012對應的版本,對於其他版本的操作區別,請讀者自行研究.Ok,我們現在開始,本篇文章最終的效果如下圖所示:

好,我們開始分步介紹過程,除了最後設計的一個按鈕的後臺代碼需要使用到代碼之外,其余的操作我們都使用圖形操作.

1.新建項目

打開Blend,新建一個WPF應用程序,命名為WPF_SearchLight,確定完成,具體如下:

2.單擊項目自動生成的MainWindow,調整屬性:

　　WindowStyle設置為None;

　　Background設置為純黑色;

　　Height設置為200;

　　Width設置為600;

　　WindowsStartupLocation設置為CenterScreen.

最終效果圖如下:

3.接下來我們需要在窗口中添加一個TextBlock,設置Text為任意的文字,Background設置為白色,具體如下:

4.添加一個按鈕,用於退出程序,將它放置在TextBlock的右端,並在後臺代碼中添加處理事件.

添加一個按鈕,用於退出程序,將它放置在TextBlock的右端,並在後臺代碼中添加處理事件.

5.接下來我們需要設計一個圓和一個矩形.畫一個矩形,遮蓋住TextBlock,它的長度必須為TextBlock的兩倍以上,並且Background 設置為純黑色,同時A的值設置為80%.如下圖:

接下來畫一個圓,圓的直徑與TextBlock的高度相等,效果如圖:

然後在在對象和時間線窗口中同時選中(按住Shift),右擊,選中合並→相減,會生成一個Path路徑.(此處應註意先按矩形,再按圓形即矩形-圓形)

6. 接下來就要設計動畫了,在對象和時間線中點擊Path,然後點擊"+",新建一個名為"SearchLight"的動畫如圖:

這時候會出現時間面板,如圖:

　點擊時間左邊的按鈕,記錄此時的Path位置;

　將時間軸拖動到6處,然後水平移動Path至退出按鈕處,點擊時間左邊的按鈕,記錄此時的Path位置;

將時間軸拖動到7處,不移動Path,點擊時間左邊的按鈕,記錄此時的Path位置.

動畫設定完成,此時可以點擊播放按鈕查看效果.

7. 還有一些其他的操作, 選定SearchLight,設置動畫的一些屬性,如AutoReverse勾選,RepeatBehavior選擇為Forever,如圖:

在觸發器的窗口中,可以選擇觸發動畫的時機,如圖:

最終實現的效果如一開始所示的圖片一樣.

源代碼下載:

http://files.cnblogs.com/youngytj/WPF_SearchLight.rar

WPF和Expression Blend開發實例:充分利用Blend實現一個探照燈的效果