Try it: Create a rollover button
.png "This page applies to WPF projects only")
A rollover effect can be created in a button template by changing the appearance of your button depending on user interaction. As an alternative to triggering an animation timeline or triggering property changes to produce a rollover effect, you can use the following procedure to create multiple Grid panels to represent each state of the button, and then toggle the Visibility properties of each Grid panel.
To create a rollover effect on a button
Draw a SimpleButton on the artboard in Microsoft Expression Blend.
Tip
The simple style controls are available from the Simple Styles category of the Controls tab in the Asset Library
.png "Cc294737.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 "Cc294737.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.
From the Toolbar, add three Grid controls
.png "Cc294737.a87ee957-7fbf-4135-a6ab-6de7e63160aa(en-us,Expression.10).png")
into the Grid of the template. You can add them quickly by double-clicking the Grid icon in the Toolbox, then right-clicking each Grid control under Objects and Timeline, pointing to Auto Size, and then clicking Fill.Right-click the ContentPresenter element, point to Order, and then click Bring to Front to layer the ContentPresenter in front of the new Grid objects.
Under Objects and Timeline, rename the new grid objects to "Default", "Pressed", and "MouseOver" respectively, by right-clicking each object and then clicking Rename.
To set up the trigger behavior, you need to make only one grid object visible per trigger. For example, with Default selected under Triggers in the Interaction panel, click the Pressed and MouseOver grid objects while holding down the CTRL key, to select those objects. Then, under Appearance in the Properties panel, set the Visibility property to Hidden.
Click IsMouseOver = True under Triggers in the Interaction panel, select the Pressed and Default grid objects, and then under Appearance in the Properties panel, set the Visibility property to Hidden.
Finally, with IsPressed = True selected under Triggers, select the MouseOver and Default grid objects, and then under Appearance in the Properties panel, set the Visibility property to Hidden.
You can now design each grid object the way that you want it to appear under the different conditions. You can use drawing tools and animation timelines to create unique behavior for your button. To design one of the grid objects without the others being visible, you can click the Hide/Show
.png "Cc294737.3df73f86-a06e-4df8-b696-261c23fac3cc(en-us,Expression.10).png")
button beside the other grid objects under Objects and Timeline.Test your application (F5) to see the effects.