Searching And Search Bar In Xamarin.Forms

Targeted Audience

• People with a basic knowledge of C# and Xamarin.
• Knowledge of creating ListView in Xamarin.

Tools

Visual Studio with Xamarin installed.

In each platform, there is a specially designed Search Bar control. The search bar does nothing other than trigger a command when you press search or enter text in it, as well as provide a few visual enhancements. The command is further used to search elements in the list and show them on the UI.

It looks something like the below image on UWP.

Now, let’s see how to achieve this. I hope you are familiar with the ListView. If not, then you should read my previous article “ListView And Creating List In Xamarin” or “Adding Pull To Refresh In Xamarin.Forms”. I have briefly discussed ListView in these articles. Here, I am going to tell only about the search bar. So, continuing from my previous article and considering we have a list, just put the tag “<SearchBar>” on the top of it.

SearchBar has different properties like placeholder and TextChanged which is basically an event. By hitting Enter on it, the event is automatically created.

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:PracApp1" 
    x:Class="PracApp1.MainPage" 
    x:Name="ContentPage1">
    
    <StackLayout>
        <SearchBar Placeholder="Search..." TextChanged="SearchBar_TextChanged"></SearchBar>
        
        <ListView x:Name="listView">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextCell Text="{Binding Name}" Detail="{Binding Address}" />
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage>

Now, in the xaml.cs file, create a GetContacts function which returns the list of contacts which is basically our class with two properties, as we did in the previous article. Receive an argument in GetContacts which will be the text from the search bar. The argument is set to null (which is optional). If we receive a text in this argument, the function will return the list of names including that text.

Now, in the SearchBar_TextChanged function, all we need is to just send the argument to the function GetContacts which is e.TextChanged. Here, “e” is the element - in this case, the SearchBar; and the “TextChanged” is its property which gives the text in it.

C# Code

IEnumerable<Contacts> GetContacts(string searchText = null)
{
    var contacts = new List<Contacts>
    {
        new Contacts { Name = "Josh", Address = "London" },
        new Contacts { Name = "Harry", Address = "New York" }
    };

    if (string.IsNullOrEmpty(searchText))
        return contacts;

    return contacts.Where(p => p.Name.StartsWith(searchText));
}

private void ListView_Refreshing(object sender, EventArgs e)
{
    listView.ItemsSource = GetContacts();
    listView.EndRefresh();
}

public MainPage()
{
    InitializeComponent();
    listView.ItemsSource = GetContacts();
    this.BindingContext = this;
}

private void SearchBar_TextChanged(object sender, TextChangedEventArgs e)
{
    listView.ItemsSource = GetContacts(e.NewTextValue);
}

The result will be like this.

You can see as the value changes in the SearchBar, the function will be called and will return the list of corresponding contacts. So, this article gave you a brief introduction of how to set searching on a list.