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

發行項
10/11/2017

本頁僅適用 WPF 專案

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

將按鈕製作成動畫

在 Expression Blend 的畫板上繪製 SimpleButton 物件。

秘訣：
在 [資產] 面板的 [樣式] 類別中，[簡單樣式] 下提供可用的簡單樣式控制項。從清單中選取簡單樣式控制項之後，就可以在畫板上繪製該控制項。

以滑鼠右鍵按一下 [物件與時間軸] 面板中的按鈕，指向 [編輯範本]，然後按一下 [編輯目前的項目]。若不想變更 SimpleStyles.xaml 資源字典，您可以按一下 [編輯複本] 代替 [編輯目前的項目] 來建立新範本並儲存至文件中。

如需有關建立複本的詳細資訊，請參閱建立資源。

秘訣：
若要結束範本編輯模式並返回您的文件範圍，請在 [物件與時間軸] 面板中的物件樹狀目錄上方，按一下 [將範圍傳回] 。若要返回現有範本的範本編輯模式，請在 [物件與時間軸] 面板中，以滑鼠右鍵按一下要編輯範本的物件，指向 [編輯範本]，然後按一下 [編輯目前的項目]。

若要結束範本編輯模式並返回您的文件範圍，請在 [物件與時間軸] 面板中的物件樹狀目錄上方，按一下 [將範圍傳回] Cc294783.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(zh-tw,Expression.40).png 。

若要返回現有範本的範本編輯模式，請在 [物件與時間軸] 面板中，以滑鼠右鍵按一下要編輯範本的物件，指向 [編輯範本]，然後按一下 [編輯目前的項目]。

在控制項範本的編輯範圍中，刪除 Grid 的 Border 子物件。
按兩下 Grid 物件，使其成為使用中狀態，以便新增子物件。
在格線中繪製 Rectangle。
以滑鼠右鍵按一下 Rectangle 物件，指向 [順序]，然後按一下 [移到最下層]，將該物件放在 ContentPresenter 物件的後一層。

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

秘訣：
原始範本的 Border 子物件使用範本繫結，將範本的 Fill 屬性繫結至套用此範本之控制項的 Background 屬性。您可以使用範本繫結將物件屬性帶到範本中，因而可讓您建立具有不同背景色彩，但仍然使用相同範本的多個按鈕。然而，從範本繫結屬性至特定色彩的過程無法製成動畫，這也是在範本中為 Fill 屬性設定預設色彩的原因。

原始範本的 Border 子物件使用範本繫結，將範本的 Fill 屬性繫結至套用此範本之控制項的 Background 屬性。您可以使用範本繫結將物件屬性帶到範本中，因而可讓您建立具有不同背景色彩，但仍然使用相同範本的多個按鈕。然而，從範本繫結屬性至特定色彩的過程無法製成動畫，這也是在範本中為 Fill 屬性設定預設色彩的原因。

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

秘訣：

您可能需要調整 [觸發程序] 面板中的視窗，才能看到所有的觸發程序和動作。請使用滑鼠來調整視窗的大小。
在 [物件與時間軸] 面板中，將播放點移至 1 秒，然後在 [屬性] 面板中的 [筆刷] 下，為 Fill 屬性設定新的值。

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

共用方式為

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

將按鈕製作成動畫

另請參閱

工作

概念

其他資源