ARTICLE AD BOX
I am attempting to learn C# MAUI (specifically for Android) however I am currently struggling to get a basic search & collection view working. The goal is to have a page with a search bar where the user types in ingredients, a database is searched, and the collection view updated.
In the SearchAsync method, I am getting results back from the repository. In addition, if I add a breakpoint on the first line of the method, I can see that the property FilteredItems has one item in it; the one it is initialized with. But when the page is loaded, I do not see that item in the collection view. Similarly, after a search, nothing shows in the the collection view. The Binding Failures tab also does not show any issue.
AutoCompletePage.xaml
<?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:pageModel="clr-namespace:App.PageModels" x:Class="App.Pages.AutoCompletePage" Title="AutoCompletePage" x:DataType="pageModel:AutoCompletePageModel" x:Name="thisPage"> <VerticalStackLayout Padding="10"> <!-- Search Bar --> <SearchBar Placeholder="Search..." Text="{Binding SearchText}" TextChanged="InputView_OnTextChanged" SearchCommand="{Binding SearchCommand}" /> <!-- CollectionView for search results --> <CollectionView ItemsSource="{Binding FilteredItems, Mode=TwoWay}"> <CollectionView.ItemTemplate> <DataTemplate> <StackLayout> <Label Text="{Binding Name}" /> </StackLayout> </DataTemplate> </CollectionView.ItemTemplate> </CollectionView> </VerticalStackLayout> </ContentPage>AutoCompletePage.xaml.cs
public partial class AutoCompletePage : ContentPage { private AutoCompletePageModel _model; public AutoCompletePage(AutoCompletePageModel model) { InitializeComponent(); _model = model; } private void InputView_OnTextChanged(object? sender, TextChangedEventArgs e) { _model.SearchCommand.Execute(e.NewTextValue); } }AutoCompletepageMode.cs
public partial class IngredientResult : ObservableObject { [ObservableProperty] public int _id; [ObservableProperty] public string _name = string.Empty; [ObservableProperty] public bool _isSelected; } [QueryProperty(nameof(AlreadySelected), "selected")] public partial class AutoCompletePageModel :ObservableObject, IQueryAttributable { [ObservableProperty] public string _placeholder = "Search ingredients..."; [ObservableProperty] public string? _searchText; public ObservableCollection<IngredientResult> FilteredItems { get; } = new() { new() { Id = 0, Name="Please search for ingredients above" } }; private List<IngredientResult> _selectedIngredients = new(); public List<IngredientResult>? AlreadySelected { get; set; } public void ApplyQueryAttributes(IDictionary<string, object> query) { if (query.TryGetValue("selected", out object param) && param is List<IngredientResult> selected) { System.Diagnostics.Debug.WriteLine("Ingredients already selected."); } } [RelayCommand] public async Task SearchAsync(string query) { var searchResults = new List<DbIngredient>(); if (!string.IsNullOrWhiteSpace(query)) //TODO: Why is SearchText always null? { using (var db = new RecipeAssistantContext()) { searchResults = await db.Ingredients.Where(i => i.Name.ToLower().Contains(query)).ToListAsync(); } } var fullResults = _selectedIngredients .Concat(searchResults.Select(i => new IngredientResult { Id = i.Id, Name = i.Name })) .OrderBy(i => i.IsSelected).ThenBy(i => i.Name).Take(5).ToList(); MainThread.BeginInvokeOnMainThread(() => { FilteredItems.Clear(); foreach (var item in fullResults) { FilteredItems.Add(item); } }); System.Diagnostics.Debug.WriteLine(SearchText); } }The current issues I am having are:
I would expect to see an item in the collection view "Please search for ingredients above" when the page first loads, but it is not there.
At the started and end of the SearchAsync method, FilteredItems has items in it, but still the collection view shows nothing.
When the SearchAsync method executes, SearchText is null. At what point does this get populated? I tried clicking enter and clicking the icon, but the command is not executed. That is why I needed to add the OnTextChanged event handler, because the command was not working directly, even with the community toolkit behavior.
This is my first time using C# MAUI/Android development so probably missing something simple, but this has frustrated me for two days (this is just my latest attempt that has come the closest to succeeding) so any help and/or guidance would be greatly appreciated.
