Try it: Create a rollover button

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

1. Draw a SimpleButton on the artboard.

   Tip

   The simple style controls are available under Simple Styles in the Styles category of the Assets panel . After you select a simple style control from the list, you can draw it on the artboard.

2. Right-click the Button object in the Objects and Timeline panel, point to Edit Template, and then click Edit Current. If you do not want to change the SimpleStyles.xaml resource dictionary, you can click Edit a Copy instead of Edit Current, to create a new template and save it in the document.

   For more information about creating a copy, see Create or modify a template.

   Tip

   To exit the template-editing mode and return to the scope of your document: click Return scope to , which is above the object tree in the Objects and Timeline panel.

   To return to template-editing mode for an existing template: in the Objects and Timeline panel, right-click the object whose template you want to edit, point to Edit Template, and then click Edit Current.

3. In the editing scope of the control template, delete the Border child object of the Grid.

4. Click the Grid object to make it active so that you can add child objects.

5. From the Toolbar, add three Grid controls  to the root Grid object of the template. To make the new Grid objects fill the parent Grid object, select them, point to Auto Size on the Object menu, and then click Fill.

6. Right-click the ContentPresenter object, point to Order, and then click Bring to Front to layer the ContentPresenter object in front of the new Grid objects.

7. In the Objects and Timeline panel, rename the new grid objects to "Default", "Pressed", and "MouseOver," respectively, by right-clicking each object and then clicking Rename.

8. To set up the trigger behavior, you have to make only one grid object visible per trigger. For example, with Default selected in the Triggers 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.

9. Click IsMouseOver = True in the Triggers panel, select the Pressed and Default grid objects, and then under Appearance in the Properties panel, set the Visibility property to Hidden. Select the MouseOver grid object, and set the Visibility property to Visible.

10. 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. Select the Pressed grid object, and set the Visibility property to Visible.

11. You can now design each grid object the way that you want it to appear under the different conditions selected in the Triggers panel.

    You can use the drawing tools and animation timelines to create unique behavior for your button.

    For more information, see Drawing objects and Animating objects.

    To design one of the grid objects without the others being visible, you can click Hide/Show beside the other grid objects in the Objects and Timeline panel.

12. Test your application (F5) to see the effects.

See Also

Concepts

SimpleButton