SimpleButton

The button is a content control, which reacts to a Click event. You can place content in a button in Microsoft Expression Blend by double-clicking the button and then drawing an element into it. If you want to place multiple elements into the button, you need to first add in a layout panel such as a Grid or Canvas. A button also can display text by default; you can edit the text by right-clicking the button, and then clicking Edit Text.

The artboard view of a SimpleButton control

Breaking down the control template

The SimpleButton control template consists of the following items:

• A Grid layout panel, which is used to hold the multiple child elements within the button. The Grid is also used because it makes it easier for you to add more elements to the template. For example, if the root element was a Border and you tried to add another element, the other element would replace the ContentPresenter element because Border can only have a single child.

• A Border element, which is used because it includes a BorderThickness property that can be template-bound to the BorderThickness property of the button control to which the template is applied.

• A ContentPresenter, which is used to display the Content property of the button to which the template is applied. This element must be present to show the content of the button.

  Objects view: The basic parts (template) of a SimpleButton control

  

Back to top

Property triggers used

Property triggers in the control template are used to make the control react to property changes. You can click the items under Triggers in the Interaction panel to view the properties that are changed when a trigger is active. For example, in the SimpleButton template, when the IsMouseOver property becomes True, the background of the Border element changes color to the MouseOverBrush resource.

Back to top

Brushes used

The following brush resources in the SimpleStyles.xaml resource dictionary are used by the SimpleButton template:

• The Background property is set by using: the NormalBrush when no trigger is active;, the MouseOverBrush when IsMouseOver is True; the PressedBrush when IsPressed is True; and the DisabledBackgroundBrush when is IsEnabled is False.

• The Border property is set by using: the NormalBorderBrush when no trigger is active; the DefaultBorderBrush when IsKeyboardFocused is True; the PressedBorderBrush when IsPressed is True; and the DisabledBorderBrush when IsEnabled is False.

• The Foreground property is set by using the DisabledForegroundBrush when IsEnabled is False.

Back to top

Best practices and design guidelines

• In general, use a Grid control as the root of your template if you expect a designer to add further visual elements to your control. Expression Blend looks for a layout panel like the Grid control and makes it active by default so that new elements that are added to the artboard end up as child elements of the layout panel.

• Property triggers are used to change the look of the control depending on the user action, such as a button click. Property triggers are preferred over event triggers because you need two event triggers (for example, for the MouseDown and MouseUp events) to do the same job as one property trigger (for example, for the IsPressed state). However, event triggers can be used to start an animation timeline for more complicated controls.

• In general, you will want to set a brush or visual change on the IsMouseOver, IsPressed, and IsEnabled (False) states. In addition, you can use the IsKeyboardFocused state that is usually used to display a dotted line around the control.

Back to top

See also

Concepts

Try it: Create a button by using bitmap effects

Try it: Add animation to a button

Try it: Create a rollover button