Buttons are a very familiar interface element, but the precise definition is not obvious. A button is a content control that can react to a click, but not to a double-click. This behavior is captured by an abstract class called ButtonBase, from which a few different controls are derived.
Several controls ultimately derive from ButtonBase:
- Button
- RepeatButton
- ToggleButton
- CheckBox
- RadioButton
Below is a screenshot of a project that starts with a grid that contains a bunch of buttons.
In each grid cell, I’ve added a button. Most buttons have two-digit content that shows the row and the column. Grid row and column numbering is zero-based. In the two bottom corners there is an image inside a Button inside a Grid cell. It uses the Image control.
Button 10 illustrates, as many others do, the Message Box when it is cliked. A message box is a dialog box that you must click before returning to the program that spawned it. In button 10, the message box asks Yes, No and Cancel. When you click either of them, another message box open up. The code behind knows which button you clicked.
The XAML code listing is below. It is fairly simple and repetitive, although it may not look so at first glance.
We have a grid that contains buttons. We have buttons that contain simple text content such as 00 or 01. Other buttons contain a jpg graphic. Another button contains a stack panel. The idea here is that buttons can contain just about anything. We could call this “rich composition and customization”. Because of this rich composition, it is fairly easy to create “skins” (applications with radically different looks).
<Window x:Class="Buttons.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:Buttons"
mc:Ignorable="d"
WindowStartupLocation="CenterScreen"
Title="Buttons" Height="300" Width="400">
<Grid>
<!-- Define 4 rows and 4 columns -->
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Button Name="Btn00" Grid.Row="0" Grid.Column="0" Click="Btn00_Click">
00
</Button>
<Button Name="Btn01" Grid.Row="0" Grid.Column="1" Click="Btn01_Click">
01
</Button>
<Button Name="Btn02" Grid.Row="0" Grid.Column="2" Click="Btn02_Click">
<Button.Background>
<LinearGradientBrush>
<GradientStop Color="White" Offset="0"/>
<GradientStop Color="Yellow" Offset="0.5"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
</Button.Background>
02
</Button>
<Button Name="Btn03" Grid.Row="0" Grid.Column="3" Click="Btn03_Click">
03
</Button>
<Button Name="Btn10" Grid.Row="1" Grid.Column="0" Click="Btn10_Click">
10
</Button>
<Button Name="Btn11" Grid.Row="1" Grid.Column="1" Click="Btn11_Click"
Background="DarkSeaGreen">11
</Button>
<Button Name="Btn12" Grid.Row="1" Grid.Column="2" Click="Btn12_Click">
<Button.Background>
<LinearGradientBrush>
<GradientStop Color="Yellow" Offset="0"/>
<GradientStop Color="White" Offset="0.5"/>
<GradientStop Color="Yellow" Offset="1"/>
</LinearGradientBrush>
</Button.Background>
12
</Button>
<Button Name="Btn13" Grid.Row="1" Grid.Column="3" Click="Btn13_Click">
<Button.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="Yellow" Offset="0.0" />
<GradientStop Color="Red" Offset="0.25" />
<GradientStop Color="Blue" Offset="0.75" />
<GradientStop Color="LightGreen" Offset="1.0" />
</LinearGradientBrush>
</Button.Background>
13
</Button>
<Button Name="Btn20" Grid.Row="2" Grid.Column="0" MouseEnter="Btn20_MouseEnter">
20
</Button>
<Button Name="Btn21" Grid.Row="2" Grid.Column="1" Click="Btn21_Click">
21
</Button>
<Button Name="Btn22" Grid.Row="2" Grid.Column="2" Click="Btn22_Click">
21
</Button>
<Button Name="Btn23" Grid.Row="2" Grid.Column="3" Click="Btn23_Click">
23
</Button>
<Button Name="Btn30" Grid.Row="3" Grid.Column="0" Click="Btn30_Click">
<Image Source="OwlHead96.jpg" Stretch="Fill"/>
</Button>
<Button Name="Btn31" Grid.Row="3" Grid.Column="1" Click="Btn31_Click">
<Grid>
<!-- Define two rows and two columns -->
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Rectangle Fill="LightPink" Grid.Row="0" Grid.Column="0" />
<Label HorizontalAlignment="Center" VerticalAlignment="Center"
Grid.Row="0" Grid.Column="0">1</Label>
<Rectangle Fill="LightSalmon" Grid.Row="0" Grid.Column="1"/>
<Label HorizontalAlignment="Center" VerticalAlignment="Center"
Grid.Row="0" Grid.Column="1">2</Label>
<Rectangle Fill="LightGreen" Grid.Row="1" Grid.Column="0"/>
<Label HorizontalAlignment="Center" VerticalAlignment="Center"
Grid.Row="1" Grid.Column="0">3</Label>
<Rectangle Fill="Blue" Grid.Row="1" Grid.Column="1"/>
<Label HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White"
Grid.Row="1" Grid.Column="1">4</Label>
</Grid>
</Button>
<Button Name="Btn32" Grid.Row="3" Grid.Column="2" Click="Btn32_Click">
<StackPanel>
<Label>Stack</Label>
<Label>Panel</Label>
</StackPanel>
</Button>
<Button Name="Btn33" Grid.Row="3" Grid.Column="3" Click="Btn33_Click">
<Image Source="BaldEagle94.jpg" Stretch="Fill"/>
</Button>
</Grid>
</Window>
Below is the “code behind”.
using System.Windows;
namespace Buttons
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void Btn00_Click(object sender, RoutedEventArgs e)
{
string Msg = "The button 00 was clicked.";
Msg = Msg + "\nThis is a message box with an OK button and a title of \"Buttons\".";
Msg = Msg + "\nThe button has a click event that fires this code when clicked.";
MessageBox.Show(Msg, "Buttons");
}
private void Btn01_Click(object sender, RoutedEventArgs e)
{
string Msg = "The button 01 was clicked.";
Msg = Msg + "\nIn the XAML code, the button's code begins with:";
Msg = Msg + "\n<Button Name=\"Btn01\" ...";
Msg = Msg + "\nand there is a click event in the XAML code like this:";
Msg = Msg + "\nClick=\"Btn01_Click\"";
Msg = Msg + "\nand in the C# code there is this";
Msg = Msg + "\nprivate void Btn01_Click(...";
MessageBox.Show(Msg, "Buttons");
}
//
private void Btn02_Click(object sender, RoutedEventArgs e)
{
string Msg = "The button 02 was clicked.";
Msg = Msg + "\nThis uses a linear gradient brush for the color.";
Msg = Msg + "\n<Button Name=\"btn02\" ...";
Msg = Msg + "\n<Button.Background>";
Msg = Msg + "\n <LinearGradientBrush>";
Msg = Msg + "\n <GradientStop Color=\"White\" Offset=\"0\"/>";
Msg = Msg + "\n <GradientStop Color=\"Yellow\" Offset=\"0.5\"/>";
Msg = Msg + "\n <GradientStop Color=\"White\" Offset=\"1\"/>";
Msg = Msg + "\n </LinearGradientBrush>";
Msg = Msg + "\n</Button.Background>";
Msg = Msg + "\n02";
Msg = Msg + "\n</Button>";
MessageBox.Show(Msg, "Buttons");
}
private void Btn03_Click(object sender, RoutedEventArgs e)
{
string Msg = "The button 03 was clicked.";
Msg = Msg + "\nI have added MessageBoxButton.YesNoCancel to the MessageBox as the 3rd arguement.";
MessageBox.Show(Msg, "Buttons", MessageBoxButton.YesNoCancel);
}
private void Btn10_Click(object sender, RoutedEventArgs e)
{
string Msg = "The button 10 was clicked.";
Msg = Msg + "\nWhat say you?";
MessageBoxResult result = MessageBox.Show(Msg, "Buttons", MessageBoxButton.YesNoCancel);
switch (result)
{
case MessageBoxResult.Yes:
MessageBox.Show("Hello to you too!", "Button 10");
break;
case MessageBoxResult.No:
MessageBox.Show("Oh well, too bad!", "Button 10");
break;
case MessageBoxResult.Cancel:
MessageBox.Show("Nevermind then...", "Button 10");
break;
}
}
private void Btn11_Click(object sender, RoutedEventArgs e)
{
string Msg = "The button 11 was clicked.";
Msg = Msg + "\nThis message box has a an information icon.";
Msg = Msg + "\nMessageBox.Show(Msg,\"Buttons\", MessageBoxButton.OK, MessageBoxImage.Information)";
MessageBox.Show(Msg, "Buttons", MessageBoxButton.OK, MessageBoxImage.Information);
}
private void Btn12_Click(object sender, RoutedEventArgs e)
{
string Msg = "The button 12 was clicked.";
Msg = Msg + "\n<Button Name=\"btn12\" ...";
Msg = Msg + "\n<Button.Background>";
Msg = Msg + "\n <LinearGradientBrush>";
Msg = Msg + "\n <GradientStop Color=\"Yellow\" Offset=\"0\"/>";
Msg = Msg + "\n <GradientStop Color=\"White\" Offset=\"0.5\"/>";
Msg = Msg + "\n <GradientStop Color=\"Yellow\" Offset=\"1\"/>";
Msg = Msg + "\n </LinearGradientBrush>";
Msg = Msg + "\n</Button.Background>";
Msg = Msg + "\n12";
Msg = Msg + "\n</Button>";
MessageBox.Show(Msg, "Buttons");
}
private void Btn13_Click(object sender, RoutedEventArgs e)
{
string Msg = "The button 13 was clicked.";
Msg = Msg + "\n<Button.Background>";
Msg = Msg + "\n <LinearGradientBrush StartPoint=\"0,0\" EndPoint=\"1,1\">";
Msg = Msg + "\n <GradientStop Color=\"Yellow\" Offset=\"0.0\" />";
Msg = Msg + "\n <GradientStop Color=\"Red\" Offset=\"0.25\" />";
Msg = Msg + "\n <GradientStop Color=\"Blue\" Offset=\"0.75\" />";
Msg = Msg + "\n <GradientStop Color=\"LightGreen\" Offset=\"1.0\" />";
Msg = Msg + "\n </LinearGradientBrush>";
Msg = Msg + "\n</Button.Background>";
MessageBox.Show(Msg, "Buttons");
}
private void Btn20_MouseEnter(object sender, RoutedEventArgs e)
{
string Msg = "The button 20 touched by the mouse.";
MessageBox.Show(Msg, "Buttons");
}
private void Btn21_Click(object sender, RoutedEventArgs e)
{
string Msg = "The button 21 clicked.";
MessageBox.Show(Msg, "Buttons");
}
private void Btn22_Click(object sender, RoutedEventArgs e)
{
string Msg = "The button 22 clicked.";
MessageBox.Show(Msg, "Buttons");
}
private void Btn23_Click(object sender, RoutedEventArgs e)
{
string Msg = "The button 23 clicked.";
MessageBox.Show(Msg, "Buttons");
}
private void Btn30_Click(object sender, RoutedEventArgs e)
{
string Msg = "The button 30 was clicked.";
MessageBox.Show(Msg, "Buttons");
}
private void Btn31_Click(object sender, RoutedEventArgs e)
{
string Msg = "The button 31 was clicked.";
MessageBox.Show(Msg, "Buttons");
}
private void Btn32_Click(object sender, RoutedEventArgs e)
{
string Msg = "The button 32 was clicked.";
MessageBox.Show(Msg, "Buttons");
}
private void Btn33_Click(object sender, RoutedEventArgs e)
{
string Msg = "The button 33 was clicked.";
Msg += "\nTo put an image on a button you can use the Image control.";
Msg += "\n<Image Source=\"BaldEagle94.jpg\" Stretch=\"Fill\"/>";
MessageBox.Show(Msg, "Buttons");
}
}
}
Styles
This project also uses the App.xaml file to style the buttons.
<Application.Resources>
<Style TargetType="Button">
<Setter Property="MinHeight" Value="23" />
<Setter Property="Margin" Value="2" />
</Style>
</Application.Resources>