Share via

Button control styling tips

  • Article

0b2c798e-86c6-4ea2-a8a6-5cf1f12be1e2

You can use the built-in Button control template to create a custom Button template. By default, the Button control looks like the following:

c01e5314-5b29-4283-a483-b0a1cb3b59f6

States of the Button control

You can view the possible states of the Button control in the States panel when you are modifying a Button template. By default, the Button control can be in one of the following four states in the CommonStates state group:

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 Record mode indicator 0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc on the artboard, or select Base in the States panel.

For more information, see Defining different visual states for a control.

Template-binding

You can template-bind the Background, BorderBrush, Foreground, BorderThickness, or Padding properties. For more information, see Carry object properties through to the template.

To convert text into a Button control

The following images are a design comprehensive (comp) of a button created that includes Normal, MouseOver, Pressed, Disabled, and Focused states:

Normal

Button in Normal state

MouseOver

Button in MouseOver state

Pressed

Button in Pressed state

Disabled

Button in Disabled state

Focused

Button in Focused state

Note

It is important to note that the preceding graphics are not yet Button controls, but artwork that that can be converted into Button controls.

The following procedure uses the XAML code in step 2 of the following procedure, which corresponds to the Normal state in the preceding graphics.

Tip

Click Split View to see the changes in both Design view and Code view as you follow this procedure.

  1. Open a new Microsoft Silverlight project. In Code view, locate the following code, and then delete the closing slash mark (/).

    <Grid x:Name="LayoutRoot" Background="White"/>

  2. Copy and then paste the following code into your new project, after the code that you located in step 1.

    <Grid MinWidth="79" MinHeight="20" HorizontalAlignment="Center" VerticalAlignment="Center">
   <Rectangle Fill="#FF3D3D3D" Stroke="#FF3D3D3D" RadiusX="3" RadiusY="3"/>
   <TextBlock Foreground="LightGray" Text="OK" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>

  3. Add a closing Grid tag (</Grid>) after the code that you just pasted.

  4. In the Objects and Timeline panel, right-click Grid, and then click Make Into Control. In the Make Into Control dialog box, click Button, and then click OK.

    In Code view, note that the code that you pasted in the preceding step has been replaced with the code for a new Button control. In addition, Blend for Visual Studio 2012 turned the Button control into a template for a new Button style and applied that template to Button.

    The TextBlock in the comp has a light gray foreground. The new Button style also has a light gray foreground. OK is the textual content for the preceding button and for the Button control, and the TextBlock in the preceding code has been replaced with a ContentPresenter with the same properties as the original TextBlock.

  5. To add states to the Button control, follow these steps:

    1. In the Objects and Timeline panel, click Rectangle.

    2. In the States panel, click MouseOver.

    3. In the Properties panel, set Fill and Stroke to #FF808080.

    4. Return to the States panel, and then click Base to end state recording.

  6. To apply the same properties to the Pressed state, in the States panel, right-click MouseOver, click Copy State To, and then click Pressed.

  7. To offset the button text when the button is pressed, follow these steps:

    1. In the States panel, click Pressed.

    2. In the Objects and Timeline panel, click Content Presenter.

    3. In the Properties panel, on the Translate tab in the Transform category, set X and Y to 1.

    4. Return to the States panel, and then click Base to end state recording.

  8. In the States panel, click Normal, click Add Transition, and then click Normal to MouseOver. In the Transition Duration box, type .2, and then click Base.

  9. The comp includes a blue rectangle around the button when in the Focused state. To create the rectangle, add a new Rectangle object with the Focused state selected. This is called "drawing into state," meaning that the new object is visible only in the state into which you drew the object. To create the rectangle in the Focused state, in the States panel, click Focused, and then double-click the Rectangle tool in the Tools pane to create the new Rectangle object.

  10. The next step is to set the properties of the new rectangle. The properties have to be changed in Base, not in the Focused state. However, the rectangle is currently transparent, and won't be visible in Base. Click the Record mode indicator 0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc to make the rectangle visible. Note that the new rectangle (rectangle1) is still selected in the Objects and Timeline panel. In the Properties panel, set the following properties for rectangle1:

    • Fill   Set to No brush.

    • Stroke color   Set to #FF00C0FF.

    • RadiusX   Set to 2.

    • RadiusY   Set to 2.

    • Margin   Set Left to 1, Right to 1, Top to 1, and Bottom to 1.

  11. Optionally, if you want to add more interactivity to the rectangle while the button is in the Focused state, you can create a steady-state animation by doing the following. Otherwise, skip to step 12.

    1. In the States panel, select the Focused state.

    2. In the Objects and Timeline panel, click the Show Timeline button.

    3. Drag the keyframe to the 2-second mark, and then move the timeline playhead to 2.2 seconds.

    4. In the States panel, select rectangle1.

    5. On the Appearances tab in the Properties panel, set Opacity to 0.

    6. In the Objects and Timeline panel, move the timeline playhead back to 0 seconds, and then select rectangle1. In the Properties panel, on the Scale tab, set X and Y to 5.

    7. In the Objects and Timeline panel, click the keyframe at 2. In the Properties panel, in the Easing category, set the EasingFunction to Quartic Out.

    8. In the Objects and Timeline panel, just underneath the tab, click the state name (in this case, Focused). In the Properties panel, on the Common Properties tab, set RepeatBehavior to Forever.

  12. Build your project (Ctrl+Shift+B), and then test your project by pressing F5.

To convert objects into a Button control

The following images are a comp of a button created by a designer that includes Normal, MouseOver, Pressed, Disabled, and Focused states:

Normal

Button graphic Normal

MouseOver

Button graphic MouseOver

Pressed

Button graphic Pressed

Disabled

Button graphic Disabled

Focused

Button graphic Focused

Note

It is important to note that the preceding graphics are not yet Button controls, but artwork that can be converted into Button controls.

The following procedure uses the XAML code in step 2 of the following procedure, which corresponds to the Normal state in the preceding graphics.

Tip

Click Split View to see the changes in both Design view and Code view as you follow this procedure.

  1. Open a new Microsoft Silverlight project. In Code view, locate the following code, and then delete the closing slash mark (/).

    <Grid x:Name="LayoutRoot" Background="White"/>

  2. Copy and then paste the following code into your new project, after the code that you located in step 1.

    <Grid MinWidth="79" MinHeight="20" HorizontalAlignment="Center" VerticalAlignment="Center">
   <Rectangle Fill="#FF3D3D3D" Stroke="#FF3D3D3D" RadiusX="3" RadiusY="3"/>
   <TextBlock Foreground="LightGray" Text="OK" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>

  3. Add a closing Grid tag (</Grid>) after the code that you just pasted.

  4. In the Objects and Timeline panel, right-click Grid, and then click Make Into Control. In the Make Into Control dialog box, click Button, and then click OK.

    In Code view, note that the code that you pasted in the preceding step has been replaced with the code for a new Button control. In addition, Blend turned the Button control into a template for a new Button style and applied that template to Button.

  5. In the Objects and Timeline panel, right-click Content, and then click Cut.

  6. Return scope to UserControl, right-click UserControl, and then click Paste.

  7. To add states to the Button control, follow these steps:

    1. In the Objects and Timeline panel, click Rectangle.

    2. In the States panel, click MouseOver.

    3. In the Properties panel, set Fill and Stroke to #FF808080.

    4. Return to the States panel, and then click Base to end state recording.

  8. To apply the same properties to the Pressed state, in the States panel, right-click MouseOver, click Copy State To, and then click Pressed.

  9. To offset the button text when the button is pressed, follow these steps:

    1. In the States panel, click Pressed.

    2. In the Objects and Timeline panel, click Content Presenter.

    3. In the Properties panel, on the Translate tab, in the Transform category, set X and Y to 1.

    4. Return to the States panel, and then click Base to end state recording.

  10. In the States panel, click Normal, click Add Transition, and then click Normal to MouseOver.

  11. In the Transition Duration box, type .2, and then click Base.

    The comp includes a blue rectangle around the button when the button is in the Focused state. To create the rectangle, add a new Rectangle object with the Focused state selected. This is called "drawing into state," meaning that the new object is visible only in the state into which you drew the object. To create the rectangle in the Focused state, in the States panel, click Focused, and then double-click the Rectangle tool in the Tools panel to create the new Rectangle object.

  12. The next step is to set the properties of the new rectangle. The properties have to be changed in Base, not in the Focused state. However, the rectangle is currently transparent, and won't be visible in Base. Click the Record mode indicator 0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc to make the rectangle visible. Note that the new rectangle (rectangle1) is still selected in the Objects and Timeline panel. In the Properties panel, set the following properties for rectangle1:

    • Fill   Set to No brush.

    • Stroke color   Set to #FF00C0FF.

    • Margin   Set Left to 1, Right to 1, Top to 1, and Bottom to 1.

  13. Optionally, if you want to add more interactivity to the rectangle while the button is in the Focused state, you can create a steady-state animation by doing the following. Otherwise, skip to step 14.

    1. In the States panel, select the Focused state.

    2. In the Objects and Timeline panel, click the Show Timeline button.

    3. Drag the keyframe to the 2-second mark, and then move the timeline playhead to 2.2 seconds.

    4. In the States panel, select rectangle1, and then, on the Appearances tab in the Properties panel, set Opacity to 0.

    5. In the Objects and Timeline panel, move the timeline playhead back to 0 seconds, and then select rectangle1. In the Properties panel, on the Scale tab, set X and Y to 5.

    6. In the Objects and Timeline panel, click the keyframe at 2. In the Properties panel, in the Easing category, set the EasingFunction to Quartic Out.

    7. In the Objects and Timeline panel, just underneath the tab, click the state name (in this case, Focused).

    8. In the Properties panel, on the Common Properties tab, set RepeatBehavior to Forever.

  14. Build your project (Ctrl+Shift+B), and then test your project by pressing F5.

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 Silverlight Button control at the Silverlight Control Gallery on MSDN.

See Also

Tasks

Try it: Create a rollover button

Concepts

Styling tips for common Silverlight controls

SimpleButton

Styling a control that supports templates