Try it: Style a button by using effects
.png "This page applies to WPF projects only")
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 an effect to each state.
To create effects on a button
Draw a SimpleButton object on the artboard in Expression Blend.
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.
Right-click the button 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 a resource.
Tip
To exit template-editing mode and return to the scope of your document: click Return scope to
.png "Cc295324.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(en-us,Expression.30).png")
, 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.
In the editing scope of the control template, delete the Border child object of the Grid object.
Click the Grid object to make it active so that you can add child objects.
Draw a Rectangle object in the grid, and then set the Fill property to yellow under Brushes in the Properties panel.
Right-click the Rectangle object, point to Order, and then click Send to Back to layer it behind the ContentPresenter object.
Round the edges of the Rectangle object, either by using the adorner
.png "Cc295324.8ff4c5e0-3b7f-49d7-97cb-ad373c3a7fe7(en-us,Expression.30).png")
that appears when you move your 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.From the Effects category of the Assets panel, drag the DropShadowEffect object onto the Rectangle object.
A drop shadow is added to the Rectangle object as a child object.
With DropShadowEffect selected in the Objects and Timeline panel, adjust the properties of the effect in the Properties panel. Set the ShadowDepth property to 20.
In the Triggers panel, click the IsMouseOver = True trigger to activate trigger recording. In the Properties panel, set the ShadowDepth property to 25.
A new line appears under Properties when active in the Triggers panel, reflecting the property change that will occur when the mouse moves over the button.
Tip
You might have to adjust the windows of the Triggers panel to see all the triggers and actions. Use your mouse to resize the windows.
In the Triggers panel, click the IsPressed = True trigger to activate trigger recording. In the Properties panel, set the ShadowDepth property to 10.
A new line appears under Properties when active in the Triggers panel, reflecting the property change that will occur when the button is clicked in the running application.
Click Default in the Triggers panel to turn off trigger recording.
Test your application (F5) to see the effect in action.