Xamarin.Forms Search Bar

In each platform, there is a specially designed Search Bar control. It is simply a glorified entry field, but can be useful to match native designs. The search bar does nothing other than trigger a command when you press search, as well as provide a few visual enhancements.

Here is a quick look at the search bar on each platform.

Android

iOS

UWP

As you can see the Search Bars come with a feature UI enhancements.

  1. The keyboard that shows, has a search icon, instead of Done or Next.
  2. You get a Cancel button, that will clear the text.
  3. There may also be search icon in the search bar.

Search Command

Assuming you have a ViewModel already bound to the page, you will want to create a SearchCommand in your ViewModel as such.

private ICommand _searchCommand;
public ICommand SearchCommand
{
    get
    {
        return _searchCommand ?? (_searchCommand = new Command<string>((text) =>
        {
            // The text parameter can now be used for searching.
        }));
     }
 }

Then in your XAML, you can add the SearchBar. As you can see, I employed a neat little trick that lets you pass the Text property through as a CommandParameter, saving you the effort of binding a Text property and using that.

<SearchBar x:Name="SearchBar" SearchCommand="{Binding SearchCommand}" SearchCommandParameter="{Binding Text, Source={x:Reference SearchBar}}" />

Displaying Results

The Search Bar doesn’t have any display capabilities. This is all it does. If you want to display search results, you should use a ListView, and provide the results via the SearchCommand.

Results As Typed

If you want to provide the search results as you type, you can create a Behavior to wire up the TextChanged event.

public class TextChangedBehavior: Behavior<SearchBar>
{
    protected override void OnAttachedTo(SearchBar bindable)
    {
        base.OnAttachedTo(bindable);
	bindable.TextChanged += Bindable_TextChanged;
    }

    protected override void OnDetachingFrom(SearchBar bindable)
    {
        base.OnDetachingFrom(bindable);
	bindable.TextChanged -= Bindable_TextChanged;
    }

    private void Bindable_TextChanged(object sender, TextChangedEventArgs e)
    {
	((SearchBar)sender).SearchCommand?.Execute(e.NewTextValue);
    }
}

Then add the behavior, to your search bar.

<SearchBar x:Name="SearchBar" SearchCommand="{Binding SearchCommand}" SearchCommandParameter="{Binding Text, Source={x:Reference SearchBar}}">
    <SearchBar.Behaviors>
        <local:TextChangedBehavior />
    </SearchBar.Behaviors>
</SearchBar>

This will trigger the SearchCommand, every time the text is changed. It’s not exactly an efficient approach, and you may want to look into something like Rx.NET to help this process.


XAMARIN WEEKLY NEWSLETTER

Subscribe to a hand-picked round up of the best Xamarin development links every week. Published every Friday. Free.

Signup to Weekly Xamarin

* I do not maintain or run this newsletter, but I do recommend it.

Microsoft MVP | Xamarin MVP | Xamarin Forms Developer | Build Flutter

Related Posts

One Comment

  1. John Hardman

    Re. “The Search Bar doesn’t have any display capabilities. This is all it does. If you want to display search results, you should use a ListView, and provide the results via the SearchCommand.”

    An alternative approach is to customise SearchBar by creating a class inheriting from it, and then use a custom renderer to display the results. For example, on UWP by using the native AutoSuggestBox. That gives a more native UI, but at the cost of more coding/testing.