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.
JEFF BLANKENBURG 
Leave a Reply