SimpleButton

The button is a content control, which reacts to a Click event. You can place content in a button in Blend for Visual Studio 2012 by double-clicking the button and then drawing an object into it. If you want to place multiple objects 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:

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

• Border object   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.

• ContentPresenter   Used to display the Content property of the button to which the template is applied. This object must be present to show the content of the button.

Property triggers used

Property triggers in the control template are used to make the control react to property changes. You can click the items in the Triggers 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 object changes color to the MouseOverBrush resource.

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.

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. Blend looks for a layout panel like the Grid control and makes it active by default so that new objects that are added to the artboard end up as child objects 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.

Vedere anche

Attività

Try it: Add animation to a button

Try it: Create a rollover button