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

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace Removing_Items_From_ListView.Models {
public class Products {
public string Name {
get;
set;
}
public double Price {
get;
set;
}
}
}

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

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Removing_Items_From_ListView.Models;
using System.Collections.ObjectModel;
using Xamarin.Forms;
namespace Removing_Items_From_ListView.ViewModels {
class ProductsViewModel {
public ObservableCollection < Products > Products {
get;
set;
}
public Command < Products > RemoveCommand {
get {
return new Command < Products > ((Product) => {
Products.Remove(Product);
});
}
}
public ProductsViewModel() {
Products = new ObservableCollection < Products > {
new Products {
Name = "Laptop",
Price = 900
},
new Products {
Name = "XBox One",
Price = 400
},
new Products {
Name = "Desktop",
Price = 500
},
new Products {
Name = "Mobile",
Price = 600
},
new Products {
Name = "TV",
Price = 300
},
new Products {
Name = "Camera",
Price = 100
}
};
}
}
}

Step 9

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

XAML Code

<?xml version="1.0" encoding="utf-8" ?>
<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;
assembly=Removing_Items_From_ListView">
<ContentPage.BindingContext>
<ViewModels:ProductsViewModel/> </ContentPage.BindingContext>
<ListView ItemsSource="{Binding Products}" HasUnevenRows="True">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout>
<Label Text="{Binding Name}" />
<Label Text="{Binding Price}" />
<Button Text="Remove" Clicked="Remove_Clicked" /> </StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</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

using Removing_Items_From_ListView.Models;
using Removing_Items_From_ListView.ViewModels;
using System;
using Xamarin.Forms;
namespace Removing_Items_From_ListView {
public partial class MainPage: ContentPage {
public MainPage() {
InitializeComponent();
}
public void Remove_Clicked(object sender, EventArgs e) {
var button = sender as Button;
var product = button.BindingContext as Products;
var vm = BindingContext as ProductsViewModel;
vm.RemoveCommand.Execute(product);
}
}
}

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.