Try it: Add animation to a button
.png "This page applies to WPF projects only")
The SimpleButton does not animate the changes in its state. Instead, it sets a brush resource when there are state changes. In Microsoft Expression Blend, you cannot animate from a brush resource to a color. The following procedure shows you an alternative, by using property triggers to start animation timelines.
To animate a button
Draw a SimpleButton on the artboard of Expression Blend.
Tip
The simple style controls are available from the Simple Styles category of the Controls tab in the Asset Library
.png "Cc294783.0224cabd-5da1-4e01-bddd-4a647401a098(en-us,Expression.10).png")
. After you select a simple style control from the list, you can draw it on the artboard.Right-click the button under Objects and Timeline, point to Edit Control Parts (Template), and then click Edit Template. If you do not want to change the SimpleStyles.xaml resource dictionary, you can click Edit a Copy instead of Edit Template, to create a new template and save it in the document. For more information about creating a copy, see Create a resource.
Tip
To exit the template-editing mode and return to the scope of your document: click the Scope up button
.png "Cc294783.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(en-us,Expression.10).png")
, which is above the element tree in the Interaction panel.To return to template editing mode for an existing template: under Objects and Timeline, right-click the element whose template you want to edit, point to Edit Control Parts (Template), and then click Edit Template.
In the editing scope of the control template, delete the Border child element of the Grid.
Double-click the Grid element to make it active, so that you can add child elements.
Draw a Rectangle
.png "Cc294783.ae750268-92e8-403a-9e07-b662da4e9e1e(en-us,Expression.10).png")
into the grid.Right-click the Rectangle element, point to Order, and then click Send to Back to layer it behind the ContentPresenter element.
Set a new value for the Fill property of the rectangle under Brushes in the Properties panel. This will be the default color of your button.
Tip
The Border child element of the original template used template binding to bind the Fill property of the template to the Background property of the control to which the template is applied. Template binding lets you use in your template some of the properties that are set on the control, and thus lets you create multiple buttons that have different background colors but still use the same template. However, you cannot animate from a template bound property to a specific color, which is why we set a default color for the Fill property in the template.
Under Triggers in the Interaction panel, click the IsMouseOver = True trigger to activate trigger recording. Then, beside Actions when activating, click the Add new action
.png "Cc294783.d02551d0-d56a-4ca3-9d5f-58fbc6bda0c3(en-us,Expression.10).png")
button to add an animation timeline. If you do not already have a timeline that you want to trigger when the mouse moves over the button, a Timeline Needed window will appear. Click OK to create a new timeline and to begin recording.Tip
You might have to adjust the windows of the Interaction panel to see all of the triggers and actions under Triggers. Use your mouse to resize the windows.
Under Objects and Timeline, move the playhead
.png "Cc294783.5626c9eb-40bb-450a-9ca1-3678e5abe429(en-us,Expression.10).png")
to 1 second, and then set a new value for the Fill property under Brushes in the Properties panel.As soon as you change the Fill property, a keyframe
.png "Cc294783.80da70bb-e635-42e8-b26d-f90453096e21(en-us,Expression.10).png")
appears on the timeline. You do not need to set a keyframe at 0 seconds. The timeline will animate from the previous fill to the fill that is set at 1 second, when the mouse pointer moves over the button.Under Triggers in the Interaction panel, click the IsMouseOver = True trigger again to exit the animation timeline and return to the recording mode for the trigger. Click the Add new action
button beside Actions when deactivating. Create or select the animation timeline that will run when the mouse pointer moves away from the button. For example, you could use the previous timeline, but select the Stop method for the timeline.If you like, you can create animation timelines for other states under Triggers.
Test your application (F5) to see the effects.