Handling Child Control Event in Listview using XAMARIN.FORMS

This article demonstrates the event handling of child controls in Listview using Xamarin.Forms

We can add child controls to Listview in Xamarin.Forms. In order to see the child control in action we will take an example. Let’s display a list of data in the Listview and perform delete option on the list data per row basis.

Since we need to add multiple columns in the list view, we need to use the DataTemplate to define the custom view. Let’s use a model class to assign the data to the custom view.

public class Item
{
   public string ItemName { get; set; }
   public string ItemDetails { get; set; }
}

We will use XAML to design a Listview

In the above XAML, we have used the StackLayout as the parent container for the child views. It contains a Label and a Listview. UI Control is ready.

Time to add event to the child control

We will replace the Button control in the above XAML with the following line

<Button Text="Delete" CommandParameter="{Binding ItemName}" Clicked="DeleteClicked"></Button>

With this new line we have added the Clicked Event handler to theButton control and also a CommandParameter in order to locate the item at runtime.

How the final XAML look like then ?

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="RelativeLayout.CustomerForm">
   <StackLayout>
      <Label x:Name="lbl1" Text="Items" VerticalOptions="StartAndExpand" HorizontalOptions="Center"></Label>
      <ListView x:Name="lstItems" VerticalOptions="FillAndExpand">
         <ListView.ItemTemplate>
            <DataTemplate>
               <ViewCell>
                  <ViewCell.View>
                     <StackLayout Orientation="Horizontal">
                        <Label Text="{Binding ItemName}" HorizontalOptions="StartAndExpand" FontSize="30"></Label>
                        <Button Text="Delete" CommandParameter="{Binding ItemName}" Clicked="DeleteClicked">
                        </Button>
                     </StackLayout>
                  </ViewCell.View>
               </ViewCell>
            </DataTemplate>
         </ListView.ItemTemplate>
      </ListView>
   </StackLayout>
</ContentPage>

Code behind for this XAML

public partial class CustomerForm : ContentPage
{
   public List<Item> allItems;


   public CustomerForm()
   {
      allItems = new List<Item>
      {
         new Item(){ItemName = "Rice", ItemDetails = "Rich in carbohydrates"},
         new Item(){ItemName = "Dal", ItemDetails = "Rich in protine"},
         new Item(){ItemName = "Milk", ItemDetails = "Rich in protine"},
      };
      InitializeComponent();
      lstItems.ItemsSource = allItems;
   }


   public void DeleteClicked(object sender, EventArgs e)
   {
      var item = (Xamarin.Forms.Button)sender;
      Item listitem = (from itm in allItems where itm.ItemName == item.CommandParameter.ToString() select
                        itm).FirstOrDefault<Item>();
      allItems.Remove(listitem);
   }
}

Running the app

Running fine. OOOPSSSSSSS… but the deletion is not working. That’s correct. Because, the item is getting deleted from the collection but the ItemSource is not getting refreshed.

What we need to do then ?????
Pretty simple. Let’s use an ObservableCollection to assign theItemSource.

Modifying the Model Class

public class Item
{
      public string ItemName { get; set; }
      public string ItemDetails { get; set; }
}

public class ItemList : INotifyPropertyChanged
{
      public event PropertyChangedEventHandler PropertyChanged;
      public ObservableCollection<Item> _items;

      public ObservableCollection<Item> Items
      {
         get { return _items; }
         set { _items = value; OnPropertyChanged("Items"); }
      }

      protected virtual void OnPropertyChanged(string propertyName)
      {
         if (PropertyChanged == null)
         return;
         PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
      }

      public ItemList(List<Item> itemList)
      {
         Items = new ObservableCollection<Item>();
         foreach (Item itm in itemList)
         {
            Items.Add(itm);
         }
      }
}

Added a new ObservableCollection class which will be used as theItemSource of the Listview.

Small changes in the code behind

public partial class CustomerForm : ContentPage
{
   public List<Item> allItems;
   ItemList items;

   public CustomerForm()
   {
      allItems = new List<Item>
      {
         new Item(){ItemName = "Rice", ItemDetails = "Rich in carbohydrates"},
         new Item(){ItemName = "Dal", ItemDetails = "Rich in protine"},
         new Item(){ItemName = "Milk", ItemDetails = "Rich in protine"},
      };
      InitializeComponent();
      items = new ItemList(allItems);
      lstItems.ItemsSource = items.Items;
   }


   public void DeleteClicked(object sender, EventArgs e)
   {
      var item = (Xamarin.Forms.Button)sender;
      Item listitem = (from itm in items.Items where itm.ItemName == item.CommandParameter.ToString() select                   itm).FirstOrDefault<Item>();
      items.Items.Remove(listitem);
   }
}

We have modified the code and added the ObservableCollectionobject in the ItemSource. So that the delete operation gets reflected in the Listview.

How is the output ?

Now, we can see the immediate effect of Delete button as soon as we click it.

Happy coding