xamarinxamarin.formsxamarin.androidxamarin.iosxamarin-studio

How to Trigger event Cancel Button on SearchBar Xamarin Form


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

enter image description here

What I want:

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

enter image description here


Solution

  • 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.

    enter image description here