动手试验：向按钮添加动画

项目
10/11/2017

This page applies to WPF projects only

“SimpleButton”样式不会动态显示其状态的改变，而是在状态改变时设置画笔资源。在 Microsoft Expression Blend 中，不能从画笔资源动态变化到颜色。以下操作步骤显示了一种替代方式，该方式使用属性触发器来开始动画时间线。

动态显示按钮

在 Expression Blend 的美工板上绘制“SimpleButton”对象。

提示：

“资产”面板的“样式”类别中的“简单样式”下提供了简单样式控件。从列表中选择简单样式控件后，即可在美工板上进行绘制。

提示：
“资产”面板的“样式”类别中的“简单样式”下提供了简单样式控件。从列表中选择简单样式控件后，即可在美工板上进行绘制。

在“对象和时间线”面板中右键单击按钮，指向“编辑模板”，然后单击“编辑当前模板”。如果不希望更改 SimpleStyles.xaml 资源字典，则可以单击“编辑副本”（而不是“编辑当前模板”），以创建新模板并将其保存在文档中。

有关创建副本的详细信息，请参阅创建资源。

提示：
若要退出模板编辑模式并返回到文档范围，请单击位于“对象和时间线”面板中对象树上方的“范围上移”。若要返回到现有模板的模板编辑模式，请在“对象和时间线”面板中，右键单击要编辑其模板的对象，指向“编辑模板”，然后单击“编辑当前模板”。

若要退出模板编辑模式并返回到文档范围，请单击位于“对象和时间线”面板中对象树上方的“范围上移” Cc294783.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(ZH-CN,Expression.30).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) 以查看效果。