I have an existing app that I need to upgrade to MAUI, having a slight issue on the display end. I have migrated up to .NET MAUI just recently and I know that I am close to getting these suckers displaying, though I am having a slight issue, I just don’t know where exactly.

My API call returns the data as expected from the database, though the items in my ObservableCollection are not being displayed in the app when debugging.

This is my XAML markup:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="SaleBeaconMobile.Views.MainPageCus"
             Title="Sale Alerts"
             xmlns:ViewModels="clr-namespace:SaleBeaconMobile.ViewModels">

    <ContentPage.BindingContext>
        <ViewModels:MainPageCusViewModel />
    </ContentPage.BindingContext>

    <ContentPage.ToolbarItems>
        <ToolbarItem Text="Debug" Clicked="ToolbarItem_Clicked_3" Order="Secondary" />
        <ToolbarItem Text="Settings" Clicked="ToolbarItem_Clicked"  Order="Secondary"/>
        <ToolbarItem Text="Support" Clicked="ToolbarItem_Clicked_1"  Order="Secondary"/>
        <ToolbarItem Text="Log Out" Clicked="ToolbarItem_Clicked_2"  Order="Secondary"/>
    </ContentPage.ToolbarItems>

    <ContentPage.Content>
        <RefreshView>
            <CollectionView x:Name="CVSaleAlerts"
                    ItemsSource="{Binding Items}"
                    ItemsLayout="VerticalList"
                    RemainingItemsThreshold="4"
                    RemainingItemsThresholdReachedCommand="{Binding LoadMoreItemsCommand}"
                    HeightRequest="300">
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <Grid Padding="10">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="280" />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="350" />
                            </Grid.ColumnDefinitions>
                            <Image Source="{Binding bg}"
                           Grid.Row="0"
                           Grid.Column="0"
                           Aspect="AspectFill"
                           WidthRequest="350"
                           HeightRequest="280"
                           MinimumHeightRequest="280"
                           VerticalOptions="FillAndExpand" />
                        </Grid>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
        </RefreshView>
    </ContentPage.Content>
</ContentPage>

This is my view model:

using SaleBeaconMobile.Models;
using SaleBeaconMobile.Services;
using System.Collections.ObjectModel;
using System.Threading.Tasks;
using System.Windows.Input;
using Microsoft.Maui.Controls.Xaml;

namespace SaleBeaconMobile.ViewModels
{
    public class MainPageCusViewModel : BaseViewModel
    {
        private readonly DataService _dataService = new DataService();
        private const int PageSize = 10;
        private int _currentPage = 0; // Track the current page for loading more data

        public ObservableCollection<Sale> Items { get; }

        private bool _isRefreshing;
        public bool IsRefreshing
        {
            get => _isRefreshing;
            set
            {
                _isRefreshing = value;
                OnPropertyChanged();
            }
        }

        public ICommand LoadMoreItemsCommand { get; }

        public ICommand RefreshCommand => new Command(async () => await DownloadDataAsync());

        public MainPageCusViewModel()
        {
            Items = new ObservableCollection<Sale>();

            // Assign the command to LoadMoreItemsCommand
            LoadMoreItemsCommand = new Command(async () => await LoadMoreItemsAsync());

            // Trigger initial data load
            Task.Run(async () => await DownloadDataAsync());
        }

        // Method to load initial data
        public async Task DownloadDataAsync()
        {
            try
            {
                IsRefreshing = true;

                // Fetch initial data (page 0 or starting page)
                var items = await _dataService.GetItemsAsync(0, PageSize);

                // Clear existing items and add new items
                Items.Clear();

                foreach (var item in items)
                {
                    Items.Add(item);
                }

                // Update the current page
                _currentPage = 1; // Assuming pages start from 0
            }
            catch (Exception ex)
            {
                // Handle exceptions as needed
            }
            finally
            {
                IsRefreshing = false;
            }
        }

        // Method to load more items for pagination or infinite scrolling
        public async Task LoadMoreItemsAsync()
        {
            try
            {
                if (IsRefreshing)
                    return; // Prevent re-entry

                IsRefreshing = true;

                // Fetch more data based on the current page
                var items = await _dataService.GetItemsAsync(_currentPage, PageSize);

                // Add new items to the existing collection
                foreach (var item in items)
                {
                    Items.Add(item);
                }

                // Increment the current page for the next load
                _currentPage++;
            }
            catch (Exception ex)
            {
                // Handle exceptions as needed
            }
            finally
            {
                IsRefreshing = false;
            }
        }
    }
}

I know that I am pretty close as the data is being retrieved properly, the idea is to bring back 10 records at a time from my API call, all of that works in postman as well in my older app. I am just unsure on the display end currently, not sure if it is an attribute I am missing or what. I was using a ListView with a collection prior to this and that all works but I think that I should be upgrading it all to .MAUI with the new attributes and features that comes along with that. I am not receiving any errors currently.

Thanks for any pointers and help! Cheers, Joe 🙂