Handling Child Control Event in Listview using XAMARIN.FORMS

Nirmal Hota

10 Comments

Join the conversation! Your thoughts help the community grow.

Jose Picado8y ago
Excelente te agradezco mucho, busque por todo lado y no habia encontralo la ayuda que me diste
MANOJ JENA9y ago
Hi Nirmal, I have a requirement where I want to create 100 or more switch/toggle buttons and want to capture each Switch Button toggle action . Is there any simple way to create one function to capture all the ToggleEvents for Elements and publish the state when the application is loaded??
Luis Munoz9y ago
Hi, this is so nice, you really save my day, but i have a question, this doesn't work in windows phone, is there any posible solution? thanks
Prajakta Shinde10y ago
Hi, I have picker in each row of listview. How to get value of picker and how to get from which row it is selected? Xamarin.Forms
BUISSART THOMAS10y ago
Here, this design should not be followed, because it is a kind of hack of event pattern, using a CommandParameter (from ICommand Api). You implement an ICommand, for a certain type of parameter, and then in the xaml, you bind your Button.Command dependency property to your command instanciated in your viewmodel, and bind also the item (Current Binding Context of your ListViewItem) to the Command Parameter, and the job is done, more performant, mvvm compliant.
BUISSART THOMAS10y ago
In mvvm, you would bind your button to a Command.
sivashankar arumugam10y ago
Can you please share the workaround using mvvm in xamarin forms
Karthik Muthu Karuppan11y ago
Good one
Gowtham Rajamanickam11y ago
keep writing
Gowtham Rajamanickam11y ago
good one

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