How to handle Row selection and delete Button in Row For Custom ListView using Xamarin.Forms
In Our last tutorial we have seen how to add a Custom Cell in our ListView in Xamarin.Forms. In this tutorial we are going to see how to know which row or cell is clicked and implement Delete button in ListView for iOS and ContextView Delete for Android devices.
We are going to update code in our old ListViewXamarinForms solution, so if you don’t know how we implement it please refer it.
Let’s Start:
Row Selection:
For Row Selection in Xamarin.Forms there are 2 methods that can used to handle selection.
• ItemTaped
• ItemSelected
The basic difference between ItemTaped and ItemSelected is that ItemSelected Code that handles this event should first check thee.SelectedItem is not null because the event is called again when de-selecting the row
In our tutorial we are going to use ItemSelected:
|
1 2 3 4 5 |
listview1.ItemSelected += (sender, e) => { data d=(data) e.SelectedItem; DisplayAlert("ListView Item select",d.Name+" Selected","Ok"); }; |
We used ViewModel to store the data and Row Selection will return object of our ViewModel so first we have to cast it in our ViewModel object to access its value.
Then we simply display this row selection in Alert.
Delete Button in in ListView in iOS and Android (Context Action)
Context actions can be implemented in any Cell subclass (as long as it isn’t being used as a group header) by creating MenuItems and adding them to the ContextActions collection for the cell. You must at least configure the following:
• Text – the string that appears in the menu item.
• Clicked – the event when the item is clicked.
• IsDestructive – (optional) when true the item is rendered differently (eg. a red background on iOS).
In our tutorial we have class named ListCell that implement ViewCell class:
|
1 2 3 |
var deleteAction = new MenuItem { Text = "Delete", IsDestructive = true }; |
This will create a MenuItem and set it’s text to “Delete” and IsDestructive will show this button RED in iOS.
|
1 2 3 4 5 6 7 |
deleteAction.SetBinding (MenuItem.CommandParameterProperty, new Binding (".")); deleteAction.Clicked += (sender, e) => { data d; var mi = ((MenuItem)sender); d= (data)mi.CommandParameter; Debug.WriteLine ("delete Context Action clicked: " + mi.CommandParameter +"Name= "+ d.Name +" Number="+d.Number); }; |
We created and bind the MenuItem now we have to add this into the view so :
|
1 |
ContextActions.Add (deleteAction); |
Now try to build and run the app, if everything is done as we mention your application will look like this:
For iOS:
For Android:
If you like this tutorial then you can download full copy of the code from github.
Can you please post sample code snippet on how to delete multiple items in listview using checkbox and click on single delete button it has to delete and then update the listview.