Removing Items From ListView Using Xamarin.Forms

Introduction

In one of my previous articles, we discussed how to add an item in the ListView. Now, in this article, we will discuss how to remove an item from the ListView. So, let's dive into the article.

Prerequisites
  • Windows 10 
  • Visual Studio 2017 Community Edition
  • Xamarin Package
Step 1
  • Open Visual Studio 2017 Community Edition
  • Create a new project by going to File -> New -> Project.
  • A new window will open. Select Visual C# -> Cross-Platform under installed.
  • Now, on the right side, select Cross-Platform App (Xamarin) and then give the suitable name for the project, select the destination folder for the project, and click OK.
 

Step 2

Now, a new window will open. Select Blank App -> Xamarin.Forms ->Portable Class Library (PCL) and then click OK.

 

Step 3

Select the Target version and minimum version for your project to run the UWP application on any device and then click OK.

 

Step 4

After creating the project, open the solution explorer and set the Portable Class as Startup Project.

 

Step 5

Now, in Portable Class, add 3 new folders - Models, ViewModels, and Views.

 

Step 6

Now, in Models folder, create a new class ContentPage called Products. Similarly, under ViewModels, create a new class called ProductsViewModel. Now, in Views folder, drag and drop the MainPage.xaml file.

 

Step 7

Now, in Products, write the following C# code for receiving and storing the name and price of the items.

C# Code
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Text;  
  5. using System.Threading.Tasks;  
  6. namespace Removing_Items_From_ListView.Models {  
  7.     public class Products {  
  8.         public string Name {  
  9.             get;  
  10.             set;  
  11.         }  
  12.         public double Price {  
  13.             get;  
  14.             set;  
  15.         }  
  16.     }  
  17. }  
 
Step 8

Now, under ProductsViewModel, write the following C# Code for executing the delete/remove command on the ListView and for adding the products and price to the ListView.

C# Code
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Text;  
  5. using System.Threading.Tasks;  
  6. using Removing_Items_From_ListView.Models;  
  7. using System.Collections.ObjectModel;  
  8. using Xamarin.Forms;  
  9. namespace Removing_Items_From_ListView.ViewModels {  
  10.     class ProductsViewModel {  
  11.         public ObservableCollection < Products > Products {  
  12.             get;  
  13.             set;  
  14.         }  
  15.         public Command < Products > RemoveCommand {  
  16.             get {  
  17.                 return new Command < Products > ((Product) => {  
  18.                     Products.Remove(Product);  
  19.                 });  
  20.             }  
  21.         }  
  22.         public ProductsViewModel() {  
  23.             Products = new ObservableCollection < Products > {  
  24.                 new Products {  
  25.                     Name = "Laptop",  
  26.                         Price = 900  
  27.                 },  
  28.                 new Products {  
  29.                     Name = "XBox One",  
  30.                         Price = 400  
  31.                 },  
  32.                 new Products {  
  33.                     Name = "Desktop",  
  34.                         Price = 500  
  35.                 },  
  36.                 new Products {  
  37.                     Name = "Mobile",  
  38.                         Price = 600  
  39.                 },  
  40.                 new Products {  
  41.                     Name = "TV",  
  42.                         Price = 300  
  43.                 },  
  44.                 new Products {  
  45.                     Name = "Camera",  
  46.                         Price = 100  
  47.                 }  
  48.             };  
  49.         }  
  50.     }  
  51. }  
Step 9

Now, open MainPage.xaml file and write the following XAML code.

XAML Code
  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:Removing_Items_From_ListView" x:Class="Removing_Items_From_ListView.MainPage" xmlns:ViewModels="clr-namespace:Removing_Items_From_ListView.ViewModels;  
  3. assembly=Removing_Items_From_ListView">  
  4.     <ContentPage.BindingContext>  
  5.         <ViewModels:ProductsViewModel/> </ContentPage.BindingContext>  
  6.     <ListView ItemsSource="{Binding Products}" HasUnevenRows="True">  
  7.         <ListView.ItemTemplate>  
  8.             <DataTemplate>  
  9.                 <ViewCell>  
  10.                     <StackLayout>  
  11.                         <Label Text="{Binding Name}" />  
  12.                         <Label Text="{Binding Price}" />  
  13.                         <Button Text="Remove" Clicked="Remove_Clicked" /> </StackLayout>  
  14.                 </ViewCell>  
  15.             </DataTemplate>  
  16.         </ListView.ItemTemplate>  
  17.     </ListView>  
  18. </ContentPage>  
 

Step 10

Open MainPage.xaml.cs file and write the following code for execution of the MainPage.xaml file or your application to remove the product's details from screen.

C# Code
  1. using Removing_Items_From_ListView.Models;  
  2. using Removing_Items_From_ListView.ViewModels;  
  3. using System;  
  4. using Xamarin.Forms;  
  5. namespace Removing_Items_From_ListView {  
  6.     public partial class MainPage: ContentPage {  
  7.         public MainPage() {  
  8.             InitializeComponent();  
  9.         }  
  10.         public void Remove_Clicked(object sender, EventArgs e) {  
  11.             var button = sender as Button;  
  12.             var product = button.BindingContext as Products;  
  13.             var vm = BindingContext as ProductsViewModel;  
  14.             vm.RemoveCommand.Execute(product);  
  15.         }  
  16.     }  
  17. }  
 

Step 11

Finally, build your application and run it on your respective environment, i.e., on UWP, Android or iOS.


 

After clicking on remove buttons for deleting/removing, the following screenshot example should appear.

 

Conslusion

Now, we have successfully created an application that deletes/removes an item from the ListView.