How to Use Behaviors to Bind to Events on Non-MVVM Friendly Controls

In this short tutorial on using the Behaviors SDK in your Windows Phone 8.1 application, I'm going to show you how you can quickly bring your app up to scratch with MVVM by binding to events using Behaviors.

The Behaviors SDK has been around for quite some time for Windows Store apps but with the introduction of the universal app model, it has seen its way onto the Windows Phone platform.

Before we start, this tutorial requires that you have some knowledge of the MVVM pattern and that your project is set up in this method with a view and accompanying view model.

To get yourself started with Behaviors, you'll want to add a reference to the SDK in your project from the Extensions sub-category of Windows Phone 8.1.

Behaviors SDK

Now that you've referenced the SDK, you're going to want to add it into your XAML where you want to use them. For this tutorial, I'm going to show you how you can bind a command to a 'Tapped' event on a control. Usually you would have to create a method within the code behind of your page to handle these types of events, but the use of Behaviors means that we can send the fired event off to the view model.

You'll need to add two namespaces to your XAML page and these are:

  1. xmlns:interactivity="using:Microsoft.Xaml.Interactivity"    
  2. xmlns:core="using:Microsoft.Xaml.Interactions.Core"    
Now is the fun part where we get to use the power of Behaviors to handle an event with a bound command following the MVVM pattern.

Where you've declared a control in your XAML, open it with a closing tag if you've not already. Within that element, you want to declare a collection of Behaviours that you're going to bind to that control with the following lines of XAML:
  1. <interactivity:Interaction.Behaviors>   
  2. </interactivity:Interaction.Behaviors>   
The behaviour that we will use for binding to the event on the command is one that comes bundled with the Behaviours SDK and that is the EventTriggerBehavior. The great thing about the SDK is that you can create your own custom behaviours but I will provide a tutorial on that later this month.

Now, within our behaviors collection, we want to add the EventTriggerBehavior as a child as so:
  1. <interactivity:Interaction.Behaviors>   
  2. <core:EventTriggerBehavior EventName="Tapped">   
  3. </core:EventTriggerBehavior>   
  4. </interactivity:Interaction.Behaviors>   
The EventTriggerBehavior has a property called EventName that you need to manually add since the XAML behavior doesn't know what events are being exposed on the control you're attempting to bind to. The name you enter here needs to be the exact name of the event with the correct casing.

Within this behaviour, we are now going to add an action that will be fired when the EventTriggerBehavior is fired. The action we will be using for this tutorial is the InvokeCommandAction that is used to bind to an ICommand property on your view's view model. This will look similar to this in your own project:
  1. <interactivity:Interaction.Behaviors>   
  2. <core:EventTriggerBehavior EventName="Tapped">   
  3. <core:InvokeCommandAction Command="{Binding CaptureCommand}" />   
  4. </core:EventTriggerBehavior>   
  5. </interactivity:Interaction.Behaviors>   
You now have your control that wasn't originally bindable and have created a binding to one of it's events using Behaviors. If you want to send a parameter to your command when the event is fired, you can also add the CommandParameter property to the InvokeCommandAction, however if you're not using a CommandParameter, the event will pass its EventArgs through which you can also take advantage of in your command's method.

If you'd like to see this in action, you can download the attached sample code that provides everything learned in this tutorial.

Have any questions? Let me know in the comments section below and I will get back in touch!


Similar Articles