將動畫新增至按鈕

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

將按鈕製作成動畫

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

在 [資產庫]

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

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

若要結束範本編輯模式並返回您的文件範圍，請在 [互動] 面板中的元素樹狀目錄上方按一下 [選定範圍] 按鈕

。

若要返回現有範本的範本編輯模式，請在 [物件與時間軸] 下，以滑鼠右鍵按一下您要編輯其範本的元素，指向 [編輯控制項組件 (範本)]，然後按一下 [編輯範本]。

在控制項範本的編輯範圍中，刪除 [格線] 的 [框線] 子元素。
按兩下 [Grid] 元素，使其成為使用中狀態，這樣就可以新增子元素。
在格線中繪製 [矩形] 。
以滑鼠右鍵按一下 [矩形] 元素，指向 [順序]，然後按一下 [移到最下層]，將矩形元素放在 [ContentPresenter] 元素的後一層。

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

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

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

您可能需要調整 [互動] 面板的視窗，才能看到 [觸發程序] 下方所有的觸發程序和動作。請使用滑鼠來調整視窗的大小。
在 [物件與時間軸] 下，將磁頭移至 1 秒，然後在 [屬性] 面板中的 [筆刷] 下為 [Fill] 屬性設定新的值。
[Fill] 屬性變更後，時間軸上會立刻出現一個主要畫面格。您不必在 0 秒上設定主要畫面格。滑鼠指標移過按鈕時，時間軸會將上一個填滿到 1 秒上所設定的填滿製作成動畫。
在 [互動] 面板的 [觸發程序] 下，再按一下 IsMouseOver = True 觸發程序，以結束動畫時間軸並返回觸發程序的錄製模式。按一下 [停用時的動作] 旁的 [新增動作] 按鈕。建立或選取滑鼠指標移開按鈕時將執行的動畫時間軸。例如，您可以使用上一個時間軸，但對時間軸選取 [停止] 方法。
如有需要，可以在 [觸發程序] 下為其他狀態建立動畫時間軸。
測試您的應用程式 (F5) 以查看效果。