Day #9: Using Keystrokes in Silverlight

This is Day #9 of 31 Days of Silverlight. Today we are talking about using keystroke event handlers in Silverlight. There are many times where we need to know if a user is pressing a key, and this article will show you how to do that, as well as how to rig up the “Enter” key to make your “Submit” button take its action.

Our XAML

First things first, we need a Silverlight page to track keystrokes on. I have created one with a few elements. There’s a TextBlock, a TextBox, and a Button. I’ll explain when we get to the code what each of these elements will do. Here’s the XAML:

<UserControl x:Class="SilverlightWithKeystrokes.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<
Canvas x:Name="LayoutRoot" Background="White">
<
Canvas Background="Gray">
<
TextBlock x:Name="Block" Width="380" Height="200" Canvas.Left="10" Canvas.Top="10" Text="Tab out of the TextBox to wite characters in this TextBlock." TextWrapping="Wrap" />
</
Canvas>
<
TextBox x:Name="Box" Width="200" Canvas.Left="30" Canvas.Top="230" />
<
Button x:Name="Clicky" Width="100" Height="25" Content="Submit" Canvas.Left="250" Canvas.Top="230" />
</
Canvas>
</
UserControl>

Time for more event handlers

The way we are constructing this application, we are going to grab every single keystroke the user makes, and write those keystrokes to our TextBlock. You’ll notice that this even happens when we have our focus in the TextBox. We do this by adding an event handler to our root element. Keystroke event handlers can only be applied to the root element. Intellisense will let you do it elsewhere, but the event will only fire on the root element. Here’s the initial code to make this happen:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SilverlightWithKeystrokes
{
public partial class Page : UserControl
{
public Page()
{
InitializeComponent();
LayoutRoot.KeyUp += new KeyEventHandler(LayoutRoot_KeyUp);

}

void LayoutRoot_KeyUp(object sender, KeyEventArgs e)
{
Block.Text += e.Key.ToString();
}
}
}

Keep in mind that when we take the value of the Key, it will, by default, be capitalized. In code, A == a, and vice versa. So, don’t be surprised when you see capital letters in the TextBlock, and lower case letters in the TextBox. This should give you some indication of the complexity of writing a TextBox control from scratch.

Adding our expected behavior

In nearly every example of a form on a web page, clicking the Enter key will submit that form. Not true (by default) in Silverlight. In fact, I’m discovering (as I create this tutorial) that the Spacebar might actually be that default key. Regardless, we want our page to react like our user expects it to, and that means writing a little more code. What I am adding here is a new method called ExecuteForm() that will take the value from the TextBox and make it the value of the TextBlock. We are then calling this from two locations. We call it if the Enter key is pressed, or if the Button is clicked. Here’s the new code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SilverlightWithKeystrokes
{
public partial class Page : UserControl
{
public Page()
{
InitializeComponent();
LayoutRoot.KeyUp += new KeyEventHandler(LayoutRoot_KeyUp);
Clicky.Click += new RoutedEventHandler(Clicky_Click);
}

void LayoutRoot_KeyUp(object sender, KeyEventArgs e)
{
if (e.Key == Key.Enter)
{
ExecuteForm();
}
else
{
Block.Text += e.Key.ToString();
}
}

void ExecuteForm()
{
Block.Text = Box.Text;
}

void Clicky_Click(object sender, RoutedEventArgs e)
{
ExecuteForm();
}
}
}

Summary

In this article, we looked at how to add a Keystroke Event Handler to our Silverlight application. We also have a simple way to allow our users to press the Enter key to submit our forms. A running example of this code is just below this paragraph. Click here to download this code solution for Silverlight keystrokes. If the version below is not running properly, you can also see the Silverlight keystroke example running here.

4 thoughts on “Day #9: Using Keystrokes in Silverlight

  1. The downloads and external links are broken 😦

  2. I always wanted to write in my site something like that but I guess you'r faster 🙂

  3. The world always makes the assumption that the exposure of an error is identical with the discovery of truth–that the error and truth are simply opposite. They are nothing of the sort. What the world turns to, when it is cured on one error, is usually simply another error, and maybe one worse than the first one.

  4. Anyone that wants the presidency so much that he'll spend two years organizing and campaigning for it is not to be trusted with the office.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s