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

終于效果例如以下：

←點(diǎn)它

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

1.整體思路

---

分析上面效果--button為一個(gè)發(fā)光的三角形在MouseOver和click的時(shí)候有響應(yīng)的動(dòng)畫效果...

發(fā)光的三角形:由2個(gè)空心三角形構(gòu)成，當(dāng)中以下一層那個(gè)被增加了BlurEffect效果。

2.設(shè)計(jì)過程

---

打開blend，新建 silverlight應(yīng)用程序+站點(diǎn)（這些我就不浪費(fèi)口水了）

首先我們來畫一個(gè)等腰三角形的路徑..怎樣讓它等腰呢？我們這里利用了一點(diǎn)幾何常識(shí)....

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

我們先畫一個(gè)矩形，然后再畫一個(gè)矩形的內(nèi)接圓（因?yàn)閎lend對(duì)圖形繪制時(shí)的定位有吸附效果，所以非常easy畫出內(nèi)接圓）

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

能夠把圈圈和框框del了，剩下三角形，依據(jù)自己需求調(diào)好角度和邊框粗細(xì)，顏色等。（調(diào)角度時(shí)按shift也有效果哦）

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

然后我們?yōu)橄聦拥娜羌尤隕ffect效果，點(diǎn)新建，選BlurEffect.

做好后例如以下圖：

再重復(fù)調(diào)以下一層三角形的Effect.Radius和邊框粗細(xì)和顏色，直到自己想要的效果

作為一個(gè)Button它有點(diǎn)太大了，我們用選擇工具（V）在畫布上框選，或在左邊樹狀結(jié)構(gòu)里選中兩個(gè)Path調(diào)節(jié)到自己想要的尺寸。

然后把它兩增加到一個(gè)Grid里面，方法例如以下圖。或者也能夠選中兩個(gè)圖形后用快捷鍵Ctrl+G。

然后右鍵Grid，構(gòu)成控件...

我們選擇Button確定。

然后我們就發(fā)現(xiàn)真的變成Button了也~

我們把Button.Content的內(nèi)容清空

我們進(jìn)入編輯Button的模版，選中Button點(diǎn)下圖中Grid就可進(jìn)入

結(jié)構(gòu)例如以下

我們選Grid，把它的背景色設(shè)為隨意一個(gè)顏色，然后把透明度調(diào)為0（假設(shè)不這樣做的話，空心三角形的內(nèi)部為空的部分響應(yīng)不了鼠標(biāo)事件）

作為一個(gè)Button當(dāng)然要有MouseOver的效果咯。

我們點(diǎn)狀態(tài)選項(xiàng)欄，選中MouseOver狀態(tài)，把作為發(fā)光虛化的三角形的邊框改為另外一個(gè)顏色，再加入Normal狀態(tài)到MouseOver的過度為0.3秒，這樣讓變化有個(gè)過程。例如以下圖

同理，我們加入Pressd狀態(tài)的樣式，這里我們把整個(gè)Grid向右略微移動(dòng)一點(diǎn)，能夠選中g(shù)rid后用方向鍵→來調(diào)整，這樣保證在一條水平線上。相同加入到其它隨意狀態(tài)的過度，例如以下圖。

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

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

---

在做上面這個(gè)Demo的時(shí)候突然有個(gè)想法，實(shí)施了下，效果不錯(cuò)，就作為耐心看完本教程的朋友的獎(jiǎng)勵(lì)吧~~

因?yàn)閟ilverlight中沒有VisualBrush所以實(shí)現(xiàn)倒影略顯繁瑣....

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。