Items Collection
Display a highly performant list of views powered by JSON data and an item template.
Last updated
⚙️ Powered by Rock RMS
Display a highly performant list of views powered by JSON data and an item template.
Last updated
Inherits from
At some point in your mobile development career... there will come a point in which you need to display a list of items, either horizontally or vertically. These items will all look the same and be powered from a singular data source (likely a ).
Like most, your first attempt will likely look something like this:
And who knows, maybe that is enough to get the job done and call it a day... Or maybe it isn't.
You may realize pretty quickly that with a lot of items, the performance starts to deteriorate. Most layouts simply aren't built to handle that many items generated in the form of raw XAML. If you've been in the game a while, you may have experimented with or , which are performant alternatives. The ItemsCollection (this) control is a friendlier, viable and stable alternative to both of those controls.
This control requires an item height (or width). This plays a big factor with performance. If you need a list with differently sized items, take a look at one of the alternatives listed above.
Let's get into the business... how can we display long lists (horizontally OR vertically) without killing performance and maintaining a smooth scroll experience? The answer can be achieved with four simple steps.
Define your data source as JSON
Bring your JSON into memory
Create a single item template
Set up your Items Collection container
Make sure to use Rock:ViewCell
as the base of your template. This control has some special logic to make sure the views are properly dark mode responsive.
CollectionLayout
Layout of the collection view.
ItemsSource
IEnumerable
The source of items for the collection view.
ItemTemplate
DataTemplate
Template for items within the collection view.
ItemHeight
double
Height of each item in the collection view.
ItemWidth
double
Width of each item in the collection view.
CollectionPadding
Thickness
Padding around the collection view.
ItemSpacing
int
Spacing between items in the collection view.
TapCommand
ICommand
Command triggered on tap.
ScrollBeganCommand
ICommand
Command triggered when scrolling begins.
ScrollEndedCommand
ICommand
Command triggered when scrolling ends.
ScrollingLeftCommand
ICommand
Command triggered when scrolling left.
ScrollingUpCommand
ICommand
Command triggered when scrolling up.
ScrollingRightCommand
ICommand
Command triggered when scrolling right.
ScrollingDownCommand
ICommand
Command triggered when scrolling down.
DisableScroll
bool
Disables scrolling within the collection view.
Horizontal
A horizontal layout.
Grid
A grid layout.
Carousel
A carousel layout.
Vertical
A vertical layout.