Jaliya's Blog: Using an ICommand for ListView Item Click in Windows Runtime Apps

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.

public class Item
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Description { get; set; }
    public double Price { get; set; }
 
    public static List<Item> GetItems()
    {
        return new List<Item>()
        {
            new Item() 
            { 
                Id = 1, 
                Name = "Item 1", 
                Description = "Item 1 Description", 
                Price = 120.00 
            },
            new Item() 
            { 
                Id = 2, 
                Name = "Item 2",
                Description = "Item 2 Description", 
                Price = 360.00 
            },
            new Item() 
            { 
                Id = 3, 
                Name = "Item 3", 
                Description = "Item 3 Description",
                Price = 590.00 
            }
        };
    }
}

Now I am adding the following ItemViewModel class to ViewModel folder.

public class ItemViewModel
{
   public List<Item> Items { get; set; }
 
   public ItemViewModel()
   {
       Items = Item.GetItems();
   }
}

Next, I am modifying the MainPage.xaml adding a ListView and changing it’s ItemTemplate to show only the Name of the item.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="20*"/>
        <RowDefinition Height="105*"/>
    </Grid.RowDefinitions>
 
    <StackPanel Grid.Row="1">
        <ScrollViewer>
            <ListView ItemsSource="{Binding Items}">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <StackPanel>
                            <TextBlock Text="{Binding Name}" 
                                       Style="{StaticResource ListViewItemTextBlockStyle}" />
                        </StackPanel>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </ScrollViewer>
    </StackPanel>
</Grid>

Now from the code behind of the MainPage.xaml I am setting up it’s DataContext to new ItemViewModel.

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
        this.DataContext = new ItemViewModel();
    }
}

Once I got all these steps completed and if I run the project, I am getting the following.

Initial Result

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”.

public class DelegateCommand<T> : ICommand
{
    private readonly Action<T> executeAction;
    Func<object, bool> canExecute;
 
    public event EventHandler CanExecuteChanged;
 
    public DelegateCommand(Action<T> executeAction)
        : this(executeAction, null)
    {
    }
 
    public DelegateCommand(Action<T> executeAction, Func<object, bool> canExecute)
    {
        this.executeAction = executeAction;
        this.canExecute = canExecute;
    }
 
    public bool CanExecute(object parameter)
    {
        return canExecute == null ? true : canExecute(parameter);
    } 



    public void Execute(object parameter)
    {
        executeAction((T)parameter);
    }
    public void RaiseCanExecuteChanged()
    {
        EventHandler handler = this.CanExecuteChanged;
        if (handler != null)
        {
            handler(this, new EventArgs());
        }
    }
}

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>.

public class ItemViewModel
{
    public List<Item> Items { get; set; }
    public DelegateCommand<ItemClickEventArgs> ItemClickedCommand { get; set; }
 
    public ItemViewModel()
    {
        Items = Item.GetItems();
        ItemClickedCommand = new DelegateCommand<ItemClickEventArgs>(OnItemClicked);
    }
 
    private void OnItemClicked(ItemClickEventArgs args)
    {
        Item item = args.ClickedItem as Item;
        // your navigation logic
    }
}

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”.

Opened 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.

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ListItemClickCommandDemo"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Interactivity="using:Microsoft.Xaml.Interactivity" 
    xmlns:Core="using:Microsoft.Xaml.Interactions.Core"
    x:Class="ListItemClickCommandDemo.MainPage"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
 
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="20*"/>
            <RowDefinition Height="105*"/>
        </Grid.RowDefinitions>
 
        <StackPanel Grid.Row="1">
            <ScrollViewer>
                <ListView ItemsSource="{Binding Items}"
                          IsItemClickEnabled="True">
                    <Interactivity:Interaction.Behaviors>
                        <Core:EventTriggerBehavior EventName="ItemClick">
                            <Core:InvokeCommandAction Command="{Binding ItemClickedCommand}" />
                        </Core:EventTriggerBehavior>
                    </Interactivity:Interaction.Behaviors>
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <StackPanel>
                                <TextBlock Text="{Binding Name}" 
                                           Style="{StaticResource ListViewItemTextBlockStyle}" />
                            </StackPanel>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </ScrollViewer>
        </StackPanel>
    </Grid>
</Page>

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.

Clicked Item

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.