試試看：使用點陣圖效果建立按鈕

除了使用屬性觸發程序來根據使用者互動以變更按鈕的外觀以外，在 Microsoft Expression Blend 中，您還可以在每一個狀態上套用點陣圖效果。

在按鈕上建立點陣圖效果

1. 在 Expression Blend 的畫板上繪製一個 SimpleButton。

   秘訣：
   在 [資產庫] 中，可以從 [控制項] 索引標籤的 [簡單樣式] 類別中取得簡單樣式 (Simple Styles) 控制項。從清單中選取簡單樣式 (Simple Styles) 控制項之後，就可以在畫板上繪製該控制項。

2. 以滑鼠右鍵按一下 [物件與時間軸] 下的按鈕，指向 [編輯控制項組件 (範本)]，然後按一下 [編輯範本]。若您不想變更 SimpleStyles.xaml 資源字典，可以按一下 [編輯複本] (而非 [編輯範本]) 以建立新範本，並儲存至文件中。如需有關建立複本的詳細資訊，請參閱建立資源。

   秘訣：
   若要結束範本編輯模式並返回您的文件範圍，請在 [互動] 面板中的元素樹狀目錄上方，按一下 [選定範圍] 按鈕 。 若要返回現有範本的範本編輯模式，請在 [物件與時間軸] 下，以滑鼠右鍵按一下要編輯範本的元素，指向 [編輯控制項組件 (範本)]，然後按一下 [編輯範本]。

3. 在控制項範本的編輯範圍中，刪除 [格線] 的 [框線] 子元素。

4. 按兩下 [格線] 元素，使其成為使用中狀態，以便新增子元素。

5. 在格線中繪製 [矩形]，然後在 [屬性] 面板的 [筆刷] 下將 [Fill] 屬性設為黃色。

6. 以滑鼠右鍵按一下 [矩形] 元素，指向 [順序]，然後按一下 [移到最下層]，將矩形元素放在 [ContentPresenter] 元素的後一層。

7. 使用提示 (當滑鼠指標移至矩形左上角之外的兩個控點之一時出現)，或在 [屬性] 面板的 [外觀] 下使用 [RadiusX] 和 [RadiusY] 屬性，將 [矩形] 元素變成圓角。

8. 在仍選取 [矩形] 的情況下，在 [屬性] 面板中 [外觀] 下的 [進階] 區段 中尋找 [BitmapEffect] 屬性。按一下下拉箭號，然後按一下 [斜面]。讓 [BevelWidth] 屬性保持為 5，但變更其他斜面屬性，直到達成您想要的效果為止。

9. 在 [互動] 面板的 [觸發程序] 下，按一下 [IsMouseOver = True] 觸發程序來啟用觸發程序錄製功能。在 [屬性] 面板中，同樣地按一下 [BitmapEffect] 屬性旁邊的下拉箭頭，再按一下 [斜面]，然後將 [BevelWidth] 屬性變更為 10。

   [觸發程序] 的 [使用時的屬性] 下會出現新行，反映當滑鼠移至按鈕上方時會發生的屬性變更。

   秘訣：
   您可能需要調整 [互動] 面板的視窗，才能看到 [觸發程序] 下方所有的觸發程序和動作。請使用滑鼠來調整視窗的大小。

10. 在 [互動] 面板的 [觸發程序] 下，按一下 [IsPressed = True] 觸發程序來啟用觸發程序錄製功能，然後在 [屬性] 面板中，同樣地按一下 [BitmapEffect] 屬性旁邊的下拉箭號，再按一下 [斜面]，然後將 [BevelWidth] 屬性變更為 2。

    [觸發程序] 的 [使用時的屬性] 下會出現新行，反映當滑鼠按一下按鈕時會發生的屬性變更。

11. 在 [互動] 面板的 [觸發程序] 下按一下 [預設]，關閉觸發程序錄製功能。

12. 測試您的應用程式 (F5) 以查看效果。

    秘訣：
    點陣圖效果不是硬體加速，因此最好設定外顯值，而不要嘗試使用事件觸發程序和動畫時間軸將值製作成動畫。

請參閱

概念

SimpleButton

新增或移除觸發程序

觸發程序概觀

新增點陣圖效果至物件