Button Control In WPF

This tutorial covers how to create a button, add button click event handler, and how to format a button in WPF using C# and XAML.
 
Button control
 
The Button element represents a WPF Button control in XAML at design-time. The Width and Height attributes of the Button element represent the width and the height of a Button. The Content property of the Button element sets the text of a button control. The x:Name attribute represents the name of the control, which is a unique identifier of a control.
 
The code snippet in Listing 1 creates a Button control and sets the name, height, width, and content of the control. 
  1. <Button x:Name="DrawCircleButton" Height="80" Width="150" Content="Draw Circle" >  
Listing 1
 
WPF Button
Figure 1

As you can see from Figure 1, by default the Button is place in the center of the page. We can place a Button control where we want by using the Margin, VerticalAlignment and HorizontalAlignment attributes that sets the margin, vertical alignment, and horizontal alignment of a control.

 
The code snippet in Listing 2 sets the position of the Button control in the left top corner of the page.
  1. <Button x:Name="DrawCircleButton" Height="30" Width="100"  
  2.    Content="Draw Circle"  
  3.    Margin="10,10,0,0" VerticalAlignment="Top"  
  4.    HorizontalAlignment="Left">  
  5. </Button>  
Listing 2
 
WPF Button click event handler
Figure 2

Adding a Button Click Event Handler

The Click attribute of the Button element adds the click event handler. The following code adds the click event handler for a Button.
  1. <Button x:Name="Random Number" Click="RandomNumber_Click">  
  2. </Button>  
The code for the click event handler looks like following.
  1. private void RandomNumber_Click(object sender, RoutedEventArgs e)  
  2. {  
  3. }  
Now, whatever code you write in the click event handler that will be executed on the Button click. The code listed in Listing 3 creates a random number the Button click event handler.
  1. public void RandomNumber_Click(object sender, EventArgs e)  
  2. {  
  3.    Random generator = new Random();  
  4.    int randomValue;  
  5.    randomValue = generator.Next(1, 10);  
  6.    textBlock1.Text += " " + randomValue.ToString();  
  7. }  
Listing 3
 
Now, let's apply some formatting to oyr control. Here is the final code of Windows.xaml (WPF application window).
  1. <Window x:Class="HelloWPF.Window1"  
  2.    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  4.    Title="Window1" Height="300" Width="300">  
  5. <Grid Background="Azure">  
  6. <Button Height="23" Margin="15,15,125,0" Name="RandomNumber" VerticalAlignment="Top" Click="RandomNumber_Click" Background="Blue">Random Number  
  7. </Button>  
  8.    <ScrollViewer Margin="0,50,0,0">  
  9.       <TextBlock Name="textBlock1" TextWrapping="Wrap" FontSize="20" FontWeight="Bold" />  
  10.    </ScrollViewer>  
  11. </Grid>  
  12. </Window>  
Code at the button click event hander, that is in Windows.xaml.cs class.
  1. public void RandomNumber_Click(object sender, EventArgs e)  
  2. {  
  3.    Random generator = new Random();  
  4.    int randomValue;  
  5.    randomValue = generator.Next(1, 10);  
  6.    textBlock1.Text += " " + randomValue.ToString();  
  7. }  
Now, when you run the application, you will see the following Window and click on the Random Number button will generate a random number and display on the window.
 
WPF Button format
Figure 3
 
Formatting a Button
 
Not let's get a little creative. How about we create a Button control with a border formatting, background, and foreground of the Button?
The BorderBrush property of the Button sets a brush to draw the border of a Button. You may use any brush to fill the border.
 
The following code snippet uses a linear gradient brush to draw the border with a combination of red and blue color.
  1. <Button.BorderBrush>  
  2.    <LinearGradientBrush StartPoint="0,0" EndPoint="1,1" >  
  3.       <GradientStop Color="Blue" Offset="0" />  
  4.       <GradientStop Color="Red" Offset="1.0" />  
  5.    </LinearGradientBrush>  
  6. </Button.BorderBrush>  
The Background and Foreground properties of the Button set the background and foreground colors of a Button. You may use any brush to fill the border.
 
The following code snippet uses linear gradient brushes to draw the background and foreground of a Button.
  1. <Button.Background>  
  2.    <LinearGradientBrush StartPoint="0,0" EndPoint="1,1" >  
  3.       <GradientStop Color="Blue" Offset="0.1" />  
  4.       <GradientStop Color="Orange" Offset="0.25" />  
  5.       <GradientStop Color="Green" Offset="0.75" />  
  6.       <GradientStop Color="Red" Offset="1.0" />  
  7.    </LinearGradientBrush>  
  8.   
  9. </Button.Background>  
  10. <Button.Foreground>  
  11.    <LinearGradientBrush StartPoint="0,0" EndPoint="1,1" >  
  12.       <GradientStop Color="Orange" Offset="0.25" />  
  13.       <GradientStop Color="Green" Offset="1.0" />  
  14.    </LinearGradientBrush>  
  15.   
  16. </Button.Foreground>  
Summary
 
In this article, I discussed how we can use a Button control in WPF and C#.