逐步解說：使用 Microsoft Expression Blend 建立按鈕

發行項
10/14/2024

本逐步解說會逐步引導您使用 Microsoft Expression Blend 建立 WPF 自訂按鈕。

重要

Microsoft Expression Blend 的運作方式是產生 Extensible Application Markup Language (XAML)，然後進行編譯以製作可執行的程式。如果您寧願直接使用 XAML，我們還有另一個逐步解說會使用 XAML 搭配 Visual Studio (而非 Blend) 來建立與這個應用程式相同的應用程式。如需詳細資訊，請參閱使用 XAML 建立按鈕。

下圖顯示您將建立的自訂按鈕。

將圖形轉換成按鈕

在本逐步解說的第一個部分中，您會建立自訂按鈕的自訂外觀。若要完成此工作，您必須先將一個矩形轉換成按鈕。接著，您會將其他圖形新增至按鈕的範本，進而建立外觀更複雜的按鈕。為什麼不在一開始就使用一般按鈕，並加以自訂？因為按鈕具有您不需要的內建功;；對於自訂按鈕，使用矩形會比較容易完成工作。

在 Expression Blend 中建立新專案

啟動 Expression Blend。 (按一下 [開始]，依序指向 [所有程式] 和 [Microsoft Expression]，然後按一下 [Microsoft Expression Blend]。)
視需要最大化應用程式。
按一下 [檔案] 功能表上的 [新增專案]。
選取 [Standard Application (.exe)]。
將專案命名為 CustomButton，然後按 [確定]。

此時，您將有空白的 WPF 專案。您可以按 F5 來執行應用程式。如您所預期的一樣，應用程式只包含空白視窗。接下來，您會建立圓角矩形，並將其轉換成按鈕。

將矩形轉換成按鈕

將 Window Background 屬性設定為黑色：選取視窗，按一下 [屬性] 索引標籤，並將 Background 屬性設定為 Black。
繪製與視窗按鈕大小大致相同的矩形：選取左側工具面板上的矩形工具，並將矩形拖曳至視窗。
將矩形的邊角修飾為圓角：您可以拖曳矩形的控制點，或直接設定 RadiusX 和 RadiusY 屬性。將 RadiusX 和 RadiusY 的值設定為 20。
將矩形變更為按鈕：選取矩形。在 [工具] 功能表上，按一下 [Make Button]。
指定樣式/範本的範圍：如下所示的對話方塊隨即出現。

針對 [Resource name (Key)] 選取 [套用至全部]。這會使產生的樣式和按鈕範本套用至所有可歸類為按鈕的物件。針對中的 [定義於] 選取 [應用程式]。這會使產生之樣式和按鈕範本的範圍涵蓋整個應用程式。當您在這兩個方塊中設定值時，按鈕樣式和範本會套用至整個應用程式內的所有按鈕，而您在應用程式中建立的任意按鈕預設都會使用此範本。

編輯按鈕範本

您現在已經擁有變為按鈕的矩形。在本節中，您將修改按鈕的範本，並進一步自訂其外觀。

編輯按鈕範本以變更按鈕外觀

進入編輯範本檢視：若要進一步自訂按鈕的外觀，我們需要編輯按鈕範本。當我們將矩形轉換成按鈕時，就會建立此範本。若要編輯按鈕範本，請以滑鼠右鍵按一下按鈕，然後選取 [Edit Control Parts (Template)]，然後 [編輯範本]。

您會在範本編輯器中注意到，按鈕現在會分成 Rectangle 和 ContentPresenter。您可使用 ContentPresenter 呈現按鈕內的內容 (例如，「按鈕」字串)。矩形和 ContentPresenter 都排列在 Grid 內。
變更範本元件的名稱：以滑鼠右鍵按一下範本詳細目錄中的矩形，將 Rectangle 名稱從 "[Rectangle]" 變更為 "outerRectangle"，並將 "[ContentPresenter]" 變更為 "myContentPresenter"。
將矩形的內部修改為空白 (如同一個甜甜圈)：選取 [outerRectangle]，並將 Fill 設定為 [透明]，並將 StrokeThickness 設為 5。

然後將 Stroke 設定為範本的預定色彩。若要完成這項工作，請按一下 [筆劃] 旁的小白方塊，選取 [CustomExpression]，然後在對話方塊中輸入 "{TemplateBinding Background}"。
在內部建立矩形：現在，建立另一個矩形 (將其命名為 "innerRectangle")，並對稱地放置在 outerRectangle 內。針對這類工作，您可能會想要進行縮放，讓按鈕在編輯區域中變大。

注意

您的矩形看起來可能與圖中的矩形不同 (例如，其可能有圓形邊角)。
將 ContentPresenter 移至頂端：此時，系統可能不會再顯示「按鈕」文字。如果發生這種情形，這是因為 [innerRectangle] 位於 [myContentPresenter] 上方。若要修正此問題，請將 [myContentPresenter] 拖曳至 [innerRectangle] 下方。重新置放矩形和 [myContentPresenter]，使其如下所示。

注意

或者，您也可以用滑鼠右鍵按一下 [myContentPresenter]，然後按一下 [Send Forward] 來重新置放 [myContentPresenter]。
變更 innerRectangle 的外觀：將 RadiusX、RadiusY 和 StrokeThickness 值設定為 20。此外，請使用自訂運算式 "{TemplateBinding Background}" 將 Fill 設定為範本的背景，並將 Stroke 設定為「透明」。請注意，[innerRectangle]Fill 之 Stroke 和的設定，與 [outerRectangle] 的設定相反。
在頂端新增玻璃層：自訂按鈕外觀的最後一個步驟，是在頂端新增玻璃層。這個玻璃層是由第三個矩形所組成。因為玻璃會覆蓋整個按鈕，所以玻璃矩形在大小上與 [outerRectangle] 相似。因此，只要建立 [outerRectangle] 複本，即可建立矩形。醒目提示 [outerRectangle]，並使用 CTRL+C 和 CTRL+V 即可製作複本。將此新矩形命名為 "glassCube"。
視需要重新調整 glassCube 的位置：如果 glassCube 的位置無法涵蓋整個按鈕，請將其拖曳到正確位置上。
將 glassCube 調整為與 outerRectangle 稍微不同的形狀：變更 glassCube 的屬性。首先，將 RadiusX 和 RadiusY 屬性變更為 10，並將 StrokeThickness 變更為 2。
讓 glassCube 呈現出玻璃的外觀：使用線性漸層 (色彩為 75% 不透明) 將 Fill 設定為玻璃外觀，在 6 個大致平均的間隔之間交替使用白色和透明色彩。請依下列內容設定漸層停駐點：
- 漸層停駐點 1：Alpha 值為 75% 的白色
- 漸層停駐點 2：透明
- 漸層停駐點 3：Alpha 值為 75% 的白色
- 漸層停駐點 4：透明
- 漸層停駐點 5：Alpha 值為 75% 的白色
- 漸層停駐點 6：透明
這會建立一個帶有「波浪」的玻璃外觀。
隱藏玻璃層：現在您可以看到玻璃層的外觀，請移至 [屬性] 面板的 [外觀] 窗格，並將 [不透明度] 設定為 0% 來加以隱藏。在之後的各節中，我們將使用屬性觸發程序和事件來顯示及操作玻璃層。

自訂按鈕行為

此時，您已藉由編輯按鈕範本來自訂按鈕的呈現方式，但按鈕不會像一般按鈕一樣回應使用者動作 (例如，在滑鼠停留時變更外觀、接收焦點，然後隨著按下動作出現變化)。接下來的兩個程序會示範如何將這類行為建置到自訂按鈕中。我們將從簡單的屬性觸發程序開始，然後新增事件觸發程序和動畫。

設定屬性觸發程序

建立新的屬性觸發程序：選取 [glassCube] 時，按一下 [觸發程序] 面板中的 [+ 屬性] (請參閱下一個步驟後面的圖示)。這會建立具有預設屬性觸發程序的屬性觸發程序。
讓觸發程序使用的 IsMouseOver 屬性：將屬性變更為 IsMouseOver。這會在 IsMouseOver 屬性為 true 時啟動屬性觸發程序 (當使用者使用滑鼠指向按鈕時)。
IsMouseOver 觸發 glassCube 的 100% 不透明度：請注意 [Trigger recording is on] (請參閱上圖)。這表示您在啟用錄製時對 glassCube 屬性值所做的任何變更，都會成為 IsMouseOver 為 true 時所進行的動作。錄製時，將 Opacity 的變更為 100%。

您現在已建立第一個屬性觸發程序。請注意，編輯器的 [觸發程序] 面板已記錄 Opacity 變更為100%。

按 F5 以執行應用程式，並將滑鼠指標移至按鈕上方並移開。您應該會在滑鼠停留在按鈕上時看到玻璃層出現，並在指標移開時消失。
IsMouseOver 觸發筆劃值變更：讓我們將其他一些動作與 IsMouseOver 觸發程序產生關聯。繼續進行錄製時，請將選取項目從 [glassCube] 切換為 [outerRectangle]。然後將 [outerRectangle]Stroke 的設定為 "{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" 的自訂運算式。這會將 Stroke 設定為按鈕所使用的一般醒目提示色彩。按 F5 以查看當您將滑鼠移至按鈕上方時的效果。
IsMouseOver 觸發文字模糊效果：讓我們再將一個動作與 IsMouseOver 屬性觸發程序產生關聯。在玻璃出現在按鈕內容上時顯示些許的模糊效果。若要完成這項工作，我們可以將模糊 BitmapEffect 套用至 ContentPresenter (myContentPresenter)。

注意

若要將 [屬性] 面板變回搜尋 BitmapEffect 之前的樣子，請清除 [搜尋] 方塊中的文字。

此時，我們已使用屬性觸發程序搭配數個相關聯的動作，建立滑鼠指標進入並離開按鈕區域時的醒目提示行為。按鈕的另一個典型行為，是在按鈕位於焦點時醒目提示 (就跟按下後相同)。我們可以新增 IsFocused 屬性的另一個屬性觸發程序，以新增這類行為。
建立 IsFocused 的屬性觸發程序：使用與 IsMouseOver 相同的程序 (請參閱本節的第一個步驟)，為 IsFocused 屬性建立另一個屬性觸發程序。在啟用觸發程序錄製時，請將下列動作新增至觸發程序：
- glassCube 獲得 100% 的 Opacity。
- outerRectangle 獲得 "{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" 的 Stroke 自訂運算式值。

在本逐步解說的最後一個步驟中，我們會將動畫新增至按鈕。這些動畫會特別由事件觸發，尤其是 MouseEnter 和 Click 事件。

使用事件觸發程序和動畫來添增互動性

建立 MouseEnter 事件觸發程序：新增全新事件觸發程序，然後選取 [MouseEnter] 作為觸發程序中要使用的事件。
建立動畫時間軸：接下來，將動畫時間軸與 MouseEnter 事件產生關聯。

按下 [確定] 建立新的時間軸之後，[時間軸] 面板隨即出現，而且設計面板中會顯示 [Timeline recording is on]。這表示我們可以開始在時間軸中錄製屬性變更 (動畫屬性變更)。

注意

您可能需要調整視窗和/或面板的大小，才能看到顯示的內容。
建立主要畫面格：若要建立動畫，請選取您想要建立動畫的物件、在時間軸上建立兩個以上的主要畫面格，並針對這些主要畫面格設定您希望動畫用於在兩者之間插補的屬性值。下圖會引導您建立主要畫面格。
在此主要畫面格上縮小 glassCube：在選取第二個主要畫面格時，請使用 [Size Transform]，將glassCube 的大小縮小到其完整大小的 90%。

按 F5 執行應用程式。將滑鼠指標移至按鈕上方。您會注意到玻璃層會在按鈕頂端縮小。
建立另一個事件觸發程序，並將不同的動畫與其產生關聯：讓我們再新增一個動畫。使用與您用來建立先前事件觸發程序動畫的類似程序：
1. 使用 Click 事件建立新的事件觸發程序。
2. 將新的時間軸與 Click 事件產生關聯。
3. 在此時間軸中，建立兩個主要畫面格，一個位於 0.0 秒，另一個位於 0.3 秒。
4. 在 0.3 秒醒目提示主要畫面格時，將旋轉轉換角度設為 360 度。
5. 按 F5 執行應用程式。按一下按鈕。請注意玻璃層的旋轉效果。

結論

您已完成自訂按鈕。您使用了套用至應用程式中所有按鈕的按鈕範本完成了此動作。如果您離開範本編輯模式 (請參閱下圖) 並建立更多按鈕，您會看到其外觀與您的自訂按鈕相似，而非類似於預設按鈕。

按 F5 執行應用程式。按一下按鈕後，您會注意其出現相同的行為。

請記住，在自訂範本時，您將 Fill 的屬性，以及 Stroke 的属性設定為範本背景 ({TemplateBinding Background})。因此，當您設定個別按鈕的背景色彩時，這些個別屬性將使用您設定的背景。請嘗試立即變更背景。下圖中使用了不同的漸層。因此，雖然範本對於按鈕等控制項的整體自訂作業十分有用，但是您仍然可以將具有範本的控制項修改成不同的外觀。

最後，在自訂按鈕範本的過程中，您已瞭解如何在 Microsoft Expression Blend 中執行下列動作：

自訂控制項的外觀。
設定屬性觸發程序。因為屬性觸發程序可用於大多數物件，而不只是控制項，所以非常有用。
設定事件觸發程序。因為事件觸發程序可用於大多數物件，而不只是控制項，所以非常有用。
建立動畫。
其他：建立漸層、新增 BitmapEffects、使用轉換，以及設定物件的基本屬性。

共用方式為