Understanding Routed Event in Silverlight

Here we will try out another bubbled event, key press. Read Previous Article here.

Introduction:

Silverlight elements use KeyDown and KeyUp events to notify you when a key is pressed. These events use bubbling, so they travel up from the element that currently has focus to the containing elements.

When we react to a key press event, we receive a KeyEventArgs object that provides two additional pieces of information: Key and PlatformKeyCode. Key indicates the key that was pressed as a value from the System.Windows.Input.Key enumeration. PlatformKeyCode is an integer value that must be interpreted based on the hardware and operating system that's being used on the client computer.

Let's try to understand the key events for creating an Silverlight application. We will design a text box to monitor three events: KeyDown, KeyUp, and the higher-level TextChanged event.

Step 1: Create a Silverlight application with name KeyPressEvent.

Step 2: Open main.xaml

Step 3: Create three rows in the grid.

Step 4: Add a textbox which will monitor key press event, and add ListBox to show result.

<Grid x:Name="LayoutRoot">

        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>           
        </Grid.RowDefinitions>

        <Grid Margin="5">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" ></ColumnDefinition>
                <ColumnDefinition ></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <TextBlock Margin="3" Text="Type Here:"></TextBlock>
            <TextBox Grid.Column="1" x:Name="txt" KeyDown="txt_KeyDown" KeyUp="txt_KeyUp"
                     TextChanged="txt_TextChanged"></TextBox>
        </Grid>
        <ListBox Margin="3"  x:Name="lstMessages"  Grid.Row="1"></ListBox>
        <Button x:Name="cmdClear" Grid.Row="2"  HorizontalAlignment="Center" Margin="5"
              Padding="3" Content="Clear List"></Button>
    </Grid>

Here, the TextBox handles the KeyDown, KeyUp, and TextChanged events explicitly. However, the KeyDown and KeyUp events bubble, which means you can handle them at a higher level. For example, you can attach KeyDown and KeyUp event handlers on the root Grid to receive key presses that are made anywhere in the page.
        private void txt_KeyDown(object sender, KeyEventArgs e)
        {
            string message =
               "KeyDown " +
               " Key: " + e.Key;
            lstMessages.Items.Add(message);
        }
        private void txt_KeyUp(object sender, KeyEventArgs e)
        {
            string message =
               "KeyUp " +
               " Key: " + e.Key;
            lstMessages.Items.Add(message);
        }
        private void txt_TextChanged(object sender, TextChangedEventArgs e)
        {
            string message = "TextChanged";
            lstMessages.Items.Add(message);
        }

Step 5: Press F5 and try tying anything on textbox to see result in listbox.



Hope you liked to play with Key press bubbled event.

Cheers.