Share via

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

tim 160 Reputation points
2024-10-01T13:18:57.4+00:00

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

.NET MAUI
.NET MAUI
A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
3,471 questions
C#
C#
An object-oriented and type-safe programming language that has its roots in the C family of languages and includes support for component-oriented programming.
10,900 questions
XAML
XAML
A language based on Extensible Markup Language (XML) that enables developers to specify a hierarchy of objects with a set of properties and logic.
808 questions

1 answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. Leon Lu (Shanghai Wicresoft Co,.Ltd.) 75,121 Reputation points Microsoft Vendor
    2024-10-03T02:27:22.6366667+00:00

    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.

    0 comments

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.