In this blog, we will explain a new feature of Xamarin.forms of 4.0 - a new control called Collection View. This is a wonderful control that can be used with a variety of perspectives, such as horizontal list view, listing with 2 spans and others. The collection view is an example of a list view for a list of items. It improves inventory design and reduces complexity. Storage control is very simple.

The collection view supports single and multiple selections.The collection view has a flexible layout model, which allows data to be presented vertically or horizontally.

Note: Collection view is only available in iOS and android.

The collection view is a view for presenting a list of data using various layout specifications. Its goal is to provide a more flexible and presentable option for list views.

Below are some useful new features and best practices for creating powerful original mobile experiences.

Loading Infinitely More

Some new properties have been introduced on Lecture View that the user is scrolling so it is really easy to get more data. In this example, the mock data contains a thousand items although we only want to load 20 results at the beginning.

If the user continues to scroll to the end, Collectionview will execute the RemainingItemsThresholdReachedCommand to fetch additional data. This goes on and on until the user gets all the available data or maybe “never if you’re a large social network.

If you want to start receiving additional data shortly before the user reaches the end of the collection, you can set the remaining item range to any positive number. When that number is reached, the command will be called.

Make it snap

Sometimes you want to get into position instead of scrolling things freely. Collectionview offers a few properties to enable this behaviour on any layout. Consider the following example:

By setting the snap point to "MedutriSingle" and setting it to "Start" the item closest to the starting edge will go in the first place so that it can visible fully.

Keep Them Separated

A few legacies from the CollectionviewListView avoid the concept to which confusion has been added and performance has been affected, including ViewCell and item separators. It can be very convenient to add those lines between items to your list whenever you want, but thats not the concept contained in the original control.

So how do you get those lines between the elements? Its really as simple as adding an element to the bottom of your item template. Here is an example of using the Box view to expand the width of the template and create a horizontal line that also provides local spacing for the distance.

Handling Item Taps

When you look at adding gestures to your Collectionview, you may be tempted to use a SelectionChanged event or a SelectionChanged command in the control itself.

For example, you can fully perform that task by handling the tap and navigating to another page. However, this is not the best use for this very general purpose. It is for the selection of one or more items in the properties collection, then for further action on them like deleting.

The more direct approach is to add a TapGaster organizer to your item template.

Keep in mind that when you work in an item template, the binding is the context item and not the content page. If your command exists on the item, then you are fully prepared. If you want to root this binder for the command on your content page view model in this example, you can use the new supported relative resource.

Next, by setting the command parameters with respect to the current binding of the command, you can easily deal with the data item passed on the command.

Sizing for Performance

If you know that all your items will be the same size, you ll benefit from a performance by setting up an item resizing strategy in front of the Measure First item. This way CollectionView will cache resizing the first item alone and for all items.

This may not always be possible, or desirable. You have very little control over the content you need to display because it is user-created. By default, Collectionview uses measurable items to measure each item and size it according to their content requirements. In the ListView, this will be equivalent to setting the HasUnevenRows property as true.

Choose an EmptyView at runtime

Views that will be shown as an empty view when data is unavailable can be defined as content view as objects in the resource direction. The Emptyview property can then be set to a specific content view based on some business logic at runtime.