.NET 4.0+

WPF Button Controls - Button

by Richard Carr, published at http://www.blackwasp.co.uk/WPFButton.aspx

The sixty-first part of the Windows Presentation Foundation Fundamentals tutorial starts to look at the button controls provided by WPF. The first of these is the basic Button, which responds to user clicks.

Button

Recent articles in the WPF tutorial have considered text input controls, including the TextBox, PasswordBox and RichTextBox. In many applications, particularly for business software, the user enters information into such text controls before submitting it using a button. Buttons are often used for issuing other commands too.

The most commonly used buttons are added using the Button control. The Button class includes all of the functionality required to generate a clickable button. The type inherits from ContentControl, meaning that a button can contain plain text or any other control, including layout controls with their own children.

To demonstrate the use of Buttons we need a sample solution. Create a new WPF Application project named, "ButtonDemo". Once loaded, replace the XAML in the main window with the code below:

<Window x:Class="ButtonDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Button Demo"
        Height="200"
        Width="150">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        
        <Ellipse Name="MyEllipse" Stroke="Black" Width="50" Height="50"/>
        <Button Grid.Row="1" Margin="2">Red</Button>
        <Button Grid.Row="2" Margin="2">Green</Button>
        <Button Grid.Row="3" Margin="2">Blue</Button>
    </Grid>
</Window>

The resultant window appears as shown below:

Click Event

The key member of the Button class is the Click event. Usually, this is raised when the user presses and releases the mouse button within the area defined by the button, although this behaviour can be changed. Let's register the event for each of the three buttons. Modify the XAML for the buttons as follows:

<Button Grid.Row="1" Margin="2" Click="Red_Click">Red</Button>
<Button Grid.Row="2" Margin="2" Click="Green_Click">Green</Button>
<Button Grid.Row="3" Margin="2" Click="Blue_Click">Blue</Button>

We can now add the code for the buttons. Add the following three methods to the code behind the window. Each changes the colour of the ellipse.

private void Red_Click(object sender, RoutedEventArgs e)
{
    MyEllipse.Fill = Brushes.Red;
}

private void Green_Click(object sender, RoutedEventArgs e)
{
    MyEllipse.Fill = Brushes.Green;
}

private void Blue_Click(object sender, RoutedEventArgs e)
{
    MyEllipse.Fill = Brushes.Blue;
}

Run the program and try clicking the buttons. You should see the ellipse filled with a different colour for each button.