How to Trigger event Cancel Button on SearchBar Xamarin Form

Question

Xamarin Form View Model can trigger the onTextChange Event for Searchbar but there is no Event handler for OnCancelButtonClicked.

What I want:

An Event should be Triggered whenever Cancel/Close Button is clicked as below.

Answer 1

Well, as that button just clears the search bar, and when text changes it triggers an event, i've just added an if that validates if the text is null or empty, and it worked for me:P

    private void SearchBarPatients_TextChanged(object sender, TextChangedEventArgs e)
    {
        if(string.IsNullOrWhiteSpace(SearchBarPatients.Text))
        {
            listPatients.ItemsSource = patients;
        }
    }

I understood that was your doubt, i had thisone too, so just did that. btw im such a newbie and if its wrong i'd like being corrected :P

Answer 2

You can get Searchbar CloseButton event in SearchBar custom render, but I think it is not useful for your goal.

I suggest you can click search icon to refresh data source. I don one sample using Searchbar and ListView, you can take a look:

[assembly: ExportRenderer(typeof(SearchBar), typeof(CustomSearchBarRenderer))]
namespace FormsSample.Droid
{
 public class CustomSearchBarRenderer: SearchBarRenderer
{
    public CustomSearchBarRenderer(Context context):base(context)
    {

    }
    protected override void OnElementChanged(ElementChangedEventArgs<SearchBar> e)
    {
        base.OnElementChanged(e);

        if (Control != null)
        {
            var searchView = Control;
            searchView.Iconified = true;
            searchView.SetIconifiedByDefault(false);
            int searchCloseButtonId = Context.Resources.GetIdentifier("android:id/search_close_btn", null, null);

           // search close button icon, you can add event for closeIcon.click.
            var closeIcon = searchView.FindViewById(searchCloseButtonId);

            int searchViewSearchButtonId = Control.Resources.GetIdentifier("android:id/search_mag_icon", null, null);
            var searchIcon = searchView.FindViewById(searchViewSearchButtonId);
            searchIcon.Click += SearchIcon_Click;
        }        
       
    }

    private void SearchIcon_Click(object sender, EventArgs e)
    {
        Element.OnSearchButtonPressed();
       
    }
  
}
 }



 <StackLayout>
        <SearchBar
            x:Name="searchBar"
            HorizontalOptions="Fill"
            Placeholder="Search fruits..."
            SearchButtonPressed="OnSearchButtonPressed"
            VerticalOptions="CenterAndExpand" />
        <Label
            HorizontalOptions="Fill"
            Text="Enter a search term and press enter or click the magnifying glass to perform a search."
            VerticalOptions="CenterAndExpand" />
        <ListView
            x:Name="searchResults"
            HorizontalOptions="Fill"
            VerticalOptions="CenterAndExpand" />
    </StackLayout>

 public partial class Page23 : ContentPage
{
    public Page23()
    {
        InitializeComponent();
        searchResults.ItemsSource = DataService.Fruits;
    }

    private void OnSearchButtonPressed(object sender, EventArgs e)
    {
        if(string.IsNullOrEmpty(searchBar.Text))
        {
            searchResults.ItemsSource = DataService.Fruits;
        }
        else
        {
            searchResults.ItemsSource = DataService.GetSearchResults(searchBar.Text);
        }
       
    }
}

You can click search closebutton to move text in SearchBar firstly, then click SearchButton to refresh data for listView.