CollectionView

CollectionView

The CollectionView is a flexible and performant view for presenting lists of data using different layouts in .NET MAUI. It supports features such as horizontal and vertical scrolling, grid and list layouts, and data virtualization. CollectionView is designed to provide a more powerful and customizable alternative to the ListView.

Key features of CollectionView include:

• Multiple layout options (list and grid)
• Horizontal and vertical scrolling
• Data virtualization for improved performance
• Support for empty views
• Grouping and headers

CollectionView is ideal for scenarios where you need to display a large set of data with varying layouts and improved performance.

Additional space at the end

Additional space at the end of a list can improve the user experience by preventing the last item from being too close to the edge of the screen. This makes it easier for users to focus on the content.

In our CollectionView this setting is enabled by default. To turn off this behaviour simply set the HasAdditionalSpaceAtTheEnd to false:

<dui:CollectionView HasAdditionalSpaceAtTheEnd="False" />

Corner Radius on first and last element

In our designs, almost all lists have corner radius on the first and the last element. To avoid a lot of boilerplate code to make sure only the first and last element have corner radius, we baked this directly into dui:CollectionView. This is turned on by default. Head on over to Corner Radius to see how to disable this.

Padding

We have added padding property to our CollectionView, which has a default Horizontal padding.

Top padding is not implemented yet

New handler on iOS

.NET MAUI have started developing a CollectionView that uses a new handler on iOS. To make use of this, you can use CollectionView2. This should be used if you encounter buggy UI.

There is no change on Android if you decide to use this component.

Properties

Inspect the components properties class to further customize and use it.