Search Data From Xamarin.Forms List View

Introduction

In this article, we are going to search some data from ListView of Xamarin.Forms. Firstly, we will create a list in Xamarin.Forms PCL application. Then, add some data in the list and make a search bar to search the data from the list.

What is Search Bar?

It is part of UI elements of Xamarin.Forms and is used to search the data from a list or web page or anything. You can place the search bar to make a search from web or from anywhere else. Most of us use search bar on Google homepage or on any other search engine.

Implementation

We are going to code in the following steps.

• Creating a UI
• Make a class and set binding to List View
• Add data to the list and add Functionality to search bar

Creating a UI

First of all, create a Xamarin.Forms project. If you are going to create your first Xamarin.Forms application, then this article will be helpful for you. So, create an application and make a ListView and search bar on XAML file. We can use stack layout and add a search bar and list view in stack layout. Search bar is placed on top of list.

Xaml

Add Binding to List View

In the above code, we create a List View and a text cell in that. Now, we are going to set binding to the ListView. So, the data is shown properly in a text cell.

Firstly, make a class of contacts that contains two properties Name and Num. Just like this.

Class Code

Now, add the binding to text cell of a ListView. Replace the text cell code from your previous XAML.

Here, our class is made and binding is set. Now, it’s time to do some code in xaml.cs file.

Add data in ListView and functionality to Search Bar

First, we will create a list of our contacts class, then initialize it and add some data. After this, we will set the item source of ListView to the list of contacts. This code will add the data to our ListView.

Output



Adding functionality

Make an event handler of Text Changed functionality of search bar. Just like this.