BlackWaspTM

This web site uses cookies. By using the site you accept the cookie policy.This message is for compliance with the UK ICO law.

Windows Presentation Foundation
.NET 4.0+

WPF Button Controls - Button

The sixty-first part of the Windows Presentation Foundation Fundamentals tutorial starts to look at the button controls provided by WPF. The first of these is the basic Button, which responds to user clicks.

Default and Cancel Buttons

Usually a button is operated by the user clicking it. However, buttons do include the necessary functionality to be operated using the keyboard. This is ideal for users that find it difficult to use a mouse or other pointing device. To operate a button you can press the Tab key until the button receives the focus, then press the Enter key or space bar. This raises the Click event, as if the user had clicked the button with the mouse.

In addition to the focussed button behaviour, you can configure a default button. When such a button exists, pressing the Enter key may raise its Click event, even if the button is not focussed. The event will execute if no control has the focus, or if the selected control cannot process the Enter key press. This feature is often used for the OK button in a dialog box. To set a Button to be the default, change its IsDefault property to true.

A similar member can be used to set a control to be the cancel button. If you set a button's IsCancel property to true, pressing the Escape key raises its Click event when the current control cannot process the key. As the name suggests, this is often used for the Cancel button of a window. It is possible to set both the IsDefault and IsCancel properties for the same button.

To demonstrate, modify the XAML for the buttons as follows. This code sets the "Red" button to be the default and the "Green" button to respond to the Escape key.

<Button Grid.Row="1" Margin="2" Click="Red_Click" IsDefault="True">Red</Button>
<Button Grid.Row="2" Margin="2" Click="Green_Click" IsCancel="True">Green</Button>
<Button Grid.Row="3" Margin="2" Click="Blue_Click">Blue</Button>

Run the program again. Before selecting or clicking a button, try pressing Enter and Escape to see the results. Next, press tab until the "Blue" button is focussed. Pressing Enter will change the ellipse's background colour to blue, not red, because the button can process the key press.

IsDefaulted

Button defines a third Boolean property relating to default buttons. IsDefaulted is a read-only property that returns true if pressing Enter would raise the Click event. For a button with IsDefault set to true, IsDefaulted will be true if the button is focussed or if the currently active control cannot process the Enter key. For non-default buttons, the property becomes true only when the button is focussed.

Click Modes

The final property that we'll consider in this article is ClickMode. This property determines exactly when the Click event should be raised. There are three possible options, each defined within the ClickMode enumeration:

  • Release. Setting the ClickMode to Release causes the default click behaviour. If the user presses and releases the mouse button whilst the cursor is within the area of the control, the event fires. If the mouse button is clicked within the button's area then the mouse pointer is moved away before releasing, the event is not raised.
  • Press. Changing the ClickMode to Press makes the Click event fire earlier. The event is raised as soon as the mouse button is pressed, giving the user no option to change their mind by moving the pointer elsewhere before releasing.
  • Hover. The Hover option removes the need for the user to click the mouse button altogether. The event is raised as soon as the pointer enters the area defined by the button.

To demonstrate the click modes, modify the XAML for the three buttons as shown below:

<Button Grid.Row="1"
        Margin="2"
        Click="Red_Click"
        IsDefault="True">Red</Button>
<Button Grid.Row="2"
        Margin="2"
        Click="Green_Click"
        IsCancel="True"
        ClickMode="Press">Green</Button>
<Button Grid.Row="3"
        Margin="2"
        Click="Blue_Click"
        ClickMode="Hover">Hover</Button>

Run the program for a final time. You should find that the "Red" button exhibits the default behaviour, whilst the "Green" button changes the ellipse colour as soon as the mouse button is pressed. Moving the mouse pointer over the "Blue" button changes the colour without the need to click.

12 May 2014