Home > Controls > Simple styles > Create a button using bitmap effects

Create a button by using bitmap effects

In addition to using property triggers to change the appearance of a button depending on user interaction, in Microsoft® Expression Blend™ you can also apply a bitmap effect on each state.

To create bitmap effects on a button

1. Draw a SimpleButton on the artboard in Expression Blend.

   The simple style controls are available from the Simple Styles category of the Controls tab in the Asset Library . After you select a simple style control from the list, you can draw it on the artboard.

2. 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.

   To exit the template-editing mode and return to the scope of your document: click the Scope up button , 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.

3. In the editing scope of the control template, delete the Border child element of the Grid.
4. Double-click the Grid element to make it active so that you can add child elements.
5. Draw a Rectangle into the grid, and then set the Fill property to yellow under Brushes in the Properties panel.
6. Right-click the Rectangle element, point to Order, and then click Send to Back to layer it behind the ContentPresenter element.
7. Round the edges of the Rectangle element, either by using the adorner that appears when you move your mouse pointer over one of the two handles outside the upper left corner of the rectangle, or by using the RadiusX and RadiusY properties under Appearance in the Properties panel.
8. With the Rectangle still selected, locate the BitmapEffect property in the Advanced section under Appearance in the Properties panel. Click the drop-down arrow, and then click Bevel. Leave the BevelWidth property set to 5, but change the other bevel properties until you achieve the effect that you want.
9. Under Triggers in the Interaction panel, click the IsMouseOver = True trigger, to activate trigger recording. In the Properties panel, click the dropdown arrow next to the BitmapEffect property again, click Bevel, and then change the BevelWidth property to 10.
   A new line appears under Properties when active under Triggers, reflecting the property change that will occur when the mouse moves over the button.

   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.

10. Under Triggers in the Interaction panel, click the IsPressed = True trigger to activate trigger recording, and then in the Properties panel, click the dropdown arrow next to the BitmapEffect property again, click Bevel, and then change the BevelWidth property to 2.
    A new line appears under Properties when active under Triggers, reflecting the property change that will occur when the mouse clicks the button.
11. Click Default under Triggers in the Interaction panel, to turn off trigger recording.
12. Test your application (F5) to see the effects.

Bitmaps effects are not hardware accelerated, so it is best to set an explicit value and not try to animate the values using an event trigger and animation timeline.