Button Control in WPF
Button control in WPF is one of the useful Content control. Like in windows forms Button control responds for click event in WPF also. WPF Button control has some new properties, for example it can behaves as Cancel button when IsCancel property set to True.
In WPF, button control has Content property for which we can assign input. Unlike win forms here we can set text or any type to Content property because it takes Object type has input. In this article we discuss about basic usage of Button control in WPF.
Open Microsoft Visual Studio 2013 => Create New WPF Application => name it as WPFButtonControl
Add below code which creates simple Button control, Content is in Text format and has click event btn1_Click. Whenever we click on button it displays alert box with the help of MessageBox.Show() as mentioned in code behind.
MainWindow.xaml:
<Window x:Class="WPFButtonControl.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Button Name="btn1" Height="50" Width="100" Content="Click" Click="btn1_Click"></Button>
</Grid>
</Window>
MainWindow.Xaml.cs:
using System.Windows;
namespace WPFButtonControl
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void btn1_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show("This is WPF Button Control Click Event");
}
}
}
The output displays as shown below.
In the above example we just provided input is in text format for Content property. As Button control Content property takes input in any format, let's add one more Button control inside the main Button control as shown below.
<Window x:Class="WPFButtonControl.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Button Name="btn1" Height="100" Width="200" Click="btn1_Click">
<Button Name="btn2" Width="100" Height="50" Content="Child" Click="btn2_Click"></Button>
</Button>
</Grid>
</Window>
As shown above we have two button controls one inside another. Let's add click events for both as shown below.
using System.Windows;
namespace WPFButtonControl
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void btn1_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show("This is Parent Button Click Event");
}
private void btn2_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show("This is Child Button Click Event");
}
}
}
Here you will get doubt when we click on inside button which event will fire either parent control event or child. Surprisingly both events will fire if we click the child button, first it fires child button event and next parent button event. This type of events are called Routed events, in my future articles we discuss about Routed Events in-detail.
Execute the application and click on child button, the output displays as shown below.
First it fires Child button Click Event.
Then it fires Parent Button Click Event
If we click on Parent button (that means outside of the child and inside of the parent), only parent button click event will fire.
We can make button control as Cancel button by making IsCancel property to True and can make default that means respond to Enter key by making IsDefault property to true.
Button as Default:
Add below code in XAML, here we set the IsDefault to true to make it respond to Enter key.
<Window x:Class="WPFButtonControl.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Button Name="btn1" Height="50" IsDefault="True" Width="100" Content="Click" Click="btn1_Click"></Button>
</Grid>
</Window>
Run the application and click on Enter key, alert box will display as we made the button as Default.
Button as Cancel:
Now made IsCancel to true to make the Button as Cancel button as shown below.
<Window x:Class="WPFButtonControl.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Button Name="btn1" Height="50" IsCancel="True" Width="100" Content="Click" Click="btn1_Click"></Button>
</Grid>
</Window>
using System.Windows;
namespace WPFButtonControl
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void btn1_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show("Window is closing");
this.Close();
}
}
}
Run the application and click on "Esc" button then "Cancel" button click event fires.
