Button control styling tips
.png "Ee341364.0b2c798e-86c6-4ea2-a8a6-5cf1f12be1e2(en-us,Expression.30).png")
The Button control represents an object that will react to user input from a mouse, keyboard, or other input device, and raise a Click event.
As with all controls, the Button control can be modified to look very different from its default appearance. By default, the Button control looks like the following:
.png "Ee341364.c01e5314-5b29-4283-a483-b0a1cb3b59f6(en-us,Expression.30).png")
Button control properties of interest
The Button control is a content control, so you can display text in the Button control by setting the Content property under Common Properties in the Properties panel.
You can set the ClickMode property to determine when the Click event is fired: when the mouse is clicked or released, or when the pointer hovers over the Button control.
You can set these properties in the following ways:
Set the properties of the object After you draw a Button object on the artboard, you can set the properties of the object directly. If you want several Button controls to use the same values, set these properties in a style.
Set the properties in a style If you set the properties in the style
.png "Ee341364.94fa7fc4-4f3e-4e84-9ba1-287f1b894371(en-us,Expression.30).png")
of the Button object, any Button object that uses that style will use those values. You can overwrite the values for a specific object.For more information, see Create a style.
The Button control changes appearance depending on which state it is in. You can modify the appearance of each state while in template-editing mode by selecting a state in the States panel. For more information, see the states listed in the following tables, and see Defining different visual states for a control.
To specify what happens when the Button control is clicked, drag a behavior onto a Button object or onto an object in the Button template. For more information, see Adding behaviors to objects.
Optionally, you can hook up the Click event to an event handler. For more information, see Writing code that will respond to events.
Parts of the Button template
The Button control has no parts.
States of the Button control
By default, the Button control can be in one of the following four states in the CommonStates state group, which you can view in the States panel when modifying a Button template:
State name |
Description |
|---|---|
Normal |
The appearance of the Button control when there is no interaction with the control. |
MouseOver |
The appearance of the Button control when the user moves the pointer over it. |
Pressed |
The appearance of the Button control when the user clicks it, or when the control has focus and the user presses ENTER or SPACEBAR. |
Disabled |
The appearance of the Button control when the IsEnabled property is set to False. |
The Button control can also be in one of the following two states of the FocusStates state group:
State name |
Description |
|---|---|
Unfocused |
The appearance of the Button control when it does not have keyboard focus. |
Focused |
The appearance of the Button control when it has keyboard focus. For example, a user might press the TAB key to cycle through the objects in your application until keyboard focus is on the Button control. |
Tip
A state group contains the visual states that are part of the same logical category, and that cannot be displayed at the same time. For example, the CommonStates group includes states that relate to user interaction with an input device such as the mouse. Only one state in a state group can be displayed at a time, but a state from one group can be displayed at the same time as a state in another state group.
When you select a state, state recording is turned on, and any changes that you make will be recorded for that state. To turn off state recording, click the recording button .png "Ee341364.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(en-us,Expression.30).png")
on the artboard, or select Base in the States panel.
To convert objects into a Button control
Because the Button control has no parts, you can convert any objects into a Button control.
Group your objects into a layout panel, select the layout panel, and then, on the Tools menu, click Make Into Control.
In the dialog box that appears, select Button, name your template, and select the location where the template will be stored.
For information about locations, see Create a resource.
After you click OK, Microsoft Expression Blend enters template-editing mode and displays the objects that make up your Button control.
If the group of original objects included a TextBlock object
.png "Ee341364.42165963-00f7-4a33-abcd-b0849edebada(en-us,Expression.30).png")
object, the TextBlock object is converted to a ContentPresenter object .png "Ee341364.51a0c06c-d801-4133-8caf-cf1856a8dfc4(en-us,Expression.30).png")
in the Button control template. This enables your Button object to display text. If your original objects did not include a TextBlock object, a ContentPresenter object is automatically added to the template. If you don't need to display the text in the Content property of the Button object to which this template will be applied, you can delete the ContentPresenter object.You can continue to modify your template in this mode. For example, add or modify objects, or select a state in the States panel to modify the appearance of your template in that state.
Consider binding some of the brush properties of objects in your template to the following properties of the Button object that will eventually use your template:
Background
BorderBrush
Foreground
BorderThickness
For more information, see Carry object properties through to the template.
To exit template-editing mode, click [Button] in the breadcrumb bar at the top of the artboard, or click Return scope to
.png "Ee341364.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(en-us,Expression.30).png")
in the Objects and Timeline panel.
For information about applying your new Button template to other Button objects, see Apply or remove a resource.
References
You can find detailed information about the properties and events of the Microsoft Silverlight Button control at the Silverlight Control Gallery on MSDN.
See also
Tasks
Create a control from existing objects