Button control styling tips

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

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:

The Button control can also be in one of the following two states of the FocusStates 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  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

MouseOver

Pressed

Disabled

Focused

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

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, Microsoft Expression Blend 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  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

MouseOver

Pressed

Disabled

Focused

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

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, Expression 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  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

Create a control from existing objects

Concepts

Styling tips for common Silverlight controls
SimpleButton
Styling a control that supports templates

Send feedback about this topic to Microsoft. © 2011 Microsoft Corporation. All rights reserved.