How to paginate an ObservableCollection?

I have a ListBox with way too many items in it and the UI is getting slower and slower (virtualization is on, etc). So I was thinking about displaying only the first 20 items and allow to user to navigate through the result set (i.e. ObservableCollection).

Does anybody know if a Pagination mechanism exist for the ObservableCollection? Does anybody has done that before?



This facility is not directly available in the base ObservableCollecton class. You can extend the ObservableCollection and create a custom Collection which does this. You need to hide the original Collection inside this new class and based on a FromIndex and ToIndex give dynamically add the range of items to the class. Override InsertItem and RemoveItem. I am giving a not-tested version bellow. But please take this as just pseudo code.

 //This class represents a single Page collection, but have the entire items available in the originalCollection
public class PaginatedObservableCollection : ObservableCollection<object>
    private ObservableCollection<object> originalCollection;

    public int CurrentPage { get; set; }
    public int CountPerPage { get; set; }

    protected override void InsertItem(int index, object item)
        //Check if the Index is with in the current Page then add to the collection as bellow. And add to the originalCollection also
        base.InsertItem(index, item);

    protected override void RemoveItem(int index)
        //Check if the Index is with in the current Page range then remove from the collection as bellow. And remove from the originalCollection also

UPDATE: I have a blog post about this topic on here - and the source code is uploaded to Codeplex.

Need Your Help

How to build the Poco C++ libraries

c++ poco-libraries

I'm trying to build the Poco C++ libraries manually on Android, iOS, and windows. After much effort I got them to build on Android, but I'm struggling a bit on Windows.

How to redirect all API requests using .htaccess, while keeping asset requests intact?

php wordpress .htaccess angularjs mod-rewrite

TL; DR: I would like to hit the index-api.php file if api is found in the URL, but then simply keep all other requests pointing to the site/dist directory as if it were the 'root' of the site.