

Grid DisplayĪ popular layout for presenting data is a grid. The documentation for applying snapping behaviour to a ColletionView can be found here. This type of feature is common in apps, ie: a horizontal collection of cards that snap to center as you scroll. When users scroll through our lists, we may want to force the list to snap to the start, center, or end of an item. This works with both grid and list layouts! Item Snapping Lastly, CollectionView is much more flexible for presenting collections of items: Vertical/Horizontal ScrollingĬollection views can scroll vertically or horizontally by specifiying the IItemsLayout.Orientation property. We will cover the EmptyView property in depth in the next article in this series. With CollectionView we simply use the EmptyView property to specify what will be shown. Consider a search that returns no results with ListView we have to manage toggling between the empty view and list items ourselves. CollectionView: Feature RichnessĬollectionView adds several useful features for us: Built-In Empty ViewĪ common scenario we need to support when displaying lists of data is to accommodate when the list has no elements. If we forgot to do this, it would lead to bugs where the cells content would be clipped where it exceeded the row height or show excessive padding.ĬollectionView supports dynamic cell sizes out of the box. To support cells with differing height, we would omit the RowHeight property and then set HasUnevenRows to true. ListView, however, did not support varying cell heights by default. It is very common to create lists with multiple cell types that have varying sizes. This removes another piece of complexity that we used to need to consider. ListViews use the CachingStrategy API to achieve this, however, CollectionViews automatically use virtualisation. As an item scrolls off-screen, the list will reuse one of the non-visible views to present the next item as it appears on-screen. If we have 50 items available in our list, but we can only display 8 items, the list view would create 10 views.

Virtualisation, or cell recycling, refers to the practice of reusing views in the list as they scroll offscreen, rather than creating a new one for every item. This makes it simpler and more intuitive to define list items. In a CollectionView, however, we define our visual content directly within the DataTemplate.īy removing the concept of ViewCells, we do not need to remember this abstraction. To create the user interface of a list views item, we would define our visual content inside a ViewCell that then lay within a DataTemplate. Property names clearly indicate what they do and we can understand at a glance what they will accomplish. Lastly, a simpler API reduces cognitive load.
Simple divider xamarin code#
In general, the less code that we have, the less likely we are to write bugs.

Next, a simpler API means that we write less code. So why is a simpler API surface important?įirstly, a simpler API makes it easier to write correct code the first time and thus avoid bugs. The first major benefit of CollectionView is that its API's are simpler and more intuitive than ListView. Let's start by examining the core benefits of converting a ListView to a CollectionView.Īt a glance, CollectionView has some major benefits:

Simple divider xamarin how to#
