Implementing Pagination with ReactiveUI in Maui

Question

I'm a hobbyist programmer facing a issue. Despite trying various approaches to implement pagination in a Maui project using ReactiveUI, I've hit a roadblock. I've exhausted all my current knowledge and find myself at a point where I've tried everything and simply can't progress any further. While the existing code incorporates a search functionality, I'm specifically seeking advice on introducing pagination for the CollView (CollectionView). The goal is to load an initial set of 20 items and dynamically load more as the user scrolls.

ReadOnlyObservableCollection<FirebaseEvent<Kunde>> myDerivedList;

    private Func<FirebaseEvent<Kunde>, bool> _searchFilter = _ => true;
    public Func<FirebaseEvent<Kunde>, bool> SearchFilter
    {
        get { return _searchFilter; }
        set
        {
            if (_searchFilter != value)
            {
                _searchFilter = value;
                OnPropertyChanged(nameof(SearchFilter));
            }
        }
    }

    public Kunden()
    {
        InitializeComponent();
        BindingContext = this;

        // Subscribe SourceCache
        var dis = FirebaseService.SourceListKunden.Connect()
            .Filter(this.WhenAnyValue(x => x.SearchFilter))
            .Sort(SortExpressionComparer<FirebaseEvent<Kunde>>.Descending(x => x.Key))
            .SubscribeOn(NewThreadScheduler.Default)
            .ObserveOn(SynchronizationContext.Current)
            .Bind(out myDerivedList)
            .Subscribe();

        // Suchfunktion
        this.WhenAnyValue(x => x.searchBar.Text)
            .DistinctUntilChanged()
            .Throttle(TimeSpan.FromMilliseconds(500))
            .SubscribeOn(NewThreadScheduler.Default)
            .ObserveOn(SynchronizationContext.Current)
            .Subscribe(suchText =>
            {
                Debug.WriteLine("Eingabe Suchleiste :" + suchText);
                SearchFilter = w => string.IsNullOrWhiteSpace(suchText) || String.Join(" ", new List<string>() { w.Object.Kundennummer.ToString(), w.Object.Firma, w.Object.Vorname, w.Object.Nachname }).Contains(suchText, StringComparison.CurrentCultureIgnoreCase);
            });

        //ToDo: Pagination
        CollView.ItemsSource = myDerivedList;


    }
}

If anyone has insights, examples, or suggestions specifically related to implementing pagination in this context, your guidance would be immensely appreciated. I've tried multiple approaches, but none seem to work, and I'm running out of ideas. Thank you for any assistance you can provide!

Answer 1

Virtualise() solved my Problem.

    ReadOnlyObservableCollection<FirebaseEvent<Kunde>> myDerivedList;

private Func<FirebaseEvent<Kunde>, bool> _searchFilter = _ => true;
public Func<FirebaseEvent<Kunde>, bool> SearchFilter
{
    get { return _searchFilter; }
    set
    {
        if (_searchFilter != value)
        {
            _searchFilter = value;
            OnPropertyChanged(nameof(SearchFilter));
        }
    }
}

int Pagesize = 20;
public BehaviorSubject<IVirtualRequest> pageSizeRequest = new BehaviorSubject<IVirtualRequest>(new VirtualRequest(0, 20));

public Kunden()
{
    InitializeComponent();
    BindingContext = this;

    // Subscribe SourceCache
    var dis = FirebaseService.SourceListKunden.Connect()

        .Filter(this.WhenAnyValue(x => x.SearchFilter))
        .Sort(SortExpressionComparer<FirebaseEvent<Kunde>>.Descending(x => x.Key))
        .Virtualise(pageSizeRequest)
        .SubscribeOn(NewThreadScheduler.Default)
        .ObserveOn(SynchronizationContext.Current)
        .Bind(out myDerivedList)
        .Subscribe();

    // Suchfunktion
    this.WhenAnyValue(x => x.searchBar.Text)
        .DistinctUntilChanged()
        .Throttle(TimeSpan.FromMilliseconds(500))
        .SubscribeOn(NewThreadScheduler.Default)
        .ObserveOn(SynchronizationContext.Current)
        .Subscribe(suchText =>
        {
            Debug.WriteLine("Eingabe Suchleiste :" + suchText);
            Pagesize = 20;
            SearchFilter = w => string.IsNullOrWhiteSpace(suchText) || String.Join(" ", new List<string>() { w.Object.Kundennummer.ToString(), w.Object.Firma, w.Object.Vorname, w.Object.Nachname }).Contains(suchText, StringComparison.CurrentCultureIgnoreCase);
        });

    CollView.ItemsSource = myDerivedList;

}