loading experience

.NET MAUI

CollectionView in .NET MAUI: fast, flexible lists

The control to use for any list: list or grid layout, selection, grouping and incremental loading.

CollectionView in .NET MAUI: fast, flexible lists

With ListView deprecated in .NET 10, CollectionView is the control for displaying lists of data. It is more flexible and more efficient, because it recycles cells while scrolling.

Only the data the user is about to see gets loaded.
Only the data the user is about to see gets loaded.

A list with an item template

<CollectionView ItemsSource="{Binding Products}"
                SelectionMode="Single"
                SelectionChangedCommand="{Binding OpenCommand}"
                SelectionChangedCommandParameter="{Binding SelectedItem, Source={RelativeSource Self}}">
    <CollectionView.ItemTemplate>
        <DataTemplate x:DataType="models:Product">
            <Grid Padding="12" ColumnDefinitions="*,Auto">
                <Label Text="{Binding Name}" FontAttributes="Bold" />
                <Label Grid.Column="1" Text="{Binding Price, StringFormat='{0:C}'}" />
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
    <CollectionView.EmptyView>
        <Label Text="No products found" HorizontalOptions="Center" />
    </CollectionView.EmptyView>
</CollectionView>

Grid instead of list

<CollectionView.ItemsLayout>
    <GridItemsLayout Orientation="Vertical" Span="2" HorizontalItemSpacing="8" VerticalItemSpacing="8" />
</CollectionView.ItemsLayout>

Incremental loading

For long lists, load data in pages as the user approaches the end:

<CollectionView ItemsSource="{Binding Products}"
                RemainingItemsThreshold="5"
                RemainingItemsThresholdReachedCommand="{Binding LoadMoreCommand}" />

Performance tips

  • Use ObservableCollection and add items instead of replacing the whole collection.
  • Keep cell templates simple: few nested layout levels.
  • Set x:DataType in DataTemplates for compiled bindings.
  • Resize images on the server: loading huge photos into a list is the quickest way to slow it down.
Comments (0)

No comments yet.

Leave a comment