SearchBar Control In Xamarin.Forms Application For Android And UWP

SearchBar control is a View control, which provides a Search Box.

Before reading this article, please go through the article How To Create And Use XAML Content Page In Xamarin.Forms Application For Android And Universal Windows Platform.

After reading this article, you will learn how to add SearchBar control in Xamarin.Forms Application for Android and Universal Windows Platform with XAML and Visual C# in cross platform application development.

The important tools are given below, which are required to developing UWP.

1. Windows 10 (Recommended).
2. Visual Studio 2015 Community Edition (It is a free software available online).
3. Using Visual studio 2015 Installer, enable Xamarin (cross platform mobile development and C#/.NET, while installing/modifying Visual Studio 2015.

Now, we can discuss step by step app development.

Step 1

Open Visual Studio 2015 -> Start -> New Project-> Select Cross-Platform (under Visual C#-> Blank app (Xamarin.Forms Portable)-> Give the suitable name for your app (XamFormSearchBar) ->OK.



Step 2

Now, create project “XamFormSearchBar_Droid”.



Choose the Target and minimum platform version for your Universal Windows Project.



Create project “XamFormSearchBar_UWP”.



Step 3

Afterwards, Visual Studio creates 6 projects and displays Getting Started.XamarinPage. Now, we have to update Xamarin.Forms Reference for Portable Project and XamFormSearchBar_Droid project.

(Please refer How To Create And Use XAML Content Page In Xamarin.Forms Application For Android And Universal Windows Platform)

Step 4

Add a XAML page for SearchBar Control Demo, right click XamFormSearchBar (Portable) project, select ADD-> NewItem.



Select ->CrossPlatform-> FormXamlPage-> Give the relevant name.



Step 5

Add SearchBar Tag, ListView with ItemTemplate and Labels in SearchBarDemo.Xaml are given below.

<StackLayout Orientation="Vertical">
    <Label/>
    <Label Text=" SearchBar in Xamarin.Forms Application - UWP and Android Demo" FontSize="20" />
    <Label/>
    <Label/>
    <Label/>
    <SearchBar x:Name="searchBar" HorizontalOptions="Center" Placeholder="Search text" TextChanged="OnSearchBarTextChanged" SearchButtonPressed="OnSearchBarButtonPressed" />
    <ListView x:Name="lvSearch" IsPullToRefreshEnabled="true">
        <ListView.ItemTemplate>
            <DataTemplate>
                <TextCell Text="{Binding SName}" /> </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</StackLayout>

Step 6

Add the code given below in SearchBarDemo.Xaml.cs.

using Xamarin.Forms;
using System.Collections.ObjectModel;
public class LVsearItem {
    public string SName {
        get;
        set;
    }
}
private readonly ObservableCollection < LVsearItem > Iitem;
public SearchBarDemo() {
    InitializeComponent();
    ObservableCollection < LVsearItem > items = new ObservableCollection < LVsearItem > ();
    items.Add(new LVsearItem() {
        SName = "C Sharp corner"
    });
    items.Add(new LVsearItem() {
        SName = "C Sharp"
    });
    items.Add(new LVsearItem() {
        SName = "C Sharp Programming"
    });
    items.Add(new LVsearItem() {
        SName = "Microsoft"
    });
    items.Add(new LVsearItem() {
        SName = "Xamarin"
    });
    items.Add(new LVsearItem() {
        SName = "Xamarin Forms"
    });
    items.Add(new LVsearItem() {
        SName = "Xamarin Native Application Development"
    });
    Iitem = items;
    lvSearch.ItemsSource = Iitem;
}
private void FilterNames() {
    string filter = searchBar.Text;
    lvSearch.BeginRefresh();
    if (string.IsNullOrWhiteSpace(filter)) {
        lvSearch.ItemsSource = Iitem;
    } else {
        lvSearch.ItemsSource = Iitem.Where(x => x.SName.ToLower().Contains(filter.ToLower()));
    }
    lvSearch.EndRefresh();
}
void OnSearchBarTextChanged(object sender, TextChangedEventArgs args) {
    FilterNames();
}
void OnSearchBarButtonPressed(object sender, EventArgs args) {
    FilterNames();
}

Step 7

Open (double click) the file App.cs in the Solution Explorer-> XamFormSearchBar(portable) and set the Root page.



Step 8

We will test Android and UWP. Thus, we can set the Multiple Startup Projects as XamFormSearchBar.Droid and XamFormSearchBar.UWP (Universal Windows).



Step 9

Change the Configuration Manager settings, go to Build -> Configuration Manager, uncheck all the build and deploy options to the iOS, Windows, WinPhone. Check the Droid and UWP.



Step 10

Deploy your app in Local Machine and the output of the XamFormSearchBar app is given below.



Entering Search Text in a Search Bar is given below. 



Search Text in Search Bar is given below. 



Summary

Now, you have successfully created and tested SearchBar control in Xamarin.Forms Applications for cross platform application development, using Visual C# and Xamarin.