WPF Buttons and Message Boxes

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).

1<Window x:Class="Buttons.MainWindow"
2        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6        xmlns:local="clr-namespace:Buttons"
7        mc:Ignorable="d"
8        WindowStartupLocation="CenterScreen"
9        Title="Buttons" Height="300" Width="400">
10    <Grid>
11        <!-- Define 4 rows and 4 columns -->
12        <Grid.RowDefinitions>
13            <RowDefinition/>
14            <RowDefinition/>
15            <RowDefinition/>
16            <RowDefinition/>
17        </Grid.RowDefinitions>
18        <Grid.ColumnDefinitions>
19            <ColumnDefinition/>
20            <ColumnDefinition/>
21            <ColumnDefinition/>
22            <ColumnDefinition/>
23        </Grid.ColumnDefinitions>
24        <Button Name="Btn00" Grid.Row="0" Grid.Column="0" Click="Btn00_Click">
25            00
26        </Button>
27        <Button Name="Btn01" Grid.Row="0" Grid.Column="1" Click="Btn01_Click">
28            01
29        </Button>
30        <Button Name="Btn02" Grid.Row="0" Grid.Column="2" Click="Btn02_Click">
31            <Button.Background>
32                <LinearGradientBrush>
33                    <GradientStop Color="White" Offset="0"/>
34                    <GradientStop Color="Yellow" Offset="0.5"/>
35                    <GradientStop Color="White" Offset="1"/>
36                </LinearGradientBrush>
37            </Button.Background>
38            02
39        </Button>
40        <Button Name="Btn03" Grid.Row="0" Grid.Column="3" Click="Btn03_Click">
41            03
42        </Button>
43        <Button Name="Btn10" Grid.Row="1" Grid.Column="0" Click="Btn10_Click">
44            10
45        </Button>
46        <Button Name="Btn11" Grid.Row="1" Grid.Column="1" Click="Btn11_Click"
47                Background="DarkSeaGreen">11
48        </Button>
49        <Button Name="Btn12" Grid.Row="1" Grid.Column="2" Click="Btn12_Click">
50            <Button.Background>
51                <LinearGradientBrush>
52                    <GradientStop Color="Yellow" Offset="0"/>
53                    <GradientStop Color="White" Offset="0.5"/>
54                    <GradientStop Color="Yellow" Offset="1"/>
55                </LinearGradientBrush>
56            </Button.Background>
57            12
58        </Button>
59        <Button Name="Btn13" Grid.Row="1" Grid.Column="3" Click="Btn13_Click">
60            <Button.Background>
61                <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
62                    <GradientStop Color="Yellow" Offset="0.0" />
63                    <GradientStop Color="Red" Offset="0.25" />
64                    <GradientStop Color="Blue" Offset="0.75" />
65                    <GradientStop Color="LightGreen" Offset="1.0" />
66                </LinearGradientBrush>
67            </Button.Background>
68            13
69        </Button>
70        <Button Name="Btn20" Grid.Row="2" Grid.Column="0" MouseEnter="Btn20_MouseEnter">
71            20
72        </Button>
73        <Button Name="Btn21" Grid.Row="2" Grid.Column="1" Click="Btn21_Click">
74            21
75        </Button>
76        <Button Name="Btn22" Grid.Row="2" Grid.Column="2" Click="Btn22_Click">
77            21
78        </Button>
79        <Button Name="Btn23" Grid.Row="2" Grid.Column="3" Click="Btn23_Click">
80            23
81        </Button>
82        <Button Name="Btn30" Grid.Row="3" Grid.Column="0" Click="Btn30_Click">
83            <Image Source="OwlHead96.jpg" Stretch="Fill"/>
84        </Button>
85        <Button Name="Btn31" Grid.Row="3" Grid.Column="1" Click="Btn31_Click">
86            <Grid>
87                <!-- Define two rows and two columns -->
88                <Grid.RowDefinitions>
89                    <RowDefinition/>
90                    <RowDefinition/>
91                </Grid.RowDefinitions>
92                <Grid.ColumnDefinitions>
93                    <ColumnDefinition/>
94                    <ColumnDefinition/>
95                </Grid.ColumnDefinitions>
96                <Rectangle Fill="LightPink" Grid.Row="0" Grid.Column="0" />
97                <Label HorizontalAlignment="Center" VerticalAlignment="Center"
98            Grid.Row="0" Grid.Column="0">1</Label>
99 
100                <Rectangle Fill="LightSalmon" Grid.Row="0" Grid.Column="1"/>
101                <Label HorizontalAlignment="Center" VerticalAlignment="Center"
102            Grid.Row="0" Grid.Column="1">2</Label>
103 
104                <Rectangle Fill="LightGreen" Grid.Row="1" Grid.Column="0"/>
105                <Label HorizontalAlignment="Center" VerticalAlignment="Center"
106            Grid.Row="1" Grid.Column="0">3</Label>
107 
108                <Rectangle Fill="Blue" Grid.Row="1" Grid.Column="1"/>
109                <Label HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White"
110            Grid.Row="1" Grid.Column="1">4</Label>
111            </Grid>
112        </Button>
113        <Button Name="Btn32" Grid.Row="3" Grid.Column="2" Click="Btn32_Click">
114            <StackPanel>
115                <Label>Stack</Label>
116                <Label>Panel</Label>
117            </StackPanel>
118        </Button>
119        <Button Name="Btn33" Grid.Row="3" Grid.Column="3" Click="Btn33_Click">
120            <Image Source="BaldEagle94.jpg" Stretch="Fill"/>
121        </Button>
122    </Grid>
123</Window>

Below is the “code behind”.

1using System.Windows;
2 
3namespace Buttons
4{
5    /// <summary>
6    /// Interaction logic for MainWindow.xaml
7    /// </summary>
8    public partial class MainWindow : Window
9    {
10        public MainWindow()
11        {
12            InitializeComponent();
13        }
14 
15        private void Btn00_Click(object sender, RoutedEventArgs e)
16        {
17            string Msg = "The button 00 was clicked.";
18            Msg = Msg + "\nThis is a message box with an OK button and a title of \"Buttons\".";
19            Msg = Msg + "\nThe button has a click event that fires this code when clicked.";
20            MessageBox.Show(Msg, "Buttons");
21        }
22 
23        private void Btn01_Click(object sender, RoutedEventArgs e)
24        {
25            string Msg = "The button 01 was clicked.";
26            Msg = Msg + "\nIn the XAML code, the button's code begins with:";
27            Msg = Msg + "\n<Button Name=\"Btn01\" ...";
28            Msg = Msg + "\nand there is a click event in the XAML code like this:";
29            Msg = Msg + "\nClick=\"Btn01_Click\"";
30            Msg = Msg + "\nand in the C# code there is this";
31            Msg = Msg + "\nprivate void Btn01_Click(...";
32            MessageBox.Show(Msg, "Buttons");
33        }
34        //
35        private void Btn02_Click(object sender, RoutedEventArgs e)
36        {
37            string Msg = "The button 02 was clicked.";
38            Msg = Msg + "\nThis uses a linear gradient brush for the color.";
39            Msg = Msg + "\n<Button Name=\"btn02\" ...";
40            Msg = Msg + "\n<Button.Background>";
41            Msg = Msg + "\n    <LinearGradientBrush>";
42            Msg = Msg + "\n        <GradientStop Color=\"White\" Offset=\"0\"/>";
43            Msg = Msg + "\n        <GradientStop Color=\"Yellow\" Offset=\"0.5\"/>";
44            Msg = Msg + "\n        <GradientStop Color=\"White\" Offset=\"1\"/>";
45            Msg = Msg + "\n    </LinearGradientBrush>";
46            Msg = Msg + "\n</Button.Background>";
47            Msg = Msg + "\n02";
48            Msg = Msg + "\n</Button>";
49            MessageBox.Show(Msg, "Buttons");
50        }
51        private void Btn03_Click(object sender, RoutedEventArgs e)
52        {
53            string Msg = "The button 03 was clicked.";
54            Msg = Msg + "\nI have added MessageBoxButton.YesNoCancel to the MessageBox as the 3rd arguement.";
55            MessageBox.Show(Msg, "Buttons", MessageBoxButton.YesNoCancel);
56        }
57        private void Btn10_Click(object sender, RoutedEventArgs e)
58        {
59            string Msg = "The button 10 was clicked.";
60            Msg = Msg + "\nWhat say you?";
61            MessageBoxResult result = MessageBox.Show(Msg, "Buttons", MessageBoxButton.YesNoCancel);
62            switch (result)
63            {
64                case MessageBoxResult.Yes:
65                    MessageBox.Show("Hello to you too!", "Button 10");
66                    break;
67                case MessageBoxResult.No:
68                    MessageBox.Show("Oh well, too bad!", "Button 10");
69                    break;
70                case MessageBoxResult.Cancel:
71                    MessageBox.Show("Nevermind then...", "Button 10");
72                    break;
73            }
74        }
75        private void Btn11_Click(object sender, RoutedEventArgs e)
76        {
77            string Msg = "The button 11 was clicked.";
78            Msg = Msg + "\nThis message box has a an information icon.";
79            Msg = Msg + "\nMessageBox.Show(Msg,\"Buttons\", MessageBoxButton.OK, MessageBoxImage.Information)";
80            MessageBox.Show(Msg, "Buttons", MessageBoxButton.OK, MessageBoxImage.Information);
81        }
82        private void Btn12_Click(object sender, RoutedEventArgs e)
83        {
84            string Msg = "The button 12 was clicked.";
85            Msg = Msg + "\n<Button Name=\"btn12\" ...";
86            Msg = Msg + "\n<Button.Background>";
87            Msg = Msg + "\n    <LinearGradientBrush>";
88            Msg = Msg + "\n        <GradientStop Color=\"Yellow\" Offset=\"0\"/>";
89            Msg = Msg + "\n        <GradientStop Color=\"White\" Offset=\"0.5\"/>";
90            Msg = Msg + "\n        <GradientStop Color=\"Yellow\" Offset=\"1\"/>";
91            Msg = Msg + "\n    </LinearGradientBrush>";
92            Msg = Msg + "\n</Button.Background>";
93            Msg = Msg + "\n12";
94            Msg = Msg + "\n</Button>";
95            MessageBox.Show(Msg, "Buttons");
96        }
97        private void Btn13_Click(object sender, RoutedEventArgs e)
98        {
99            string Msg = "The button 13 was clicked.";
100            Msg = Msg + "\n<Button.Background>";
101            Msg = Msg + "\n   <LinearGradientBrush StartPoint=\"0,0\" EndPoint=\"1,1\">";
102            Msg = Msg + "\n      <GradientStop Color=\"Yellow\" Offset=\"0.0\" />";
103            Msg = Msg + "\n      <GradientStop Color=\"Red\" Offset=\"0.25\" />";
104            Msg = Msg + "\n      <GradientStop Color=\"Blue\" Offset=\"0.75\" />";
105            Msg = Msg + "\n      <GradientStop Color=\"LightGreen\" Offset=\"1.0\" />";
106            Msg = Msg + "\n   </LinearGradientBrush>";
107            Msg = Msg + "\n</Button.Background>";
108            MessageBox.Show(Msg, "Buttons");
109        }
110        private void Btn20_MouseEnter(object sender, RoutedEventArgs e)
111        {
112            string Msg = "The button 20 touched by the mouse.";
113            MessageBox.Show(Msg, "Buttons");
114        }
115        private void Btn21_Click(object sender, RoutedEventArgs e)
116        {
117            string Msg = "The button 21 clicked.";
118            MessageBox.Show(Msg, "Buttons");
119        }
120        private void Btn22_Click(object sender, RoutedEventArgs e)
121        {
122            string Msg = "The button 22 clicked.";
123            MessageBox.Show(Msg, "Buttons");
124        }
125        private void Btn23_Click(object sender, RoutedEventArgs e)
126        {
127            string Msg = "The button 23 clicked.";
128            MessageBox.Show(Msg, "Buttons");
129        }
130        private void Btn30_Click(object sender, RoutedEventArgs e)
131        {
132            string Msg = "The button 30 was clicked.";
133            MessageBox.Show(Msg, "Buttons");
134        }
135        private void Btn31_Click(object sender, RoutedEventArgs e)
136        {
137            string Msg = "The button 31 was clicked.";
138            MessageBox.Show(Msg, "Buttons");
139        }
140        private void Btn32_Click(object sender, RoutedEventArgs e)
141        {
142            string Msg = "The button 32 was clicked.";
143            MessageBox.Show(Msg, "Buttons");
144        }
145        private void Btn33_Click(object sender, RoutedEventArgs e)
146        {
147            string Msg = "The button 33 was clicked.";
148            Msg += "\nTo put an image on a button you can use the Image control.";
149            Msg += "\n<Image Source=\"BaldEagle94.jpg\" Stretch=\"Fill\"/>";
150            MessageBox.Show(Msg, "Buttons");
151        }
152    }
153}

Styles

This project also uses the App.xaml file to style the buttons.

1<Application.Resources>
2    <Style TargetType="Button">
3        <Setter Property="MinHeight" Value="23" />
4        <Setter Property="Margin" Value="2" />
5    </Style>
6</Application.Resources>

BeginCodingNow.com

for data analysts & software developers

for data analysts & software developers

Styles