I have often come across the requirement to have pagination enabled on collections. When we bind a Collection with many items inside to an ItemsControl, the visual will be created for each and every items. But as we can see that there is no big significance in displaying all the data with a huge vertical scroll bar(or similar mechanism) in it. So pagination is the typical user experience strategy we use in this kind of scenarios. Architecturally we can achieve the pagination mainly in three different ways
- Making the UI Control or Panel aware of the virtualization, so that the visuals wont create at the time of binding. But as an on demand visual element creation. VirtualizingPanel concept in WPF is actually helps to achieve this idea. For more details about WPF virtualizaiton panels, go here and here - In terms of MVVM pattern this will be implemented at the View side.
- Making the collection aware of the pagination and that special collection always gives a subset of items to the UI for making the visuals. In terms of MVVM pattern this solution is implemented as ViewModel
- Last and most commonly used way in the web technology - Typical DB/Back end/Web service side pagination where the pagination is controlled in the query side. This is best way for handling huge data like what we see in most of the typical websites out there. Typically the implementation is part of the Model
I have created a PaginatedObservableCollection as an experiment to achieve the UI vitalization based on the point (2) of the above list. And this special generic Collection is derived from ObservableCollection. This has mainly two properties
- PageSize - to store the number of items that can be shown in a single page
- CurrentPage - the page number of the current page which the UI is showing in a particulr time.
See a running demo in Silverlight here.
You can find the source code in CodePlex - http://www.codeplex.com/PaginatedCollection , Feel free to give your suggestions comments to improve this. Source code include WPF and Silverlight sample code