Windows Apps On All Devices

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.

Reference Behaviors SDK

Reference 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:


xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
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 Behaviors that you’re going to bind to that control with the following line of XAML:


<interactivity:Interaction.Behaviors>
</interactivity:Interaction.Behaviors>

The behavior that we are going to use for binding to the event on the command is one that comes bundled with the Behaviors SDK and that is the EventTriggerBehavior. The great thing about the SDK is that you can create your own custom behaviors but I will give a tutorial on that later this month.

Now, within our behaviors collection, we want to add the EventTriggerBehavior as a child as so:


<interactivity:Interaction.Behaviors>
    <core:EventTriggerBehavior EventName="Tapped">
    </core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>

The EventTriggerBehavior has a property called EventName that you need to manually add as 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 behavior, we are now going to add an action that will be fired when the EventTriggerBehavior is fired. The action we are going to be using for this tutorial is the InvokeCommandAction which is used to bind to an ICommand property on your view’s view model. This will look similar to this in your own project:


<interactivity:Interaction.Behaviors>
    <core:EventTriggerBehavior EventName="Tapped">
        <core:InvokeCommandAction Command="{Binding CaptureCommand}" />
    </core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>

You’ve now got your control that wasn’t originally bindable and created a binding to one of it’s events using Behaviors. If you’re wanting 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 this sample code which provides everything learned in this tutorial.

EventTriggerBehavior – Windows Phone 8.1 Sample Code

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

Join the discussion 3 Comments

  • q2p0 says:

    What a great tutorial !!! Very good.

    I have a question.

    I have many textblock redirected to the same command but with different parameter, so the xaml file is very large.

    Is it possible to encapsulate these labels …

    #interactivity:Interaction.Behaviors#
    #core:EventTriggerBehavior EventName=”Tapped”#
    #core:InvokeCommandAction Command=”{Binding CaptureCommand}” /#
    #/core:EventTriggerBehavior#
    #/interactivity:Interaction.Behaviors#

    … To reduce the size of XAML?

    As I do with the style:

    #Style x:Key=”calcButton” TargetType=”TextBlock”#
    #Setter Property=”FontSize” Value=”48″ /#
    #Setter Property=”TextAlignment” Value=”Center” /#
    #Setter Property=”VerticalAlignment” Value=”Center” /#
    #/Style#

    … Style=”{StaticResource calcButton} …

    Thank you very much.

  • q2p0 says:

    What a great tutorial !!! Very good.

    I have a question.

    I have many textblock redirected to the same command but with different parameter, so the xaml file is very large.

    Is it possible to encapsulate these labels …

    … To reduce the size of XAML?

    As I do with the style:

    … Style=”{StaticResource calcButton} …

    Thank you very much.

  • […] Show on Jan 05, 2015 Tags:   windows-phone , wpdev , james-croft Read original post at James Croft's BlogIn this short tutorial on using the Behaviors SDK in your Windows Phone 8.1 application, I’m […]

Leave a Reply