WPF界面設計技巧（3）—實作不規則動畫按鈕

釋出了定義WPF按鈕的教程後，有朋友問能否實作不規則形狀的按鈕，今天我們就來講一下不規則按鈕的制作。

不規則按鈕的做法實際上和先前我們做不規則窗體的方法差不多，隻是為按鈕弄個不是那麼方方正正的背景而已。

我們這次沿用自定義窗體時的設計圖形，設計一個動态的不規則按鈕，在這個示例中我們要将先前設計的整個圖形作為按鈕，并讓外圍的圓環始終圍繞中心圓形旋轉，在滑鼠移入時，還要産生顔色變化及發光效果。

首先用 Microsoft Expression Design 2 打開上次的設計檔案，将圖層名稱由“back”改為“sphericity”。

然後選中圓環部分，按 Ctrl + X 将其剪切，建立一個圖層，命名為“ring”，将圓環粘貼進該層，并把該層移動到“sphericity”層下面。

再選中圓環部分，如圖所示地移動它，将其内環貼近圓形的邊緣。

然後在“ring”層新建立一個圓形，填充色設為深紅色，無描邊。

在圖層面闆上展開“ring”層，将新建立的圓形挪到圓環下方。

參考“sphericity”層的圓形中心點坐标值，将新建立的這個圓形中心點與之重合。

你可以先選中“sphericity”層的圓形，然後複制其X坐标值，再選中新建立的圓形，選中其X坐标值，按 Ctrl + V 粘貼以覆寫其先前值，然後再以同樣的方法處理Y坐标值。

當中心點重合後，隐藏“sphericity”層，等比例放大這個圓形使之邊緣蓋過圓環。

然後将該圓形的不透明度修改為0。

同時選中圓環與這個看不見的圓形，點選右鍵，在彈出菜單中選擇“組合”。

這樣這個看不見的圓形就成為了圓環的旋轉參照物，重新顯示出“sphericity”層，你可以現在就嘗試旋轉一下圓環，你會看到圓環始終都會貼緊并圍繞中間的圓形旋轉。

設計部分做完了，現在導出資源字典。

打開 Microsoft Visual Studio 2008 建立一個WPF應用程式，将導出的資源字典導入解決方案。

在App.xaml中添加對資源字典的引用。

調整窗體尺寸為400×400，在代碼視圖中 <Grid> … </Grid> 标記内貼入如下代碼：

Code

還是回過頭在研究代碼，先編譯并運作，可以看到下圖這樣的界面，其中的圓環在不停的轉動。

滑鼠移入時圓形會變色，并且外發光：

好了，下面隻講解一下代碼中需要注意的地方，重複的知識不再累述，大家可以參考先前的兩篇文章。

Canvas 是一個簡單的容器元素，它内部的元素以簡單的坐标位置來描述。

其内部放置了兩個矩形元素 Rectangle ，我們用 Rectangle 分别裝載圓環和圓形及文字的圖像。

通過 Rectangle.RenderTransform  屬性可以對 Rectangle 的外形進行轉換調整，其功能類似 Photoshop 中的“自由變換”，在這裡使用 RotateTransform 來改變角度。

“CenterX="150" CenterY="150"”設定了旋轉中心的坐标值，我們之前曾做過一個隐形的旋轉參照，是以可以肯定我們的圖形中心就是旋轉的中心，現在我們的圖檔被設定為300×300大小了，是以中心坐标就是150,150。

Angle 屬性指定了旋轉的角度，這裡我設定為135是為了讓它正好旋轉到下面這樣的角度。

因為我們後面将會做動畫使其順時針旋轉，受地心引力的影響，順時針旋轉時這個角度會是旋轉力度的一個分水嶺，越過這個角度将會使運動較為吃力，而超過180度以後将會加速運動，我們可以通過動畫的緩動值設定來粗略模拟這一實體現象。

順帶提一下兩個圖形的尺寸設定，上面一組是圓環的，下面的是圓形及文字的，圓環的300×300是我任意設定的，我覺得這個大小當個按鈕還算說的過去，下面的234×234是依據原圖中的尺寸，這裡的按比例縮小後，又進行了一些微調後确立的，設定好它的尺寸後，為了使它位于圓環圖形中心，需要調整它在Canvas 中的頂部和左部坐标值均為33，即 (300-234)/2。

接下來是觸發器部分，首先啟用了一個事件觸發器，觸發 FrameworkElement.Loaded 事件，我們要在程式載入完畢時就啟動圓環的旋轉動畫，并使之一直運轉。

為什麼要使用 FrameworkElement.Loaded 事件？我不知道，我一直認為應該使用按鈕的 Loaded 事件，可是總會看到一些BT的錯誤資訊，導緻無法正常運轉，後來從Blend裡學來的FrameworkElement.Loaded ，那就用它吧，好用就得了。

這次與以往不同，我們采用了關鍵幀動畫 DoubleAnimationUsingKeyFrames ，主要是為了達成動畫的緩動和加速效果，如前所述，在這裡我們要讓圓環旋轉起來。

“RepeatBehavior="Forever"”屬性指定動畫永遠執行。

“SplineDoubleKeyFrame”是關鍵幀，這裡隻有兩個關鍵幀，通過這兩個關鍵幀，讓圓環從之前設定好的135度轉到495（135 + 360）度，其 KeySpline 是訓示緩動曲線的貝塞爾控制點坐标值，具體設定方法得參考MSDN，我自己也暈暈乎乎的，我大體上認為這4個double數值是2組資料，即為“X1,Y1,X2,Y2”，分别代表開始時和結束時的速度，其中每組的X值越大代表速度越慢，Y值越大代表速度越快，這個了解可能不是很準确，僅供參考。

滑鼠移入事件的觸發器大家應該很熟悉了，不過大家看到這裡那幾個動畫行的後面一大段，可能都要痙攣了：

(Rectangle.Fill).(DrawingBrush.Drawing).(DrawingGroup.Children)[0].(GeometryDrawing.Brush).(RadialGradientBrush.GradientStops)[0].(GradientStop.Color)

諸如這樣長的路徑聲明是非常惡心人的，沒辦法，因為我們繪制的圖形比較複雜，是以隻能使用複雜的路徑語句來描述了，可以參考如下選取路徑的方式：

好了，别的就沒什麼了，我繼續幹活去啦。

<a href="http://files.cnblogs.com/SkyD/Tbutton20080715224806.rar">源代碼和設計檔案</a>

本文轉自斯克迪亞部落格園部落格，原文連結：http://www.cnblogs.com/SkyD/archive/2008/07/15/1243716.html，如需轉載請自行聯系原作者