試試看：將動畫新增至按鈕

[SimpleButton] 並不會以動畫顯示其本身的狀態。而是在狀態變更時設定筆刷資源。在 Microsoft Expression Blend 中，從筆刷資源到色彩的過程無法製成動畫。下列程序會示範另一種做法，也就是使用屬性觸發程序來啟動動畫時間軸。

將按鈕製作成動畫

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

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

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

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

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

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

5. 將 [矩形] 拖曳至格線中。

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

7. 在 [屬性] 面板的 [筆刷] 下，為矩形的 [Fill] 屬性設定新的值。這將會成為按鈕的預設色彩。

   秘訣：
   原始範本的 [框線] 子元素使用範本繫結，將範本的 [Fill] 屬性繫結至套用此範本之控制項的 [Background] 屬性。範本繫結可讓您在範本中使用控制項上所設定的一些屬性，建立具有多個不同背景色彩、但仍使用相同範本的按鈕。然而，從範本繫結屬性至特定色彩的過程無法製成動畫，這也是我們在範本中為 [Fill] 屬性設定預設色彩的原因。

8. 在 [互動] 面板的 [觸發程序] 下按一下 [IsMouseOver = True] 觸發程序，以啟用觸發程序錄製功能。然後，在 [啟用時的動作] 旁，按一下 [新增動作] 按鈕，以新增動畫時間軸。若滑鼠從按鈕上移過時，您尚無要觸發的時間軸，則螢幕會顯示 [需要時間軸] 視窗。按一下 [確定]，以建立新的時間軸並開始錄製。

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

9. 在 [物件與時間軸] 下，將播放點 移至 1 秒，然後在 [屬性] 面板中的 [筆刷] 下，為 [Fill] 屬性設定新的值。

   [Fill] 屬性變更後，時間軸上會立刻出現一個主要畫面格 。您不必在 0 秒上設定主要畫面格。滑鼠指標移過按鈕時，時間軸會將上一個填滿到 1 秒上所設定的填滿製作成動畫。

10. 在 [互動] 面板的 [觸發程序] 下，再按一下 [IsMouseOver = True] 觸發程序，以結束動畫時間軸並返回觸發程序的錄製模式。按一下 [停用時的動作] 旁的 [新增動作] 按鈕。建立或選取滑鼠指標移開按鈕時將執行的動畫時間軸。例如，您可以使用上一個時間軸，但對時間軸選取 [停止] 方法。

11. 如有需要，您可以在 [觸發程序] 下為其他狀態建立動畫時間軸。

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

請參閱

概念

SimpleButton

新增或移除觸發程序

觸發程序概觀

建立簡單動畫