DEV Community

Cover image for .NET MAUI ListView vs CollectionView: How Syncfusion ListView Performs Better
Syncfusion, Inc. profile image Lucy Muturi
Lucy Muturi for Syncfusion, Inc.

Posted on • Originally published at syncfusion.com on

.NET MAUI ListView vs CollectionView: How Syncfusion ListView Performs Better

#netmaui #crossplatform #desktop #maui

TL;DR: Many .NET MAUI lists falter under real-world demands. This comparison reveals how Syncfusion .NET MAUI ListView confidently manages grouping, gestures, infinite scroll, and large data, delivering smoother scrolling, fewer allocations, and less glue code than CollectionView.

When CollectionView hits its limits, here’s the ListView built for real apps

If you’ve built more than a demo app with .NET MAUI, you’ve probably hit this point:

“The list worked great—until we added more features.”

The .NET MAUI CollectionView is a solid starting point, but it starts to show strain as an app grows.

Add grouped data, sticky headers, swipe actions, drag‑and‑drop, or infinite scrolling, and CollectionView often turns into a web of event handlers, state management, and performance trade‑offs. The result is familiar: more code to maintain, tougher debugging, and a list of experiences that feel sluggish on real devices.

Syncfusion® .NET MAUI ListView takes a different approach.

Instead of making you piece together common list behaviors, it delivers them out of the box using built‑in properties, MVVM‑friendly commands, and a virtualization engine designed for large datasets. The payoff is immediate: cleaner code, smoother scrolling, and significantly lower memory usage.

This post compares both controls using the same real‑world scenario and shows where Syncfusion .NET MAUI ListView saves time, code, and memory.

How Syncfusion .NET MAUI ListView outshines Collection View

When comparing these two controls, the Syncfusion .NET MAUI ListView stands out with built‑in features that reduce extra code and deliver smoother performance:

  1. Grouping with sticky headers: Pins the current group header at the top while scrolling.
  2. Swipe actions: Reveals quick actions by swiping left or right on an item.
  3. Drag-and-drop reorder: Users can reorder items by dragging them.
  4. Incremental loading: Loads the page on demand for faster, lighter lists.
  5. Layout choices: Switches between list and grid presentations to fit the content.
  6. Item sizing and virtualization: Uses fixed or measured row heights to keep scrolling smooth.

Syncfusion .NET MAUI ListView vs .NET MAUI CollectionView: Real feature comparison

To keep this comparison honest, we are going to test both controls using the same MVVM book list, no shortcuts, no artificial demos. Each section answers the kinds of questions developers actually run into when building production apps:

  • How much effort does sticky grouping really take?
  • How quickly does swipe support get messy?
  • What breaks when you add drag‑and‑drop reordering?
  • And what happens to memory usage as the list grows?

Along the way, you’ll see where Syncfusion ListView handles these scenarios with built‑in properties and templates, and where Collection View requires extra event wiring, state tracking, and custom logic.

Instead of theory or feature checklists, this walkthrough shows real code, real UI behavior, and real performance numbers, so you can decide which control fits your feature needs and performance goals based on facts rather than assumptions.

1. Grouping with sticky headers

To see the difference clearly, let’s compare how each control handles this feature:

a) Syncfusion .NET MAUI ListView

Sticky headers are a built-in feature in Syncfusion .NET MAUI ListView. As you scroll, the current group title stays pinned at the top, so users always know where they are. A single setting enables it, and grouping by the first letter feels effortless.

Here’s the code you need:

XAML

<listView:SfListView x:Name="listView"
                      ItemsSource="{Binding BookInfo}"
                      IsStickyGroupHeader="True">

    <listView:SfListView.GroupHeaderTemplate>
        <DataTemplate>
            <Grid BackgroundColor="#F2F2F2" Padding="8,4">
                <Label Text="{Binding Key}" VerticalTextAlignment="Center" FontAttributes="Bold" />
            </Grid>
        </DataTemplate>
    </listView:SfListView.GroupHeaderTemplate>
</listView:SfListView>
Enter fullscreen mode Exit fullscreen mode

C#

// Group items by the first character of BookName (uppercase).
listView.DataSource.GroupDescriptors.Add(new GroupDescriptor()
{
    PropertyName = "BookName",
    KeySelector = (object obj1) =>
    {
        var item = (obj1 as BookInfo);
        return item.BookName[0].ToString();
    }
});
Enter fullscreen mode Exit fullscreen mode

b) .NET MAUI CollectionView

You need to manage sticky headers manually. On every scroll, you recalculate which group is visible and update the header. It works but requires extra housekeeping.

Refer to the following code.

XAML

<Grid RowDefinitions="Auto,*">
    <Border BackgroundColor="#F2F2F2" Padding="8,4">
        <Label Text="{Binding CurrentGroupName}" FontAttributes="Bold"/>
    </Border>

    <CollectionView x:Name="List"
                    Grid.Row="1"
                    ItemsSource="{Binding BookGroups}"
                    IsGrouped="True"
                    SelectionMode="Multiple"
                    ItemSizingStrategy="MeasureFirstItem"
                    Scrolled="OnCollectionViewScrolled">
        <CollectionView.GroupHeaderTemplate>
            <DataTemplate>
                <Grid BackgroundColor="#f2f2f2" Padding="12">
                    <Label Text="{Binding Name}" FontAttributes="Bold" />
                </Grid>
            </DataTemplate>
        </CollectionView.GroupHeaderTemplate>
    </CollectionView>
</Grid>
Enter fullscreen mode Exit fullscreen mode

C#

Loaded += OnLoaded;

private void OnLoaded(object sender, EventArgs e)
{
    UpdateCurrentGroupHeader();
}

private void OnCollectionViewScrolled(object sender, ItemsViewScrolledEventArgs e)
{
    UpdateCurrentGroupHeader(e.FirstVisibleItemIndex);
}

private void UpdateCurrentGroupHeader(int firstVisibleIndex = 0)
{
    if (Vm == null || Vm.BookGroups == null || Vm.BookGroups.Count == 0)
        return;

    var index = firstVisibleIndex < 0 ? 0 : firstVisibleIndex;

    // Map to group by flattening groups until we cover firstVisibleIndex
    int cursor = 0;
    foreach (var group in Vm.BookGroups)
    {
        int groupCount = group.Count;
        if (index < cursor + groupCount)
        {
            Vm.CurrentGroupName = group.Name;
            return;
        }
        cursor += groupCount;
    }

    // Fallback
    Vm.CurrentGroupName = Vm.BookGroups[0].Name;
}
Enter fullscreen mode Exit fullscreen mode

2. Swipe actions

Both controls support swipe gestures, but the way they implement and simplify quick actions differs significantly:

a) Syncfusion .NET MAUI ListView

Swipe gestures reveal sleek, ready-to-use actions like Favorite and Delete. Templates keep the UI consistent, and commands bind directly to your ViewModel. The experience feels native across platforms.

Refer to the following code example.

XAML

<listView:SfListView x:Name="listView"
                      ItemsSource="{Binding BookInfo}"
                      AllowSwiping="True">

    <listView:SfListView.StartSwipeTemplate>
        <DataTemplate>
            <Grid BackgroundColor="#E8F5E9" Padding="12">
                <Button Text="Favourite"
                        FontSize="12"
                        Padding="10"
                        TextColor="White"
                        BackgroundColor="#2E7032"/>
            </Grid>
        </DataTemplate>
    </listView:SfListView.StartSwipeTemplate>

    <listView:SfListView.EndSwipeTemplate>
        <DataTemplate>
            <Grid BackgroundColor="#FFEBEE" Padding="12">
                <Button Text="Delete"
                        TextColor="White"
                        BackgroundColor="#C62828"
                        Command="{Binding BindingContext.DeleteCommand, Source={x:Reference listView}}"
                        CommandParameter="{Binding .}"/>
            </Grid>
        </DataTemplate>
    </listView:SfListView.EndSwipeTemplate>
</listView:SfListView>
Enter fullscreen mode Exit fullscreen mode

b) .NET MAUI CollectionView

You wrap each item in a Swipe View and define left/right actions yourself. Flexible, but repetitive, more template code for the same result.

Here’s how to implement this feature:

XAML

<CollectionView ItemsSource="{Binding BookInfo}">
  <CollectionView.ItemTemplate>
    <DataTemplate>
      <SwipeView>
        <SwipeView.LeftItems>
          <SwipeItems Mode="Reveal">
            <SwipeItem Text="Fav" BackgroundColor="#FFE08A"
                       Command="{Binding FavoriteCommand}" CommandParameter="{Binding .}"/>
          </SwipeItems>
        </SwipeView.LeftItems>
        <SwipeView.RightItems>
          <SwipeItems Mode="Reveal">
            <SwipeItem Text="Delete" BackgroundColor="#FFCDD2"
                       Command="{Binding DeleteCommand}" CommandParameter="{Binding .}"/>
          </SwipeItems>
        </SwipeView.RightItems>
        <Grid Padding="12,8"><Label Text="{Binding BookName}"/></Grid>
      </SwipeView>
    </DataTemplate>
  </CollectionView.ItemTemplate>
</CollectionView>
Enter fullscreen mode Exit fullscreen mode

3. Drag-and-drop reordering

This feature shows a clear difference in how each control handles item movement and user interaction:

a) Syncfusion .NET MAUI ListView

Reordering is built in. You can press, drag, and release; items move exactly where expected without juggling gestures or indexes, as shown in the code below.

XAML

<listView:SfListView x:Name="listView"
                      ItemsSource="{Binding BookInfo}"
                      DragStartMode="OnHold">
Enter fullscreen mode Exit fullscreen mode

b) .NET MAUI CollectionView

You wire up drag/drop events, manage indices, and refresh grouping after reordering. Powerful, but more moving parts.

Here’s how you can do it in code:

XAML

<CollectionView x:Name="List"
                Grid.Row="1"
                ItemsSource="{Binding BookGroups}"
                IsGrouped="True"
                SelectionMode="Multiple"
                ItemSizingStrategy="MeasureFirstItem"
                Scrolled="OnCollectionViewScrolled">

    <CollectionView.ItemTemplate>
        <DataTemplate>
            <SwipeView>
                <Grid Padding="12" RowDefinitions="Auto,Auto" ColumnDefinitions="Auto,*" HeightRequest="70">
                    <Grid.GestureRecognizers>
                        <DropGestureRecognizer AllowDrop="True" DragOver="OnDragOver" Drop="OnDrop" />
                    </Grid.GestureRecognizers>

                    <!-- Drag handle icon -->
                    <Label Grid.RowSpan="2" Grid.Column="0" VerticalOptions="Center" Margin="0,0,8,0" Text="≡≡" FontSize="18" Opacity="0.6">
                        <Label.GestureRecognizers>
                            <DragGestureRecognizer CanDrag="True" DragStarting="OnDragStarting" DropCompleted="OnDropCompleted" />
                        </Label.GestureRecognizers>
                    </Label>

                    <Label Text="{Binding BookName}" Grid.Row="0" Grid.Column="1" FontAttributes="Bold" />
                    <Label Text="{Binding BookDescription}" Grid.Row="1" Grid.Column="1" Opacity="0.7" />
                </Grid>
            </SwipeView>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>
Enter fullscreen mode Exit fullscreen mode

C#

private void OnDragStarting(object sender, DragStartingEventArgs e)
{
    if (sender is Element element && element.BindingContext is BookInfo item)
    {
        e.Data.Properties["item"] = item;
    }
}

private void OnDrop(object sender, DropEventArgs e)
{
    if (Vm == null) return;
    if (!e.Data.Properties.TryGetValue("item", out var payload) || payload is not BookInfo source)
        return;

    if (sender is Element element && element.BindingContext is BookInfo target && !ReferenceEquals(source, target))
    {
        var list = Vm.BookInfo;
        var sourceIndex = list.IndexOf(source);
        var targetIndex = list.IndexOf(target);
        if (sourceIndex >= 0 && targetIndex >= 0)
        {
            // Normalize target index when removing earlier item affects index
            if (sourceIndex < targetIndex)
                targetIndex--;

            list.RemoveAt(sourceIndex);
            list.Insert(targetIndex, source);
            // Update stable order indices and rebuild grouping to reflect new order in the UI
            Vm.ReindexOrders();
            Vm.RefreshGroups();
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

4. Incremental loading

Handling large datasets highlights how each control approaches infinite scrolling and data fetch efficiency:

a) Syncfusion .NET MAUI ListView

Infinite scrolling is simple. The control fetches more items as you near the end, with a built-in busy indicator. A single command controls when and how much to load.

Refer to the following code examples for feature implementation.

XAML

<listView:SfListView x:Name="listView"
                      ItemsSource="{Binding BookInfo}"
                      LoadMoreOption="Manual"
                      LoadMorePosition="End"
                      LoadMoreCommand="{Binding LoadMoreItemsCommand}"
                      LoadMoreCommandParameter="{Binding Source={x:Reference listView}}">
Enter fullscreen mode Exit fullscreen mode

C#

public ICommand LoadMoreItemsCommand { get; }

LoadMoreItemsCommand =
    new Command<object>(LoadMoreItems, CanLoadMoreItems);

private bool CanLoadMore() => BookInfo.Count < totalItems;

private bool CanLoadMoreItems(object obj) => CanLoadMore() && !IsLoading;

private async void LoadMoreItems(object obj)
{
    if (!CanLoadMore() || IsLoading)
    {
        return;
    }
    else
    {
        listView.IsLazyLoading = true;
        await Task.Delay(2000);
        listView.IsLazyLoading = false;
    }

    AddBooks(currentIndex, PageSize);
    currentIndex += PageSize;
}
Enter fullscreen mode Exit fullscreen mode

b) .NET MAUI CollectionView

You implement a “ Load More ” footer and spinner, track remaining items, and manage progress state. Clear and explicit, but heavier on logic.

Here’s the code you need for quick implementation:

XAML

<CollectionView x:Name="List"
                 ItemsSource="{Binding BookGroups}">

    <!-- Manual Load More footer to mirror List View's LoadMoreOption=Manual at End -->
    <CollectionView.Footer>
        <Grid Padding="12" BackgroundColor="Transparent" HorizontalOptions="Center" RowDefinitions="Auto,Auto" ColumnDefinitions="Auto,Auto">
            <Button Text="Load More"
                    Grid.Row="0" Grid.ColumnSpan="2"
                    HorizontalOptions="Center"
                    IsEnabled="{Binding HasMoreItems}"
                    Command="{Binding LoadMoreItemsCommand}"
                    CommandParameter="{Binding Source={x:Reference List}}" />
            <ActivityIndicator Grid.Row="1" Grid.ColumnSpan="2"
                               IsVisible="{Binding IsLoading}"
                               IsRunning="{Binding IsLoading}" />
        </Grid>
    </CollectionView.Footer>
</CollectionView>
Enter fullscreen mode Exit fullscreen mode

C#

public ICommand LoadMoreItemsCommand { get; }

LoadMoreItemsCommand =
    new Command<object>(LoadMoreItems, CanLoadMoreItems);

private bool CanLoadMore() => BookInfo.Count < totalItems;

private bool CanLoadMoreItems(object obj) => CanLoadMore() && !IsLoading;

private async void LoadMoreItems(object obj)
{
    if (!CanLoadMore() || IsLoading)
    {
        return;
    }
    else
    {
        // CollectionView path uses the footer ActivityIndicator bound to IsLoading
        IsLoading = true;
        await Task.Delay(2000);
        IsLoading = false;
    }

    AddBooks(currentIndex, PageSize);
    currentIndex += PageSize;
    RebuildGroups();
}
Enter fullscreen mode Exit fullscreen mode

For more details, refer to the blog post at Syncfusion.com

Top comments (0)