Design with Silverlight

One of the things I've seen asked a couple of times on the Silverlight.net forums is how to call two functions with one event handler. I'm not sure if this has been answered elsewhere, but I want to capture it here for my own reference.

By moving the event handlers into the code behind instead of placing them in the XAML, it's fairly easy to set up multiple event handlers for the same event.

Here's some sample XAML code for a simple button:

<Canvas
 xmlns="http://schemas.microsoft.com/client/2007"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 Width="640" Height="480"
 Background="White"
 x:Name="Page"
 >
 <Rectangle Width="153" Height="37" Stroke="#FF000000" Canvas.Top="164" Canvas.Left="205" RadiusY="9.5" RadiusX="9.5" x:Name="button">
  <Rectangle.Fill>
   <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#FF1016B7" Offset="0"/>
    <GradientStop Color="#FFFFFFFF" Offset="1"/>
   </LinearGradientBrush>
  </Rectangle.Fill>
 </Rectangle>
 <TextBlock Width="69" Height="24" Text="Click Me!" TextWrapping="Wrap" Canvas.Top="170.5" Canvas.Left="247" Foreground="#FFFFFFFF" IsHitTestVisible="False"/>
</Canvas>

Adding a few lines to the page.xaml.js file will attach two event handlers for the single "MouseLeftButtonDown" event:

if (!window.twoFunctions)
 window.twoFunctions = {};

twoFunctions.Page = function()
{
}

twoFunctions.Page.prototype =
{
 handleLoad: function(control, userContext, rootElement)
 {
  this.control = control;
  myButton = this.control.content.findName("button");
  
  // Event hookups: 
  myButton.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.handleMouseDown));
  myButton.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.handleMouseDown2)); 
 
 },
 
 // Event handlers
 handleMouseDown: function(sender, eventArgs)
 {
  alert("Function 1.");
 },

 handleMouseDown2: function(sender, eventArgs)
 {
  alert("Function 2.");
 }
 
 
}

Alternatively, the functions can be split out:

if (!window.twoFunctions)
 window.twoFunctions = {};

twoFunctions.Page = function()
{
}

twoFunctions.Page.prototype =
{
 handleLoad: function(control, userContext, rootElement)
 {
  this.control = control;
  myButton = this.control.content.findName("button");
  
  // Event hookups: 
  myButton.addEventListener("MouseLeftButtonDown", function1);
  myButton.addEventListener("MouseLeftButtonDown", function2); 
 
 }
 
}

// Event handlers
function function1(sender, eventArgs) {
 alert("Function 1.");
}

function function2(sender, eventArgs) {
 alert("Function 2.");
}
 

Here is the example.

This entry was posted on Thursday, February 14th, 2008 at 7:28 pm and is filed under Tutorial. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.