Issue Populating CollectionView with ObservableCollection in .NET MAUI

Question

Hi, I am facing an issue in my .NET MAUI application where I am trying to populate a CollectionView using an ObservableCollection in my ViewModel. The data is correctly fetched, and I can see the ObservableCollection.Count in a Label, but the CollectionView does not display the data.

I will attach my ViewModel, Class, and XAML code for reference. Any guidance on what might be missing or incorrectly implemented would be appreciated.

Please Let me know if you need more details.

Screenshot 2025-03-06 233025.png

public class LeaveSummary
{
    public string Name { get; set; }
    public int TotalLeaveCount { get; set; }
    public int LeaveTaken { get; set; }
}

using CommunityToolkit.Mvvm.ComponentModel;
using LeaveMatrix.Models;
using LeaveMatrix.Services.Interfaces;
using System.Collections.ObjectModel;
namespace LeaveMatrix.ViewModels
{
    public partial class HomePageViewModel : BaseViewModel
    {
        [ObservableProperty]
        private User currentUser;
        [ObservableProperty]
        private ObservableCollection leaveSummary;
        private readonly IHomeService _homeService;
        public HomePageViewModel(IHomeService homeService)
        {
            _homeService = homeService;
        }
        public async Task InitializeAsync()
        {
            await PopulateHomePage();
        }
        private async Task PopulateHomePage()
        {
            try
            {
                string token = await SecureStorage.GetAsync("AuthToken");
                if (!string.IsNullOrEmpty(token))
                {
                    var homePageResponse = await _homeService.GetHomaPage(token);
                    if (homePageResponse != null)
                    {
                        CurrentUser = homePageResponse.User;
                        LeaveSummary = new ObservableCollection(homePageResponse.LeaveSummary);
                        await SecureStorage.SetAsync("UserId", homePageResponse.User.Id.ToString());
                    }
                }
            }
            catch (Exception ex)
            {
                await Shell.Current.DisplayAlert("Error", ex.Message, "OK");
            }
        }
    }
}

Answer

Hello,

Firstly, please open your HomePageViewModel, please make sure BaseViewModel extend the ObservableObject, if not, please make HomePageViewModel to inherit the ObservableObject.

Then, please change private ObservableCollection leaveSummary; to private ObservableCollection leaveSummarys;, if you just called leaveSummary, generated a new LeaveSummary property that implements all of the logic needed for raising change notifications. It have the same name with your Model.

Here is my edited HomePageViewModel

 public partial class HomePageViewModel : ObservableObject
    {
        [ObservableProperty]
        private User currentUser;
        [ObservableProperty]
        private ObservableCollection leaveSummarys;
        private readonly IHomeService _homeService;
        public HomePageViewModel(IHomeService homeService)
        {
            _homeService = homeService;
        }
        public async Task InitializeAsync()
        {
            await PopulateHomePage();
        }
        private async Task PopulateHomePage()
        {
            try
            {
                string token = await SecureStorage.GetAsync("AuthToken");
                if (!string.IsNullOrEmpty(token))
                {
                    var homePageResponse = await _homeService.GetHomaPage(token);
                    if (homePageResponse != null)
                    {
                        CurrentUser = homePageResponse.User;
                        LeaveSummarys = new ObservableCollection(homePageResponse.LeaveSummary);
                        await SecureStorage.SetAsync("UserId", homePageResponse.User.Id.ToString());
                    }
                }
            }
            catch (Exception ex)
            {
                await Shell.Current.DisplayAlert("Error", ex.Message, "OK");
            }
        }
    }

By the way, The Frame control is marked as obsolete in .NET MAUI 9, and will be completely removed in a future release. The Border control should be used in its place. For more information, see Border.

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.

Share via

Issue Populating CollectionView with ObservableCollection in .NET MAUI

1 answer

Your answer