Binding WPF Events to MVVM ViewModel Commands

9 Replies

This article looks at binding event on WPF controls to commands in your MVVM view model.

A lot of MVVM examples show you how to bind a command in a view to an ICommand in your view model. What they sometimes skirt over, is how you get events into the view model. Prism for example recommends the use of an Event Aggregator.

However, there is an easier way! All we need is a class library that is part of Expression Blend. It’s called System.Windows.Interactivity and you can get hold of it from a variety of sources, but the one I recommend is the MVVM Light library.

This gives you the ability to create a trigger on an event and bind it to an ICommand on the view model.

xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" 

<Button>
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="MouseEnter" >
            <i:InvokeCommandAction Command="{Binding FooCommand}" />
        </i:EventTrigger>
    </i:Interaction.Triggers>
</Button>

Assuming the DataContext is your view model, then the above will map the ‘MouseEnter’ event to ‘FooCommand’ on the view model.

The only issue here, is that InvokeCommandAction doesn’t give you the event parameters.

I’ve already mentioned MVVM Light, and this library provides the a solution, by offering a different event to command behaviour that can optionally pass the parameters. Like this:

xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" 
xmlns:cmd="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras.WPF4"

<Button>
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="MouseEnter" >
             <cmd:EventToCommand Command="{Binding FooCommand}"
                 PassEventArgsToCommand="True" />
        </i:EventTrigger>
    </i:Interaction.Triggers>
</Button>

With this, you’ll find the MouseEventArgs in the Object passed into your command.

9 thoughts on “Binding WPF Events to MVVM ViewModel Commands”

  1. Pingback: Binding a DevExpress Grid Context Menu to a MVVM ViewModel Command | | Dan HarmanDan Harman

  2. Farzad Jalali

    Hi Dan,

    very good article !
    I have a situation that I need to do the first sample of binding event to command in my code behind.
    I wonder if you can advise me by creating the first sample in code behind please?

    Thanks,
    Farzad

    Reply ↓
  3. Meena

    I am so new to WPF…and I need to use command binding for different button appearances in the same window(totally 5 buttons i had).any one please help me..
    thanks in advance..

    Reply ↓
  4. mohammad

    Hi, thanks for this post
    When i want use EventToCommand in xaml it says:

    A value of type ‘EventToCommand’ cannot be added to a collection or dictionary of type ‘TriggerActionCollection’

    Could you help me on this?

    Reply ↓
  6. Vivane

    Hi!
    This part invokes the ICommand in ViewModel, very well:-


    This does not invoke the ICommand in ViewModel
    ****


    *****

    Can you tell me why?
    Thanks

    Reply ↓
  7. Vivane

    Hi!
    This part invokes the ICommand in ViewModel, very well:-


    This does not invoke the ICommand in ViewModel:-


    Can you tell me why?

    Thanks

    Reply ↓

Leave a Reply