Button Overview

Article
11/03/2006

The Button control represents a standard button that reacts to a Click event. The Button class inherits directly from the ButtonBase class. This topic introduces the Button control and provides examples of how to create, customize, and style buttons.

This topic contains the following sections.

Button Control
Creating Buttons
Buttons Can Contain Complex Content
Button Styling
Related Topics

Button Control

A button is a control, which is an interactive component that enables users to communicate with an application. The Button control is a ContentControl, which means that a button can contain content like text, images, or panels.

The border and the background of a button can change according to the state of the button. In the following illustration, the first button shows the default state, and the second button shows a changed border color, which indicates the button is in a focused state. A focused state occurs when a user moves a mouse pointer over the button. The final button shows that the border and background both change if the user clicks the mouse button when the mouse pointer is over the button.

Buttons in default, focused, and pressed states

Button states

Creating Buttons

When you create a button, you must add an event handler. You can create buttons in either markup or in code; however, you must create the event handler in code.

The following example contains two buttons of different colors and a third button that is labeled Reset Colors. When a user clicks one of the colored buttons, its Background color changes to the color of the other button. The Reset button resets the first two buttons to their original colors.

<Button Name="btn1" Background="Pink" BorderBrush="Black" BorderThickness="1" Click="OnClick1">
        ClickMe1</Button>
<Button Name="btn2" Background="LightBlue" BorderBrush="Black" BorderThickness="1" Click="OnClick2">
        ClickMe2</Button>
<Button Name="btn3" Click="OnClick3">Reset</Button>

The following example shows how to add an event handler, which handles the button Click events. You must write event handlers in a programming language, such as in C# or Microsoft Visual Basic.

void OnClick1(object sender, RoutedEventArgs e)
{
    btn1.Background = Brushes.LightBlue;
}

void OnClick2(object sender, RoutedEventArgs e)
{
    btn2.Background = Brushes.Pink;
}

void OnClick3(object sender, RoutedEventArgs e)
{
    btn1.Background = Brushes.Pink;
    btn2.Background = Brushes.LightBlue;
}

btncsharp = new Button();
btncsharp.Content = "Created with C# code.";
btncsharp.Background = SystemColors.ControlDarkDarkBrush;
btncsharp.FontSize = SystemFonts.CaptionFontSize;
cv2.Children.Add(btncsharp);

For the complete sample, see Buttons Sample.

Buttons Can Contain Complex Content

Buttons can contain graphical content like images. The following example shows how to create a button that contains an image.

<Button Name="btn5" Width="50" Height="30" Click="OnClick5">
<Image Source="data\flower.jpg"></Image></Button>
<Button Name="btn6" BorderBrush="Black">Click the picture.</Button>

Buttons can also contain complex content like panels. The following example shows a button that contains a DockPanel with an image and some text.

<Button Margin="10,10,3,3" Grid.Column="0" Grid.Row="5" Width="250" Name="btn7" Click="OnClick6">
  <DockPanel Height="30">
    <Image Source="data\flower.jpg"/>
    <TextBlock Name="txt">Button with an image. Click me.</TextBlock>
  </DockPanel>
</Button>

For the complete sample see Buttons Sample.

Button Styling

When you apply a style to a control, you can change the appearance and behavior of buttons without writing a custom control. In addition to setting visual properties, you can also apply styles to individual parts of a control, change the behavior of parts of the control through properties, add parts, or change the layout of a control.

The following example defines a style called SystemResStyle that shows how to use the current system settings in your style. The code assigns the color of the ControlLightBrush as the background color for the button and the color of the ControlDarkBrush as the foreground color for the brush. In markup you use the resource key for the SystemColors values.

<Style x:Key="SystemResStyle" TargetType="{x:Type Button}">
    <Setter Property = "Background" Value= 
                       "{DynamicResource {x:Static SystemColors.ControlLightBrushKey}}"/>
    <Setter Property = "Foreground" Value= 
                       "{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}"/>
    <Setter Property = "FontSize" Value= 
                       "{DynamicResource {x:Static SystemFonts.IconFontSizeKey}}"/>
    <Setter Property = "FontWeight" Value= 
                       "{DynamicResource {x:Static SystemFonts.MessageFontWeightKey}}"/>
    <Setter Property = "FontFamily" Value= 
                       "{DynamicResource {x:Static SystemFonts.CaptionFontFamilyKey}}"/>
</Style>

The following example uses the Trigger class to change the appearance of a button in response to events that are raised on the button. In this example, if you:

Move the mouse pointer over the button, the background color of the button changes in response to the IsMouseOver trigger. As you move the mouse pointer over the button, the background becomes red and remains red until you move the mouse pointer away from the button.
Press the mouse button when the mouse pointer is over the Button control, the foreground color of the button changes. After you release the button, the color returns to its default appearance.

<Style x:Key="Triggers" TargetType="Button">
    <Style.Triggers>
    <Trigger Property="IsMouseOver" Value="true">
        <Setter Property = "Background" Value="Red"/>
    </Trigger>
    <Trigger Property="IsPressed" Value="true">
        <Setter Property = "Foreground" Value="Green"/>
    </Trigger>
    </Style.Triggers>
</Style>

For the complete sample see Button Styles Sample.

Share via

Button Overview

Button Control

Creating Buttons

Buttons Can Contain Complex Content

Button Styling

See Also

Reference

Concepts

Other Resources

Additional resources