【翻譯】用 Expression Blend 建立酷炫的 Button

原文：Creating 「Cool」 Buttons with Expression Blend

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 控件庫）。給它命名，選擇一個位置或者留在默認的位置。

 

注意：你能夠建立一個常規的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）；而模版定義了元素被用於控件自己。對於大多數的控件，樣式簡單地設置畫刷的引用，提供了可感的默認設置。你能夠建立絕妙的圖形外觀，經過使用不一樣的畫刷用於不一樣的圖形中來建立碉堡了的設計！但願能夠幫到一些人！

 =============================================================================================

你們能夠看下我剛作的效果：

我是建的WPF應用程序。

這是對象樹：

直接在窗口中拖一個Button，右擊編輯模版，編輯副本。進去後按順序拖3個Rectangle，分別命名。

佈局都設置一下：

以後就是對每一個Rectangle分別設置：