用VisualBrush定製複雜的按鈕樣式

**自

visualbrush是一種比較特殊的筆刷，它的功能仍然是用來給元素填充圖案，但它的內容卻可以是各種控制項。

你可以將其理解為乙個普通的容器，但在其內部的所有控制項都會失去互動能力，而只保留顯示能力。

你可以通過本例學習到關於visualbrush的使用方法，以及複雜樣式的定製技巧。

首先來看一下我們將要實現的效果的4倍放大圖：

這個效果的特點如下：

文字部分有白色泛光效果，使之看起來就像是發光體。

按鈕下半部分有橢圓形的放射漸變，但注意其上下並不對稱。

接下來就開工製作，首先新建乙個wpf應用程式，胡亂放上一些按鈕用作測試：

在window的資源中指定按鈕的樣式：

可以看到其基本結構非常簡單，就是乙個border內裝載著內容，而核心的樣式其實都是在border的background屬性裡面定義的：

是的，在這裡我們就是用到了visualbrush，在他內部裝載了乙個擁有均分的兩行的grid，grid的屬性設定如下：

cliptobounds="true" height="

" width=""

visualbrush的內部與其外部的布局毫不相干，所以如果不給grid指定尺寸的話，它就會為0；而如果內部的顯示比例不與外部統一的話，某些元素拉伸後也會比較難看。所以我將其尺寸繫結到了源控制項的尺寸。

cliptobounds屬性用於指示是否剪裁溢位的元素，不剪裁的話有可能因溢位而增大元素占用尺寸，造成最終顯示比例失調。

grid的backround屬性只是定義了簡單的界限分明的漸變作為背景：

startpoint="0,0"

endpoint="0,1">

color="#ff95bcb9"

offset="0" />

color="#ff294b53"

offset="0.5" />

color="#000"

offset="0.5" />

在grid內部有乙個ellipse元素和兩個contentpresenter元素，兩個contentpresenter在這裡都使用了模糊濾鏡，來營造泛光效果，ellipse就是實現底部的放射漸變，其**如下：

opacity="0.8" grid.row=

"1" fill=

"#51edff" height="

radius="55"

其原理就是通過繫結height屬性來與按鈕等高，然後將其置於grid的第二行中，這樣它的下半部分就會溢位grid的下邊界，而按鈕內就只顯示出它的上半部，此時再對其進行較大程度的模糊，便與背景結合而形成放射漸變效果。

如果去除它的模糊濾鏡，那麼看到的效果就是這樣的：

來看看我們的最終效果：