.NET 4.0+

WPF Base Classes - UIElement - Keyboard Events

by Richard Carr, published at http://www.blackwasp.co.uk/UIElement.aspx

The twenty-first part of the Windows Presentation Foundation Fundamentals tutorial continues the investigation of the base classes of the WPF layout controls. This article describes the keyboard events provided by the UIElement type.

UIElement

System.Windows.UIElement is a base class for many WPF controls, including all of those seen so far in the WPF tutorial and many others that we'll look at in future articles. The UIElement type defines a very large number of members, including methods, properties and events, that provide user interactivity and user interface rendering to subclasses. The range of functionality included in this class is wide, covering keyboard, mouse, stylus and touch input, management of the focus and control of the status of controls, such as the visibility and enabled statuses.

There are too many members to look at in a single article so we'll concentrate on some of the more common ones over this article and the following few instalments. In this article we will look at the keyboard events of the UIElement class. To do so we need a demo project. Create a new WPF application project in Visual Studio, naming it "UIElementDemo". Replace the XAML of the automatically generated window with the following code to define a hierarchy of layout and other controls:

<Window x:Class="UIElementDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="UIElement Demo"
        Width="250"
        Height="150">
    <Grid Name="MainGrid">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>

        <Label VerticalAlignment="Center">First Name</Label>
        <TextBox Name="FirstName" Grid.Column="1" Margin="6"/>
        <Label Grid.Row="1" VerticalAlignment="Center">Last Name</Label>
        <TextBox Name="LastName" Grid.Column="1" Grid.Row="1" Margin="6"/>
        
        <StackPanel Name="ButtonArea"
                    Grid.Row="2" Grid.Column="1"
                    Orientation="Horizontal" HorizontalAlignment="Right">
        <Button Name="OkButton" Width="50" Margin="6 6 0 6">OK</Button>
        <Button Name="CancelButton" Width="50" Margin="6">Cancel</Button>
        </StackPanel>
    </Grid>
</Window>

If you run the program as it is, the window appears as shown below:

Keyboard Events

Some controls, such as text boxes, provide specialised events for dealing with key presses. For other controls only the events in the UIElement class are available. There are two such events to permit you to identify when a key is pressed or released. Using the event arguments associated with the event you can determine which key was used.

KeyDown Event

Probably the more commonly used UIElement keyboard event is KeyDown. This is raised when the user presses a key and is repeatedly fired if the key is held down. Let's try it by attaching some code to the event for the entire window. To define the event in the XAML, modify the Window element as follows:

<Window x:Class="UIElementDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="UI ElementDemo"
        Width="250"
        Height="150"
        KeyDown="Window_KeyDown">

Switch to the code behind the window and add the event code shown below. This toggles the background colour of the window when a key is pressed. Try running the program and pressing and holding keys to see the effect. You will find that most keys cause the event to be raised.

private void Window_KeyDown(object sender, KeyEventArgs e)
{
    if (Background == Brushes.Yellow)
        Background = Brushes.White;
    else
        Background = Brushes.Yellow;
}