As mentioned previously, we can add events on both the UI (XAML) layer and code behind. Adding events with XAML is as easy as typing the event and specifying its handler. For example, the following line of code demonstrates how to declare a Click handler for a button using XAML:

<Button x:Name="myBtn" Content="Click me!" Click="myBtn_Click"/>

By specifying the Click method in XAML, Visual Studio creates the event handler (myBtn_Click) in the code behind of the page. If you take a look in the code behind file, you will see the following method:

private void myBtn_Click(object sender, RoutedEventArgs e)
{
}

The other option of adding an event is purely on the code behind file. To attach an event handler for the Click event of a button, we can use the following line of code:

myBtn.Click += new RoutedEventHandler(myBtn_Click);

This will also get Visual Studio to create the event handler for us, in this case the event handler will be myBtn_Click, as specified in the declaration code.

Now that we know the basics of adding events in Silverlight, let's go ahead and understand the concept of routed events.

As we have discussed earlier, when using routed events, the control that raised the event isn't necessarily the one that handles it. This means that the bubbling begins with the control that raised the event and stops when a control, somewhere up the hierarchy handles the event, or when it reaches the top-level control.

Control-specific events, for example the Click event for a Button control, will never be routed. If you think about that, it's pretty logical too—why make an event bubble up the control hierarchy if it can only be handled by a specific type of control?

To demonstrate routed events, create a new Silverlight project in Visual Studio 2010 and name it Chapter4-HandleEvents.

Open MainPage.xaml and replace your LayoutRoot Grid element with the following code snippet:

<Grid x:Name="LayoutRoot" Background="White" MouseLeftButtonUp="LayoutRoot_MouseLeftButtonUp">
<Border x:Name="myBorder" Background="Aqua" Margin="20" MouseLeftButtonUp="myBorder_MouseLeftButtonUp">
<StackPanel Background="Red" x:Name="myStackPanel" Margin="20" MouseLeftButtonUp="myStackPanel_MouseLeftButtonUp">
<Rectangle Margin="20" Height="180" x:Name="myRectangle" Fill="DarkSalmon" MouseLeftButtonUp="myRectangle_MouseLeftButtonUp"/>
</StackPanel>
</Border>
</Grid>

What we have here is a hierarchy of controls, starting with the top-level Grid. Inside Grid, we have a Border child element, which in turn holds a StackPanel child element, which in turn holds a Rectangle child element. Each element has a MouseLeftButtonUp event attached to it. Before we can run the application, we have to handle these events, so switch over to your MainPage.xaml.cs file and add the following code snippet:

private void LayoutRoot_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
results += "LayoutRoot handled the event";
MessageBox.Show(results);
results = "";
}
private void myBorder_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
results += "myBorder handled the event
";
}
private void myStackPanel_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
results += "myStackPanel handled the event
";
}
private void myRectangle_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
results += "myRectangle handled the event
";
}

Add the following private variable just above the MainPage constructor declaration:

private string results = "";

To recap, we have added all the event handlers for the events we declared in the UI layer. Each handler will add its name to the private string variable, and the LayoutRoot event handler will pop up a message box to the user with the content of the results variable.

Go ahead and build your application. Run it and you should get the following result:

In the preceding diagram, we can see all of our controls. The white area is the top-level Grid, below it we have our Border, then StackPanel, and finally the salmon-colored Rectangle. Click on the Rectangle element and you should get the result, as shown in the following screenshot:

As you can see, the MouseLeftButtonUp event has bubbled up all the way to the LayoutRoot control, which handled it. We know it was the LayoutRoot event handler that finally handled it because it was the only event that popped out a message box for us. Click on any of the other controls and you will see that the event will always bubble up to the top-level control of the hierarchy.

Now you may ask yourself what if we wanted to stop the bubbling at the Border control?

The answer to that is very easy—we set the Handled property of the desired event handler's MouseButtonEventArgs to true!

Switch back to your MainPage.xaml.cs file and locate the myBorder_MouseLeftButtonUp event handler. Add the following line of code at the end of the method:

e.Handled = true;

Build and run your application, and you should notice that the pop-up message doesn't show up unless you click directly on the Grid control area (the white background). By setting the Handled property, we have successfully told Silverlight that the event was handled and there is no need for it to keep bubbling up.

this.AddHandler(UIElement.MouseLeftButtonUpEvent, new MouseButtonEventHandler(LayoutRoot_MouseLeftButtonUp), true);

e.Handled = true;