.NET MAUI CollectionView

In .NET MAUI, a CollectionView is a powerful control used to display lists of data. It’s essentially the modern replacement for ListView, offering more flexibility, better performance, and richer features. the CollectionView remains the primary control in .NET MAUI for displaying lists of data. It is more performant and flexible than the older ListView, offering built-in support for multiple layout types (grids, horizontal lists) and automatic UI virtualization to handle large datasets efficiently.

🔑 Key Features of CollectionView

Virtualization: Only renders items currently visible on the screen, recycling them as the user scrolls to save memory.

Flexible Layouts: Easily switch between vertical/horizontal lists and grids using the ItemsLayout property.

Selection Modes: Supports single, multiple, or no selection out of the box.

Header & Footer: Allows adding scrollable content above and below the list.

Data Binding: Bind to a collection via ItemsSource.

Example: Simple Vertical List

This example uses a standard DataTemplate to define the appearance of each item.

xml

<CollectionView ItemsSource="{Binding Users}"
                SelectionMode="Single"
                SelectionChangedCommand="{Binding SelectionCommand}">
    <!-- Define the layout style (Vertical List is default) -->
    <CollectionView.ItemsLayout>
        <LinearItemsLayout Orientation="Vertical" ItemSpacing="10" />
    </CollectionView.ItemsLayout>

    <!-- Define what each item looks like -->
    <CollectionView.ItemTemplate>
        <DataTemplate x:DataType="models:User">
            <Frame HasShadow="True" BorderColor="Gray">
                <HorizontalStackLayout Spacing="15">
                    <Image Source="{Binding AvatarUrl}" WidthRequest="50" HeightRequest="50" />
                    <Label Text="{Binding Name}" VerticalOptions="Center" FontAttributes="Bold" />
                </HorizontalStackLayout>
            </Frame>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

Best Practices for 2026

Avoid ViewCell: Do not use ViewCell as the root of your DataTemplate; it is a legacy ListView concept and will cause errors in a CollectionView.

No StackLayout Parents: Never place a CollectionView inside a VerticalStackLayout or StackLayout without a fixed height. This breaks scrolling and can cause infinite layout loops. Use a Grid instead.

MeasureFirstItem: If all your list items are the same height/width, set ItemSizingStrategy="MeasureFirstItem". This significantly boosts performance by measuring only the first item instead of every individual one.

Incremental Loading: For very large datasets, use the RemainingItemsThreshold and RemainingItemsThresholdReachedCommand to load more data as the user nears the bottom of the list.

Compiled Bindings: Use x:DataType in your DataTemplate to enable compiled bindings, which improves data-binding speed at runtime.Layouts: Supports vertical, horizontal, grid, and custom layouts.

Selection: Single or multiple item selection with SelectionMode.

Templates: Use ItemTemplate to define how each item looks.

Performance: Virtualization ensures smooth scrolling even with large datasets.

Empty View: Show a placeholder when there are no items.

⚙️ Common Properties

ItemsSource → The data collection to display.
ItemTemplate → Defines the UI for each item.
SelectionMode → None, Single, or Multiple.
SelectedItem / SelectedItems → Access the chosen item(s).
EmptyView → Content shown when the list is empty.

📄 Example

xml

<CollectionView ItemsSource="{Binding Fruits}"
                SelectionMode="Single"
                SelectedItem="{Binding SelectedFruit}">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <StackLayout Padding="10">
                <Label Text="{Binding Name}" 
                       FontSize="20" />
            </StackLayout>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

Here:

Fruits is a collection like [ { Name="Apple" }, { Name="Banana" }, { Name="Mango" } ].

SelectedFruit stores the currently selected fruit object.