Handling UI Control's Events in ViewModel (Prism 5.0)

Recently I came across a requirement in which I was supposed to data bind a command from my viewModel to an event. In other words, my code-behind was not supposed to contain any code related to event handlers of a control.

After digging more into Prism, luckily I found my answer. That requirement can be satisfied using the InvokeCommandAction provided in Prism 5.0.

Well, so my article will elaborate more on how to do this.

InvokeCommandAction

InvokeCommandAction allows us to invoke an ICommand implementation on our viewModel to an event that exists on our control. It basically means we are no longer bound or required to have a command property on a control to invoke a command.

Now, you may say you have seen this similar thing before. And you are right because the Blend SDK ships one. But the InvokeCommandAction that Prism provides is a little bit different in two ways.

• First, it manages the state of the element. It updates the enable state of the control that it is attached to based on the return value of the command CanExecute. So, here you are getting the same behavior that you do for any control, which is super cool. Isn't it?
• Second, it allows us to pass event arguments as a parameter to the command.

Now one may ask whether we need to pass an entire EventArgs as the parameter or can we just pass the required stuff?

And the answer is yes. Of course, you are not forced to pass an entire EventArgs to your ViewModel. One can also pass a specific portion of an EventArgs that is really required. This can be done by setting a TriggerPathParameter on the InvokeCommandAction. Let's quickly jump to the code.

Using Code

To explain the notion of InvokeCommandAction, I'll create a very simple application having a ListBox and a Label. The Label will be updated based on the selected item in the list.

Expectation, Whenever an item is selected in the list, we need to listen to the SelectionChanged event and then handle that event in the ViewModel through the command and then update the selected text item on the Label.

Setting up a View

<StackPanel HorizontalAlignment="Left" VerticalAlignment="Top">
    <ListBox Height="100" Width="300" Margin="1,20,0,0" ItemsSource="{Binding ListOfItems}" SelectionMode="Single"/>
    <Label FontWeight="Bold" Width="170" Height="30" Content="Please select"/>
</StackPanel>

I am setting a data context for this view in the code behind it. But the same can be done in XAML also.

Setting up a ViewModel

Here I'll not explain each and every line of the viewModel's code since I already covered the same in my other articles in a detailed manner.

public class MainWindowViewModel : BindableBase
{
    public ObservableCollection<string> ListOfItems { get; set; }
    public ICommand SelectCommand { get; set; }

    private string _selectedItem = string.Empty;
    public string SelectedItem
    {
        get { return _selectedItem; }
        set { SetProperty<string>(ref _selectedItem, value); }
    }

    public MainWindowViewModel()
    {
        ListOfItems = new ObservableCollection<string>() { "One", "Two", "Three", "Four", "Five" };
        SelectCommand = new DelegateCommand<object[]>(SetSelectedItem);
    }

    private void SetSelectedItem(object[] listOfItems)
    {
        if (listOfItems != null && listOfItems.Count() > 0)
        {
            SelectedItem = listOfItems.FirstOrDefault().ToString();
        }
    }
}

If you notice the parameter of DelegateCommand, it is an object array. That's because our viewModel will expect a command action in the form of an object array from the list of items we want to choose from.

The next thing is to handle a SelectionChanged event of our ListBox but we don't want to handle that in our code-behind since we are dealing with an MVVM structure. So, to get this behavior, we will use triggers.

Let's go ahead and add a reference to System.Windows.Interactivity and add the namespace in XAML as,

xmlns:interactivity="http://schemas.microsoft.com/expression/2010/interactivity"

Now the preceding namespace can be used to attach the interaction triggers to the attached property as,

<ListBox Height="100" Width="300" Margin="1,20,0,0" ItemsSource="{Binding ListOfItems}" SelectionMode="Single">
    <interactivity:Interaction.Triggers>
        <!-- Add your triggers here -->
        <!-- Example trigger:
        <interactivity:EventTrigger EventName="SelectionChanged">
            <interactivity:InvokeCommandAction Command="{Binding YourCommand}" />
        </interactivity:EventTrigger>
        -->
    </interactivity:Interaction.Triggers>
</ListBox>

Next what we need to add is the EventTrigger with an EventName property set to SelectionChanged. Please note, that your EventName should match the event of the control. In this case, we are interested in ListBox's SelectionChanged event.

Now whenever this event occurs, we want to invoke our command. So, this is where we are using our Prism's InvokeCommandAction as,

<ListBox Height="100" Width="300" Margin="1,20,0,0" ItemsSource="{Binding ListOfItems}" SelectionMode="Single">
    <interactivity:Interaction.Triggers>
        <interactivity:EventTrigger EventName="SelectionChanged">
            <prism:InvokeCommandAction Command="{Binding SelectCommand}"/>
        </interactivity:EventTrigger>
    </interactivity:Interaction.Triggers>
</ListBox>

Let's quickly run the application and see how it reacts.

As soon as you try to select any item in the ListBox, you will get a big exception as follows.

It appears that the parameter being passed to a command is the SelectionChangedEventArgs. We don't want that. We want something specific, we want our object.

So, let's return to our InvokeCommandAction and set the property TriggerParamaterPath to the path of the incoming EventArgs of the trigger. In our case, we want the AddedItems. Hence.

<ListBox Height="100" Width="300" Margin="1,20,0,0" ItemsSource="{Binding ListOfItems}" SelectionMode="Single">
    <interactivity:Interaction.Triggers>
        <interactivity:EventTrigger EventName="SelectionChanged">
            <prism:InvokeCommandAction Command="{Binding SelectCommand}" TriggerParameterPath="AddedItems"/>
        </interactivity:EventTrigger>
    </interactivity:Interaction.Triggers>
</ListBox>

Now when you run the application, you will get the output as expected.

I hope you enjoyed learning!!!