看著各位大蝦出系列文章貌似挺好玩的，本人耍了2個月的Wpf，有點見解，希望各位看官笑納。本系列第一章就先來點簡單又有用的吧o(∩_∩)o 哈哈..

終于效果例如以下：

←點它

本人一直在做WPF算是第一次做silverlight，這樣主要是為了可以在博客里更好的展示成品。(特別鳴謝銀光中國提供的免費silverlight空間)

1.整體思路

---

分析上面效果--button為一個發光的三角形在MouseOver和click的時候有響應的動畫效果...

發光的三角形:由2個空心三角形構成，當中以下一層那個被增加了BlurEffect效果。

2.設計過程

---

打開blend，新建 silverlight應用程序+站點（這些我就不浪費口水了）

首先我們來畫一個等腰三角形的路徑..怎樣讓它等腰呢？我們這里利用了一點幾何常識....

看到左邊工具欄里面的圖形

我們先畫一個矩形，然后再畫一個矩形的內接圓（因為blend對圖形繪制時的定位有吸附效果，所以非常easy畫出內接圓）

然后用鋼筆工具（P）連接3個切點，注意畫的時候能夠按住shift鍵來畫，這點和PS一樣能夠讓線保持在某幾個角度范圍，這樣線就能夠畫的非常直

能夠把圈圈和框框del了，剩下三角形，依據自己需求調好角度和邊框粗細，顏色等。（調角度時按shift也有效果哦）

然后我們把畫好的三角形再CtrlV、CtrlC復制一份出來，把上面一層的邊框顏色改為白色，例如以下圖（有必要說明一下，由于XAML為解釋性語言，后面創建的控件會覆蓋在前面創建的控件上，這就導致圖層結構顯示和PS剛好相反，例如以下圖，以下的Path在上面一層圖層）

然后我們為下層的三角加入Effect效果，點新建，選BlurEffect.

做好后例如以下圖：

再重復調以下一層三角形的Effect.Radius和邊框粗細和顏色，直到自己想要的效果

作為一個Button它有點太大了，我們用選擇工具（V）在畫布上框選，或在左邊樹狀結構里選中兩個Path調節到自己想要的尺寸。

然后把它兩增加到一個Grid里面，方法例如以下圖?；蛘咭材軌蜻x中兩個圖形后用快捷鍵Ctrl+G。

然后右鍵Grid，構成控件...

我們選擇Button確定。

然后我們就發現真的變成Button了也~

我們把Button.Content的內容清空

我們進入編輯Button的模版，選中Button點下圖中Grid就可進入

結構例如以下

我們選Grid，把它的背景色設為隨意一個顏色，然后把透明度調為0（假設不這樣做的話，空心三角形的內部為空的部分響應不了鼠標事件）

作為一個Button當然要有MouseOver的效果咯。

我們點狀態選項欄，選中MouseOver狀態，把作為發光虛化的三角形的邊框改為另外一個顏色，再加入Normal狀態到MouseOver的過度為0.3秒，這樣讓變化有個過程。例如以下圖

同理，我們加入Pressd狀態的樣式，這里我們把整個Grid向右略微移動一點，能夠選中grid后用方向鍵→來調整，這樣保證在一條水平線上。相同加入到其它隨意狀態的過度，例如以下圖。

最后一步，按F5看一下你的成果吧~~！

源代碼下載：http://files.cnblogs.com/tong-tong/SilverlightApplication1.rar

---

在做上面這個Demo的時候突然有個想法，實施了下，效果不錯，就作為耐心看完本教程的朋友的獎勵吧~~

因為silverlight中沒有VisualBrush所以實現倒影略顯繁瑣....

相同附上源代碼：http://files.cnblogs.com/tong-tong/SilverlightApplication1-%E5%89%AF%E6%9C%AC.rar

總結

以上是生活随笔為你收集整理的blend的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。