动手试验：向按钮添加动画
.png "此页仅适用于 WPF 项目")
“SimpleButton”不会动态显示其状态的改变，而是在状态改变时设置画笔资源。在 Microsoft Expression Blend 中，不能从画笔资源动态变化到颜色。以下操作步骤显示了一种替代方式，该方式使用属性触发器来开始动画时间线。
动态显示按钮
在 Expression Blend 的美工板上绘制“SimpleButton”。
.gif "提示")
提示：“资源库”
.png "Cc294783.0224cabd-5da1-4e01-bddd-4a647401a098(zh-cn,Expression.10).png")
中的“控件”选项卡的“简单样式”类别中提供了简单样式控件。从列表中选择简单样式控件后，即可在美工板上进行绘制。在“对象和时间线”下右键单击该按钮，指向“编辑控件部件(模板)”，然后单击“编辑模板”。如果不希望更改 SimpleStyles.xaml 资源字典，则可以单击“编辑副本”而不是“编辑模板”，以创建新模板并将其保存到文档中。有关创建副本的详细信息，请参阅创建资源。
提示：若要退出模板编辑模式并返回到文档范围：请单击位于“交互”面板中的元素树上方的“范围上移”
.png "Cc294783.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(zh-cn,Expression.10).png")
按钮。若要返回到现有模板的模板编辑模式：请在“对象和时间线”下，右键单击要编辑其模板的元素，指向“编辑控件部件(模板)”，然后单击“编辑模板”。
在控件模板的编辑范围中，删除“Grid”的“Border”子元素。
双击“Grid”元素以将其激活，以便您可以添加子元素。
在网格中绘制“Rectangle”
.png "Cc294783.ae750268-92e8-403a-9e07-b662da4e9e1e(zh-cn,Expression.10).png")
。右键单击该“Rectangle”元素，指向“排序”，然后单击“置于底层”，将其放到“ContentPresenter”元素之后。
在“属性”面板的“画笔”下，为该矩形的“Fill”属性设置新值。这将是按钮的默认颜色。
提示：原始模板的“Border”子元素使用模板绑定，将该模板的“Fill”属性绑定到应用该模板的控件的“Background”属性。模板绑定使用户能够在模板中使用为控件设置的某些属性，并因而使用户能够创建多个具有不同背景颜色但仍使用相同模板的按钮。但是，不能从模板绑定属性动态变化到特定颜色，这就是要在模板中为“Fill”属性设置默认颜色的原因。
在“交互”面板中的“触发器”下，单击“IsMouseOver = True”触发器以激活触发器记录操作。然后在“激活时的操作”旁边单击“添加新操作”
.png "Cc294783.d02551d0-d56a-4ca3-9d5f-58fbc6bda0c3(zh-cn,Expression.10).png")
按钮以添加动画时间线。如果还没有要在鼠标移到按钮上时触发的时间线，将显示“需要时间线”窗口。单击“确定”以创建新的时间线并开始记录。提示：可能必须调整“交互”面板的窗口，才能看到“触发器”下的所有触发器和操作。请使用鼠标调整窗口的大小。
在“对象和时间线”下，将播放指针
.png "Cc294783.5626c9eb-40bb-450a-9ca1-3678e5abe429(zh-cn,Expression.10).png")
移动到 1 秒处，然后在“属性”面板的“画笔”下，设置新的“Fill”属性值。更改“Fill”属性之后，时间线中会立即显示关键帧
.png "Cc294783.80da70bb-e635-42e8-b26d-f90453096e21(zh-cn,Expression.10).png")
。无需在 0 秒处设置关键帧。当鼠标指针移到按钮上时，该时间线将从前一填充动态变化为 1 秒处设置的填充。在“交互”面板中的“触发器”下，再次单击“IsMouseOver = True”触发器以退出动画时间线，并返回到触发器的记录模式。单击“激活时的操作”旁边的“添加新操作”
按钮。创建或选择将在鼠标指针离开按钮时运行的动画时间线。例如，可以使用上一个时间线，但为该时间线选择“Stop”方法。如果需要，可以在“触发器”下为其他状态创建动画时间线。
测试应用程序 (F5) 以查看效果。