Windows Phone Fundamentals–3 Ways To Handle Events

Windows Phone From Scratch

One potential area of confusion for programmers new to Silverlight and Windows Phone is that there are (at least) three distinct ways to handle events. 

• Name the event handler in the Xaml
• Name the event handler in the constructor
• Use an anonymous delegate via a Lambda expression

Let’s review all three. To do this, we’ll need a new application with a TextBox, a Button and a TextBlock.  When the button is pressed the text from the TextBox (entered by the user) will be written into the TextBlock and the TextBox will be cleared. 

To start, create a new Windows Phone application and add two rows, the first with a TextBox and a Button (and therefore, within a StackPanel) and the second with a TextBlock.  Make sure you understand why you need a StackPanel (if not, see this article). 

Here’s the Xaml you’ll need,

 <!--ContentPanel - place additional content here-->
 <Grid
     x:Name="ContentPanel"
     Grid.Row="1"
     Margin="12,0,12,0">
     <Grid.RowDefinitions>
         <RowDefinition
             Height="1*" />
         <RowDefinition
             Height="1*" />
         <RowDefinition
             Height="4*" />
     </Grid.RowDefinitions>
     <StackPanel
         Grid.Row="0"
         HorizontalAlignment="Stretch"
         VerticalAlignment="Stretch"
         Orientation="Horizontal">
         <TextBox
             Name="NewText"
             Width="300"
             Margin="5" />
         <Button
             Name="ShowText"
             Content="Show"
             Margin="5" />
     </StackPanel>
     <TextBlock
         Name="Message"
         Grid.Row="1"
         HorizontalAlignment="Stretch"
         VerticalAlignment="Stretch"
         Margin="5"
         Text="Ready..." />
     
 </Grid>

Adding The Event Handler In The Xaml

The first of the three ways to manage the event handler is to add it to the Xaml. Since the event is the Button being clicked, you add a click event handler name to the Button itself.

The very best way to do this is to click on the Button and then to go to the properties Window and click on the Events Button (see figure).   Find the Click Event and double click in the text box in the right hand column. 

Visual Studio will create an event handler name for you ( in the pattern: ControlName_EventName, in this case ShowText_Click) and will also create the stub of the event handler in the code behind, and place you within the event handler.  You have then only to fill in the event semantics,

private void ShowText_Click( object sender, RoutedEventArgs e )
{
   Message.Text = NewText.Text;
   NewText.Text = string.Empty;   
}

Take a look at the Xaml and you’ll see that Visual Studio has identified the event handler in the Xaml for the Button.

<Button
    Name="ShowText"
    Content="Show"
    Margin="5"
    Click="ShowText_Click" />

Adding the Event Handler In Code

An alternative to  the above, and one I personally prefer, is to have all the event handlers identified in code. The simplest way to do this is to name the event handler in the constructor. Once again, Visual Studio will be tremendously helpful.  When you type the name of the control (ShowText) Intellisense will pop up with the name of all the events.

Choose click and enter += followed by a space. Once again, Intellisense will pop up and offer to create the event handler for you. Press tab to accept and Intellisense will now offer to name the event handler for you.  Press tab and Visual Studio completes the identification of the event handler, stubs out the event handler and places you within the event handler to complete the code.

ShowText.Click += new RoutedEventHandler(ShowText_Click);

It turns out, by the way, that Visual Studio is being very conservative. Since these event handler types are already declared (within the hidden part of the class) you can actually shorten your event handler declaration to,

ShowText.Click +=  ShowText_Click ;

Using A Lambda Expression

It is becoming increasingly common to use a Lambda Expression to create the event handler in line within the constructor, rather than calling a separate event handler.  While I see the benefit of doing this when the event handler is a single line, it does seem to clutter the constructor with anything larger. Nonetheless, here is how you would write this event handler, using a Lambda expression:

public MainPage()
{
    InitializeComponent();
    ShowText.Click += ( o, e ) =>
    {
        Message.Text = NewText.Text;
        NewText.Text = string.Empty;
    };
}

The syntax here requires an understanding of Lambda Expressions.

First, you read it as “ShowText’s click method adds an event handler that receives two parameters, o and e. o and e goes to (=>)… the contents of the braces. 

You can map a Lambda Expression back to a method as follows:

• What is in the parentheses maps to the arguments of the method
• What is in the braces maps to the body of the method

thus, you can imagine that this Lambda expression maps to an (unnamed) method that might look like this,

private void Unnamed( object o, RoutedEventArgs e )
{
   Message.Text = NewText.Text;
   NewText.Text = string.Empty;   
}

All three of these approaches work and are perfectly valid. Which you use is entirely a matter of personal taste.