How to remove an item from a Xamarin Forms ListView?

Question

I'm trying to remove items/rows from a ListView but the difficulty is that I need to also pass in some delegate or fire some event or something, so when a person clicks a button to remove that row, my code handles some other logic, elsewhere (eg. remove the item from the DB or whatever).

I have a custom control I made:

public class SportsTeam : StackLayout { .. }

Inside this control, one of the elements is a ListView which lists all the people in a sporting team.

var viewModel = teamMembers.Select(x => new SportsTeamViewModel(x));

return new ListView
{
    HasUnevenRows = true,
    ItemSource = viewModel,
    ItemTemplate = new DataTemplate(typeof(SportsTeamViewCell)); 
};

Inside the SportsTeamViewCell I have the following:

private Grid CreateContent()
{
    var grid = new Grid();
    // Setup row and column definitions.
    // Add items to the Grid 
    grid.Children.Add(...);

    var removeButton = RemoveButton;
    grid.Children.Add(removeButton);
    Grid.SetRowSpan(removeButton, 2);

    return grid;
}

private Button RemoveButton
{
    get
    {
        var button = new Button
        {
            Image = "Icons/remove.png"
        };

        return button;
    }
}

From here, I don't know how to make it so that the button fires an event or some delete could be passed in via the constructor, so some custom logic is performed against the individual cell/row/item that is to be removed.

Pass the Id of the Row to be deleted into click event handler of the RemoveButton. — Rohit Vipin Mathews
How do I find the Id of the row to be deleted? Or can each row have another special Id which I give it? like some hidden magical id? Or the value of something else from the bound data? eg. the Id or UserName or whatever .... — Pure.Krome
Yes, you have to use the Bindings and bind your model's Id property to click event of button. — Rohit Vipin Mathews

Rohit Vipin Mathews Rohit Vipin Mathews · Accepted Answer · 2015-09-23T07:53:41

Here is what you could do :

This be my model class :

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

And in my XAML or you can write this in code as well, bind to the Command Parameter of your Item template :

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

Full Item Template will be like below :

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

And in you code file you can do this :

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);  
}

IMPORTANT : This would only delete the item from the bound collection. To delete it from the original list you need to use ObservableCollection

Here is the full source code of the explained scenario - Handling Child Control Event in Listview using XAMARIN.FORMS.

Also the Tutorial - How to handle Row selection and delete Button in Row For Custom ListView using Xamarin.Forms explain deletion from a listview as well.

How to remove an item from a Xamarin Forms ListView?

3 Answers