search code does not execute (xaml page,pagemodel or MVVM )

Question

I'm trying to add a search bar to my app, but can not get the code to execute.

I've placed breakpoints in the pagemodel but they are tripped.

Xaml:

 <SearchBar x:Name="searchBar"
    HorizontalOptions="Fill"
           VerticalOptions="CenterAndExpand"
           Placeholder="Search ..."
           Keyboard="Numeric"
           SearchCommand="{Binding SearchBar_TextChanged}" 
           SearchCommandParameter="{Binding Text, Source={x:Reference searchBar}}"/>

xaml.cs

namespace MapleSugar.Pages
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class CheckListPage : ContentPage
{
    public CheckListPage()
    {
        InitializeComponent();
    }
    public IEnumerable<object> MyItems { get; private set; }
    
}
}

pagemodel:

 public ObservableCollection<Grouping<string, CheckListItem>> MyItems { get; set; } = new ObservableCollection<Grouping<string, CheckListItem>>()
 public void SearchBar_TextChanged(object sender, TextChangedEventArgs e)
    {
        var searchTerm = e.NewTextValue;
        if (string.IsNullOrWhiteSpace(searchTerm))
        {
            searchTerm = string.Empty;
        }
        searchTerm = searchTerm.ToLowerInvariant();
        var filteredItems = CheckListItem.Where(value => value.ToString().ToLowerInvariant().Contains(searchTerm)).ToString();
        foreach (var value in MyItems)
        {
            if (!filteredItems.Contains(value.ToString()))
            {
                MyItems.Remove(value);
            }
            else if (!MyItems.Contains(value))
            {
                MyItems.Add(value);
            }
        }
    }  

TIA

Tim

Answer 1

Hello,

If you want to make Command to be exeucted in the ViewModel, you need to add type of ICommand's property in viewModel and initialize Command in constructor.

Then, please change your parameters of SearchBar_TextChanged like following code.

Here is a document about Commanding, you can refer ot it.

  public ICommand SearchBarTextChangeCommand{ get; set; }

  public MyViewModel()
  {
      SearchBarTextChangeCommand = new Command(SearchBar_TextChanged);
  }

private void SearchBar_TextChanged(object obj)
   {
 
       var searchTerm = obj as string;
       if (string.IsNullOrWhiteSpace(searchTerm))
       {
           searchTerm = string.Empty;
       }

...
}

After that, you need to change the binding value of SearchCommand to SearchBarTextChangeCommand.

<SearchBar x:Name="searchBar"
      HorizontalOptions="Fill"
       VerticalOptions="CenterAndExpand"
       Placeholder="Search ..."
       Keyboard="Numeric"
       SearchCommand="{Binding SearchBarTextChangeCommand}" 
       SearchCommandParameter="{Binding Text, Source={x:Reference searchBar}}"/>

By the way, do not forget to add bindingContext for your Viewmodel.

public NewPage1()
{
	InitializeComponent();
 
	BindingContext = new MyViewModel();
 
}

Best Regards,

Leon Lu

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.