用VisualBrush定製複雜的按鈕樣式

2021-09-22 13:32:34 字數 1778 閱讀 9542

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的下邊界,而按鈕內就只顯示出它的上半部,此時再對其進行較大程度的模糊,便與背景結合而形成放射漸變效果。

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

來看看我們的最終效果:

用VisualBrush定製複雜的按鈕樣式

自 visualbrush是一種比較特殊的筆刷,它的功能仍然是用來給元素填充圖案,但它的內容卻可以是各種控制項。你可以將其理解為乙個普通的容器,但在其內部的所有控制項都會失去互動能力,而只保留顯示能力。你可以通過本例學習到關於visualbrush的使用方法,以及複雜樣式的定製技巧。首先來看一下我們...

用Dockerfile定製映象

從剛才的 docker commit 的學習中,我們可以了解到,映象的定製實際上就是定製每一層所新增的配置 檔案。如果我們可以把每一層修改 安裝 構建 操作的命令都寫入乙個指令碼,用這個指令碼來構建 定製映象,那麼之前提及的無法重複的問題 映象構建透明性的問題 體積的問題就都會解決。這個指令碼就是 ...

用Lua定製Redis命令

原文 猿人課堂 2019 03 26 lua 指令碼例項 一些思考 redis作為乙個非常成功的資料庫,提供了非常豐富的資料型別和命令,使用這些,我們可以輕易而高效地完成很多快取操作,可是總有一些比較特殊問題或需求需要解決,這時候可能就需要我們自己定製自己的 redis 資料結構和命令。執行緒安全 ...