Working with Button Control in WPF

This article demonstrates how to create and use a Button control in WPF using XAML and C#.

Introduction
 
This article demonstrates how to create and use a Button control in WPF using XAML and C#. This article starts with introduction of the Button tag in XAML. After that, it demonstrates how to position and add click event handler of a button. In the end, the article discusses how to create a button at run-time. 
 
Creating a Button
 
The Button XAML element represents a WPF Button control. 
 
<Button/>
 
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. The x:Name attribute represents the name of the control, which is a unique identifier of a control. You may also use the Name property to set the name of a control. 
 
The code snippet in Listing 1 creates a Button control and sets the name, height, width, and content of a Button control. 
  1. <Button x:Name="DrawCircleButton" Height="40" Width="120" Content="Draw Circle" >  
  2. </Button>  
Listing 1
 
The default property of a button is Content. The following code snippet creates the same button as created by Listing 1.
  1. <Button x:Name="DrawCircleButton" Height="40" Width="120" >  
  2.                  Draw Circle  
  3. </Button>  
The output looks like Figure 1. 
Image1.jpg
 
Figure 1
Positioning a Button
 
If you place a button on a Grid control, the button will be placed in the center of Grid. If you are using a Canvas as your parent control of Button, the Button will be placed in the left top corner of Canvas. 
 
You can use Margin property to position a button control. If you are using a Canvas, you may also use Canvas.Left and Canvas.Top properties.
 
You may also use VerticalAlignment and HorizontalAlignment attributes to set vertical alignment, and horizontal alignment of a button. 
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="40" Width="120"   
  2.         Canvas.Left="10" Canvas.Top="10"   
  3.         Content="Draw Circle"  
  4.         VerticalAlignment="Top"   
  5.         HorizontalAlignment="Left">  
  6. </Button>  
Listing 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="DrawCircleButton" Height="40" Width="120"   
  2.         Canvas.Left="10" Canvas.Top="10"   
  3.         Content="Draw Circle"  
  4.         VerticalAlignment="Top"   
  5.         HorizontalAlignment="Left">  
  6. Click="DrawCircleButton_Click"  
  7. </Button>  
The code for the click event handler looks like following. 
  1. private void DrawCircleButton_Click(object sender, RoutedEventArgs e)  
  2. {  
  3.   
  4. }  
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 circle on the Button click event handler.
  1. private void DrawCircleButton_Click(object sender, RoutedEventArgs e)  
  2. {  
  3.     // creates a Circle  
  4.     Ellipse circle = new Ellipse();  
  5.     circle.Width = 200;  
  6.     circle.Height = 200;  
  7.     circle.Fill = new SolidColorBrush(Colors.Yellow);  
  8.     circle.Stroke = new SolidColorBrush(Colors.Black);  
  9.     circle.StrokeThickness = 4;  
  10.    
  11.     LayoutRoot.Children.Add(circle);  
  12. }  
Listing 3
 
Creating a Button Dynamically
 
The code listed in Listing 5 creates a Button control programmatically. First, it creates a Button object and sets its width, height, contents, background and foreground and later the Button is added to the LayoutRoot. 
  1. private void CreateAButton()  
  2. {  
  3.     Button btn = new Button();  
  4.     btn.Height = 80;  
  5.     btn.Width = 150;  
  6.     btn.Content = "Click ME";  
  7.     btn.Background = new SolidColorBrush(Colors.Orange);  
  8.     btn.Foreground = new SolidColorBrush(Colors.Black);  
  9.     LayoutRoot.Children.Add(btn);  
  10. }  
Listing 5
 
Summary
 
In this article, I discussed how we can create a Button control in WPF and C#.  We also saw how we can format a Button by setting its border, background, and foreground properties. After that, we saw you to set an image as the background of a Button. In the end of this article, we saw how to create a Button dynamically.