When we are using MVVM, events triggered from the View should be bound to a ICommand in the ViewModel. In this post let’s see how we can bind an ItemClick event of a ListView to a implementation of a ICommand in the ViewModel.
For the demonstration purposes, I am going ahead with a Windows Phone App. I am creating a Blank Windows Phone App and there I am creating two folders named “Model” and “ViewModel”. I am creating the following class named “Item” inside the Model folder.
Now I am adding the following ItemViewModel class to ViewModel folder.
Next, I am modifying the MainPage.xaml adding a ListView and changing it’s ItemTemplate to show only the Name of the item.
Now from the code behind of the MainPage.xaml I am setting up it’s DataContext to new ItemViewModel.
Once I got all these steps completed and if I run the project, I am getting the following.
So now my requirement is once I click on a item, an event should be triggered and there I should be able get the clicked item information. So I can do whatever I want with that item like navigating to another page. And all these should be happened using an ICommand and not with the regular ItemClick event of the ListView. Now let’s see how we can achieve that.
First let’s create an implementation of an ICommand. I am creating a folder named “Common” and adding the following class named “DelegateCommand”.
Basically if you have created a Windows Runtime App other than using the blank app template, Visual Studio will create a folder named “Common” inside your project and he will be adding several boilerplated classes there. One of them is a class named “RelayCommand”. Here my DelegateCommand is a modified version of RelayCommand. I did some changes to make it generic.
Now let’s modified the ItemViewModel by adding a property of type DelegateCommand<ItemClickEventArgs>.
In the constructor, I am creating a new object of ItemClickedCommand passing in the Action method as OnItemClicked. Inside my OnItemClicked I can get the item information from which it was triggered.
Now let’s see how I can bind the created ItemClickedCommand to my ListView in the MainPage.xaml. The easy way to do this by using Blend. Right click on the MainPage.xaml and click on “Open in Blend”.
First open up the Objects and Timeline window, and drill up to ListView. Select the ListView and from the Assets window, select Behaviors and double click on EventTriggerBehavior. A new EventTriggerBehavior will be created under the ListView and now select the EventTriggerBehavior. From the Properties window, in the EventName dropdown, select the ItemClick. Now save the project and move back to Visual Studio.
Load the changes and now you will see two new xml namespaces are added (Microsoft.Xaml.Interactivity and Microsoft.Xaml.Interactions.Core) along with the EventTriggerBehavior. Modify the EventTriggerBehavior further as follows.
Now you can see that the DelegateCommand in the ViewModel is bound to InvokeCommandAction. And please note, for the ListView to be click enabled, I have set the IsItemClickEnabled to "True".
Now put a breakpoint to OnItemClicked method in the ViewModel and run the application and click on an item. Breakpoint will get hit and you can see it is successfully getting the clicked item information.
Now you can do whatever you want to do with item (navigate to another page showing detailed information of the item etc.). I choose to show details of an item in another page, and this is how it looks like.
So that’s it. I am uploading the sample to my OneDrive.