
Working with the Button Types
Instinctively, you know the role of a ‘button’ control. It is a UI element that can be pressed via the mouse or
keyboard (with the Enter key or Space key) if it has the current focus. In WPF, the ButtonBase class serves as a
parent for three core-derived types: Button, RepeatButton, and ToggleButton.
Like any parent class, ButtonBase defines common members for child types. ButtonBase defines the Click
event. It also defines the IsPressed property, which allows you to take a course of action when the derived type
has been pressed but not yet released. In addition, here are some other members of interest for the ButtonBase
abstract base class:
The ClickMode property allows you to specify three different modes of clicking a button. This property can be
assigned any value from the related System.Windows.Controls.ClickMode enumeration:
public enum ClickMode
{
Release,
Press,
Hover
}
For example, the following XAML defines a button that will fire the Click event whenever the mouse cursor is
within its bounds. Although this may not be the most helpful course of action for a typical push button, ‘hover’
mode can be useful when building custom styles, templates, or animations.
<Button Name = "bntHoverClick" ClickMode = "Hover"
Click = "btnHoverClick_Click"/>
Button provides two properties of immediate interest, IsCancel and IsDefault, which are very helpful when
building dialog boxes containing ‘OK’ and ‘Cancel’ buttons. When IsCancel is set to true, the button will be
artificially clicked when the user presses the Esc key with the button in focus. If IsDefault is set to true, the
button will be artificially clicked when the user presses the Enter key (again, with the button in focus).
<!-- Assume these are in a window type. -->
<Button Name = "btnOK" IsDefault = "true" Click = "btnOK_Click">
OK
</Button>
<Button Name = "btnCancel" IsCancel = "true"
Click = "btnCancel_Click">
Cancel
</Button>
The ToggleButton type (defined in the System.Windows.Controls.Primitives namespace) has by default a UI
identical to the Button type. However, it has the unique ability to hold its pressed state when clicked. To account
for this, ToggleButton provides an IsChecked property that toggles between true and false when the end user
clicks on the UI element. Furthermore, ToggleButton provides two events (Checked and Unchecked), which
can be handled to intercept this state change. Consider the following XAML:
<!-- A Yes / No toggle button. -->
<ToggleButton Name = "toggleOnOffButton"
Checked = "toggleOnOffButton_Checked"
Unchecked = "toggleOnOffButton_Unchecked">
Off!
</ToggleButton >
The event handlers simply change the Content property value:
// C# (VB code would be similar).
protected void toggleOnOffButton_Checked(object sender, RoutedEventArgs e)
{
toggleOnOffButton.Content = "On!";
}
protected void toggleOnOffButton_Unchecked(object sender, RoutedEventArgs e)
{
toggleOnOffButton.Content = "Off!";
}
If you would rather have each event route to the same handler, you could consolidate your logic as follows:
// C# (VB code would be similar).
protected void toggleOnOffButtonPressed(object sender, RoutedEventArgs e)
{
if (toggleOnOffButton.IsChecked == false )
toggleOnOffButton.Content = "Off!";
else
toggleOnOffButton.Content = "On!";
}
The final ButtonBase-derived type to point out is the RepeatButton type, also defined within System.Windows.
Controls.Primitives. It supports the ability to continuously fire its Click event when the end user has the widget
in a pressed state. The frequency with which it will fire the Click event depends on the values you assign to the
Delay and Interval properties, both of which are recorded in milliseconds.
In reality, the RepeatButton type, like the ToggleButton type, is not that useful on its own. However, the
exposed behavior is useful when constructing user interfaces.
Consider that unlike Windows Forms, the initial release of WPF does not supply a ‘spin button’ control.
Composing a spin button widget can be done quite simply in XAML given the functionality of RepeatButton:
<StackPanel>
<!-- The ‘Up’ button. -->
<RepeatButton Height = "25" Width = "25"
Name = "repeatAddValueButton" Delay = "200" Interval = "1"
Click = "repeatAddValueButton_Click"
Content = "+"/>
<!-- Displays the current value. -->
<Label Name ="lblCurrentValue" Background = "LightGray"
Height = "30" Width = "25" VerticalContentAlignment = "Center"
HorizontalContentAlignment = "Center" FontSize="15"/>
<!-- The ‘Down’ button. -->
<RepeatButton Height = "25" Width = "25"
Name = "repeatRemoveValueButton" Delay = "200" Interval = "1"
Click = "repeatRemoveValueButton_Click"
Content = "-"/>
</StackPanel>
The Event handlers would simply update the Label’s content with a new value as in the following example:
// C# (VB code would be similar)
public partial class MainWindow : System.Windows.Window
{
private int currValue = 0;
public MainWindow()
{
InitializeComponent();
lblCurrentValue.Content = currValue;
}
protected void repeatAddValueButton_Click(object sender,
RoutedEventArgs e)
{
currValue++;
lblCurrentValue.Content = currValue;
}
protected void repeatRemoveValueButton_Click(object sender,
RoutedEventArgs e)
{
currValue--;
lblCurrentValue.Content = currValue;
}
}
Of course, a production-level spin control would not be embedded within a Window but isolated in a custom user
control. Furthermore, you would want to add additional bits of functionality to test ranges, fire events, and so on.
Also, you may wish to make use of ‘dependency properties’ and ‘routed events’. You will learn about
dependency properties, routed events, and custom controls later in the class.
Button Types
Table of Contents
Copyright (c) 2008. Intertech, Inc. All Rights Reserved. This information is to be used exclusively as an
online learning aid. Any attempts to copy, reproduce, or use for training is strictly prohibited.
Courseware
Training Resources
Tutorials
ButtonBase Member
|
Meaning in Life
|
ClickMode
|
This property allows you to establish when the Click event should fire, based on values from the ClickMode enumeration.
|
Command
|
As explained later in this chapter, many UI elements can have associated ‘command’, which can be attached to a UI element by assigning the Command property.
|
CommandParameter
|
Allows you to pass parameters to the item specified by the Command property.
|
CommandTarget
|
Allows you to establish the recipient of the command set by the Command property.
|
|
Services