Author： Alex

在本文中，我們將考慮在Expression Blend用幾種方法來建立酷炫的凝膠狀按鈕。如果你看到 Expression Blend 或 Visual Studio 中的 WPF 預設外觀的 Button，你會發現它一點也不酷。它仍舊是過時的 chrome 樣子的按鈕控制元件， 然而 Expression Blend 和 Windows Presentation Foundation (WPF) 不僅具有基本功能而且能夠提升使用者體驗（User eXperience，UX）。所以為了讓你的控制元件變得炫酷，就得自定義它，換句話說就是為它設計成自己想要的樣子！

按鈕（Button）是最常用的控制元件之一，一般在應用中都能找到。因此，本文中我們將建立酷炫的按鈕用於不同型別的應用，包括Windows Phone應用。現在，用於凝膠狀的、有光澤的按鈕的基本思想是建立3個蛋狀橢圓或者圓角矩形（你可以使用任意其他你想要的形狀）。在本例中，我們使用圓角矩形，因為容易協調工作。第一個矩形/橢圓使用線性漸變畫刷（linear gradient brush），從頂部到3/4處由亮變暗，再變數直到底部。第二個矩形比第一個稍微小些，使用梯度填充（gradient fill）且透明（transparent）。最後一個元素（第三個矩形）使用了黑色的實心畫刷（solid brush），並被用來建立投影效果。

讓我用圖片來說明它，我想建立一個按鈕，看起來像這樣的：

或者是這樣的

或者是那樣的

  簡而言之，我要組合3個元素（3個形狀：矩形/橢圓）達到如上所述的效果！下面的形狀已經被組合到上面的第一個酷炫的、凝膠狀按鈕中去：

注意：要在這指出一件事就是被用於DropShadowEffect效果的第三個元素（第三個黑色矩形，它是黑色的，不是灰色的，顯示為灰色是因為白色的畫布），它不是必須的，因為我可以簡單地用DropShadowEffect類來達到這個目的：

In XAML:
</Rectangle.Effect>
<DropShadowEffect 
 
Color=“Black” Direction=“315” ShadowDepth=“5”
BlurRadius=“5” Opacity=“100“ />
</Rectange.Effect>

在設計器中：

  然而，有BitmapEffect效果的物件存在問題：如果著色器效果用軟體模式渲染，任何使用效果的物件也將會使用軟體進行渲染，意味著當使用大型視覺化的效果或者繪製效果的特性時，效能普遍可能會降低。在處理著色器效果時，你需要徹底地測試效能並啟用警告。

現在，讓我們進入實際創作中：

開啟 Expression Blend（如果沒開啟）

建立一個新專案（檔案

注意：你可以建立一個常規的WPF或者Silverlight專案，但是在本例中我想建立用於自定義控制元件的專案，我們可以在其他的WPF應用中重用

從工具箱（ToolBox）新增一個按鈕到主畫布（LayoutRoot）中。

接著我們將要為我們的按鈕建立自定義風格。我們將通過編輯預設的模版來達到這個目的。模版重做（ReTemplating）或樣式設計（Styling）是WPF最強大的功能之一；就是說，有可能完全取代使用者介面（UI）元素的外觀和感覺（look and feel）。

右擊選中的按鈕，然後選擇編輯模版->編輯副本：

在建立樣式資源對話方塊中，給新樣式命名：gelButtonStyle1：

在定義位置（Define in）下面， 保留原樣：UserControl:UserControl

接著點選確定（OK），gelButtonStyle1建立完畢。看著物件樹，你可以看到一個由多個部件組成的按鈕。使用模版你可以取代這些部件，然而使用樣式，只能通過改變公開的屬性從外部改變外觀。樣式由屬性設定器（property setters）構成，當你應用一種樣式的時候，它會給元素的屬性設定樣式中的值：

在右上方屬性面板下寫下按鈕的預設尺寸。

接著在物件樹中刪除預設的Button Chrome型別，並增加一個Grid控制元件：

注意： 最佳實踐是給你的元素命名，因此我為Grid命名為“main”。

接著加入三個矩形並依次為它們命名：dropShadowRect，reflectiveRect 和 andtransparentRect。

依次改變這些矩形的大小：讓 dropShadowRect 最大，其他兩個元素尺寸相同。

注意：當你設定尺寸時，記住之前設定的按鈕的預設尺寸。你一定不希望按鈕過大或過小，所以設定尺寸的時候把這一點考慮進去。

注意：在這個設計階段，也許有必要把畫板所放到合適的大小以展開工作，比如：  為後續工作提供了一個更好的視野：

“dropShadowRect”被選中後，把它改為圓角矩形（注意：你可以把它改成任何你想要的形狀，參看使用者嚮導（User Guide）一節中的繪製物件（Drawing Objects）主題以獲得更多資訊）。

對於其它兩個元素，重複以上步驟。

注意：你可以通過選擇矩形並拖拽左上角的拐角弧度手柄來修改矩形的拐角弧度。當指示器移動到點線上，剛好外離矩形矩形左上角，拐角弧度手柄就會出現（譯註：我是通過選擇矩形，在右上角屬性面板中的外觀中設定“RadiuX”和“RadiuY”實現的）。

在外觀（Appearance）面板中檢驗你的 X 和 Y 弧度，確保它們一樣：

接下來，給 “dropShadowRect”應用一個實心顏色（solid color）（黑色）填充（Fill）和輪廓（Stroke）畫刷：

注意：如果你沒有看到剛才你在操作的元素，你可以使用Z順序把那個元素呈現到前面，或者簡單地使用物件和時間線（Object and Timeline）面板上的顯示/隱藏屬性。

現在，讓我們轉移到“reflectiveRect”元素上，我們要為它使用一個線性漸變畫刷從頂部到底部3/4處由亮變暗，再到底部由暗變亮。使用漸變填充畫刷看起來如下圖所示或者你喜歡的任何顏色，但是記住要有反光的邊緣：

Tip：使用工具面板中的漸變工具（Gradient Tool）來改變達到你覺得合適的漸變效果。

記得移除這個形狀的輪廓（Stroke）。

接下來，讓我們轉移到最後一個元素上來，即 “transparentRect”。選擇右邊的漸變結束端點（GradientStop）：

使用一個線性漸變畫刷填充，移除輪廓並通過調整 Aplha 為 0% 使得矩形透明：

注意：如果你的背景畫布是黑色的或深色的，你會看不到你的透明元素的這個改變。使用一個亮色的實心填充，將會這樣：

接著，它是一個按鈕，所以新增一個ControlPresenterControlPresenter

最後一步非常重要，如果你想要達到凝膠狀、有光澤的錯覺，以正確的順序簡單地佈置它們！我的Z順序看起來如下物件樹所示：

記得第三個矩形（dropShadowRect）僅用來建立我們自己的陰影效果，它不是必須的。對齊它並並用我為它設定的不同顏色來演示：

你也可以得到相同的結果設定更好，如果你組合不同形狀的亮色。我使用如上相同的三個元素建立了線面的這些按鈕：

略過Silverlight部分

總結

這是一個非常簡單的引導性教程。我們將會在以後重溫這些主題，使用更復雜的設計和更復雜的實現。在本教程中，涵蓋了基礎知識樣式和模版，它們的不同在於：樣式被用來設定控制元件的預設特性（attributes）；而模版定義了元素被用於控制元件本身。對於大多數的控制元件，樣式簡單地設定畫刷的引用，提供了可感的預設設定。你可以建立絕妙的圖形外觀，通過使用不同的畫刷用於不同的圖形中來建立碉堡了的設計！希望可以幫到一些人！