Deprecation of ListView in .NET MAUI

Just a few hours ago, the .NET MAUI team announced a significant change coming in .NET 10: the ListView control and all its related cell types (TextCell, ImageCell, ViewCell, etc.) will be marked as obsolete. This decision is part of Microsoft's strategy to streamline the developer experience by focusing on a single, optimized control for displaying collections of data. Which I'm personally happy with, the less duplicated controls to maintain the better. If you've been using MAUI (or Xamarin.Forms before it), you're likely familiar with ListView - it's been a staple for displaying lists of data since the early days. However, CollectionView in the past had several performance and rendering issues, but these days thanks to Microsoft and the community, the Collection View offers numerous advantages, including better performance, more flexible layouts, and improved customization options. With .NET 10 on the horizon, now is the perfect time to migrate your existing ListView implementations to CollectionView. In this article, I'll walk you through a straightforward migration process, highlighting the key differences between these controls and providing practical examples to ensure a smooth transition for your MAUI applications. Understanding the Key Differences Before diving into the migration process, it's helpful to understand some fundamental differences between ListView and CollectionView: Feature ListView CollectionView Cell Types Uses predefined cells (TextCell, ImageCell, etc.) Uses DataTemplates directly Selection Single or multiple selection with built-in visual feedback Single or multiple but even more flexible selection with customizable visual feedback Item Appearance Uses Cell hierarchy Uses direct DataTemplate Layouts Vertical list only Vertical, horizontal, and grid layouts Performance Less optimized Better virtualization and performance Grouping Through GroupDisplayBinding More flexible grouping options Headers/Footers Basic header/footer templates Enhanced header/footer templates Step 1: Replace the Control Declaration The first step is to replace the ListView declaration with CollectionView in your XAML: Before (ListView): After (CollectionView): Step 2: Convert Cell Templates to DataTemplates One of the biggest differences is how items are templated. ListView uses various cell types, while CollectionView uses DataTemplate directly. Example: Converting TextCell Before (ListView with TextCell): After (CollectionView): Example: Converting ImageCell Before (ListView with ImageCell): After (CollectionView): Step 3: Update Selection Handling The selection mechanism differs between the two controls: Before (ListView): void OnItemSelected(object sender, SelectedItemChangedEventArgs e) { if (e.SelectedItem == null) return; // Handle the selected item var selectedItem = e.SelectedItem as MyItemType; // Important: Deselect the item ((ListView)sender).SelectedItem = null; } After (CollectionView): async void OnSelectionChanged(object sender, SelectionChangedEventArgs e) { var previous = e.PreviousSelection.FirstOrDefault(); var current = e.CurrentSelection.FirstOrDefault(); } Step 4: Convert Grouping If you're using grouping in your ListView, you'll need to adapt it for CollectionView: Before (ListView with grouping): After (CollectionView with grouping): Step 5: Headers and Footers Converting headers and footers is straightforward: Before (ListView): After (CollectionView): Step 6: Take Advantage of New Layout Options One significant advantage of CollectionView is its flexible layout options: Vertical List (default): Horizontal List: Grid Layout: Step 7: Handle Empty State CollectionView has better support for empty state handling: Common Challenges and Solutions Challenge 1: Context Actions ListView's ContextActions don't have

Mar 29, 2025 - 21:03

Just a few hours ago, the .NET MAUI team announced a significant change coming in .NET 10: the ListView control and all its related cell types (TextCell, ImageCell, ViewCell, etc.) will be marked as obsolete. This decision is part of Microsoft's strategy to streamline the developer experience by focusing on a single, optimized control for displaying collections of data. Which I'm personally happy with, the less duplicated controls to maintain the better.

If you've been using MAUI (or Xamarin.Forms before it), you're likely familiar with ListView - it's been a staple for displaying lists of data since the early days. However, CollectionView in the past had several performance and rendering issues, but these days thanks to Microsoft and the community, the Collection View offers numerous advantages, including better performance, more flexible layouts, and improved customization options. With .NET 10 on the horizon, now is the perfect time to migrate your existing ListView implementations to CollectionView.

In this article, I'll walk you through a straightforward migration process, highlighting the key differences between these controls and providing practical examples to ensure a smooth transition for your MAUI applications.

Understanding the Key Differences

Before diving into the migration process, it's helpful to understand some fundamental differences between ListView and CollectionView:

Feature	ListView	CollectionView
Cell Types	Uses predefined cells (`TextCell`, `ImageCell`, etc.)	Uses DataTemplates directly
Selection	Single or multiple selection with built-in visual feedback	Single or multiple but even more flexible selection with customizable visual feedback
Item Appearance	Uses `Cell` hierarchy	Uses direct `DataTemplate`
Layouts	Vertical list only	Vertical, horizontal, and grid layouts
Performance	Less optimized	Better virtualization and performance
Grouping	Through `GroupDisplayBinding`	More flexible grouping options
Headers/Footers	Basic header/footer templates	Enhanced header/footer templates

Step 1: Replace the Control Declaration

The first step is to replace the ListView declaration with CollectionView in your XAML:

Before (ListView):

 x:Name="MyListView" 
          ItemsSource="{Binding Items}">

After (CollectionView):

 x:Name="MyCollectionView"
                ItemsSource="{Binding Items}">

Step 2: Convert Cell Templates to DataTemplates

One of the biggest differences is how items are templated. ListView uses various cell types, while CollectionView uses DataTemplate directly.

Example: Converting TextCell

Before (ListView with TextCell):

 ItemsSource="{Binding Items}">
    
        
             Text="{Binding Title}" 
                      Detail="{Binding Description}" />

After (CollectionView):

 ItemsSource="{Binding Items}">
    
        
             Padding="10">
                
                     Height="Auto" />
                     Height="Auto" />
                
                 Grid.Row="0" Text="{Binding Title}" FontAttributes="Bold" />
                 Grid.Row="1" Text="{Binding Description}" FontSize="Small" />

Example: Converting ImageCell

Before (ListView with ImageCell):

 ItemsSource="{Binding Items}">
    
        
             Text="{Binding Title}" 
                       Detail="{Binding Description}"
                       ImageSource="{Binding ImageUrl}" />

After (CollectionView):

 ItemsSource="{Binding Items}">
    
        
             Padding="10" ColumnSpacing="10">
                
                     Width="50" />
                     Width="*" />
                
                
                     Height="Auto" />
                     Height="Auto" />
                

                 Grid.Row="0" Grid.RowSpan="2" Grid.Column="0"
                       Source="{Binding ImageUrl}"
                       Aspect="AspectFill"
                       HeightRequest="50" WidthRequest="50" />

                 Grid.Row="0" Grid.Column="1" 
                       Text="{Binding Title}" 
                       FontAttributes="Bold" />

                 Grid.Row="1" Grid.Column="1" 
                       Text="{Binding Description}" 
                       FontSize="Small" />

Step 3: Update Selection Handling

The selection mechanism differs between the two controls:

Before (ListView):

void OnItemSelected(object sender, SelectedItemChangedEventArgs e)
{
    if (e.SelectedItem == null)
        return;

    // Handle the selected item
    var selectedItem = e.SelectedItem as MyItemType;

    // Important: Deselect the item
    ((ListView)sender).SelectedItem = null;
}

After (CollectionView):


      x:Name="collectionView"
      SelectionMode="Single"
      SelectionChanged="OnSelectionChanged">

async void OnSelectionChanged(object sender, SelectionChangedEventArgs e)
{
    var previous = e.PreviousSelection.FirstOrDefault();
    var current = e.CurrentSelection.FirstOrDefault();
}

Step 4: Convert Grouping

If you're using grouping in your ListView, you'll need to adapt it for CollectionView:

Before (ListView with grouping):

 ItemsSource="{Binding GroupedItems}" 
          IsGroupingEnabled="True"
          GroupDisplayBinding="{Binding Key}">

After (CollectionView with grouping):

 ItemsSource="{Binding GroupedItems}" 
                IsGrouped="True">
    
        
             Text="{Binding Key}" 
                   FontAttributes="Bold"
                   BackgroundColor="LightGray"
                   Padding="10" />

Step 5: Headers and Footers

Converting headers and footers is straightforward:

Before (ListView):

 ItemsSource="{Binding Items}">
    
         Text="Items List" FontSize="Large" />
    
    
         Text="End of list" />

After (CollectionView):

 ItemsSource="{Binding Items}">
    
         Text="Items List" FontSize="Large" />
    
    
         Text="End of list" />

Step 6: Take Advantage of New Layout Options

One significant advantage of CollectionView is its flexible layout options:

Vertical List (default):

 ItemsSource="{Binding Items}">
    
         Orientation="Vertical" ItemSpacing="5" />

Horizontal List:

 ItemsSource="{Binding Items}">
    
         Orientation="Horizontal" ItemSpacing="5" />

Grid Layout:

 ItemsSource="{Binding Items}">
    
         Orientation="Vertical" 
                         Span="2"
                         HorizontalItemSpacing="5"
                         VerticalItemSpacing="5" />

Step 7: Handle Empty State

CollectionView has better support for empty state handling:

 ItemsSource="{Binding Items}">
    
         Padding="20">
             Text="No items available" 
                   HorizontalOptions="Center"
                   VerticalOptions="Center" />
             Text="Refresh" Command="{Binding RefreshCommand}" />

Common Challenges and Solutions

Challenge 1: Context Actions

ListView's ContextActions don't have a direct equivalent in CollectionView. Instead, you can use SwipeView:

Before (ListView with ContextActions):

 ItemsSource="{Binding Items}">
    
        
            
                
                     Text="Edit" Command="{Binding Source={RelativeSource AncestorType={x:Type vm:MyViewModel}}, Path=EditCommand}" CommandParameter="{Binding .}" />
                     Text="Delete" Command="{Binding Source={RelativeSource AncestorType={x:Type vm:MyViewModel}}, Path=DeleteCommand}" CommandParameter="{Binding .}" />
                
                 Text="{Binding Title}" />

After (CollectionView with SwipeView):

 ItemsSource="{Binding Items}">
    
        
            
                
                    
                         Text="Edit" 
                                   Command="{Binding Source={RelativeSource AncestorType={x:Type vm:MyViewModel}}, Path=EditCommand}" 
                                   CommandParameter="{Binding .}"
                                   BackgroundColor="Blue" />
                         Text="Delete" 
                                   Command="{Binding Source={RelativeSource AncestorType={x:Type vm:MyViewModel}}, Path=DeleteCommand}" 
                                   CommandParameter="{Binding .}"
                                   BackgroundColor="Red" />
                    
                
                 Padding="10">
                     Text="{Binding Title}" />

Challenge 2: HasUnevenRows

ListView had HasUnevenRows for variable height rows. With CollectionView, rows are automatically sized based on content:

Before (ListView):

 ItemsSource="{Binding Items}" HasUnevenRows="True">

After (CollectionView):

 ItemsSource="{Binding Items}">

Conclusion

With .NET 10 marking ListView as obsolete, now is the ideal time to migrate your MAUI applications to use CollectionView. The transition may require some initial effort, especially if you have complex templates or custom behaviors, but the benefits are substantial. CollectionView offers better performance, more flexible layouts, and an overall improved developer experience.

The migration process outlined in this article provides a straightforward path to update your applications, covering the most common scenarios you'll encounter. By embracing CollectionView now, you'll future-proof your applications and take advantage of the enhancements that Microsoft continues to make to this control.

Remember that while the obsolescence marking begins with .NET 10 Preview 3, ListView will continue to function in .NET 10, giving you some time to complete your migration. However, bug fixes for ListView will generally not be prioritized, so it's best to start the transition sooner rather than later.

Have you encountered any specific challenges in migrating from ListView to CollectionView? Let me know in the comments below, and let's work through them together!