本篇文章閱讀的基礎是在讀者對於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,如圖:
在觸發器的窗口中,可以選擇觸發動畫的時機,如圖:
最終實現的效果如一開始所示的圖片一樣.
源代碼下載: