MAUI CarouselView performance issue with large datasets (Laggy Swiping)

Question

Im a new Developer working on a .NET MAUI project in my first job as a mobile dev, and I've run into some serious issues with the CarouselView control.

I'm using .NET MAUI's CarouselView to display a list of objects from a database. Each object has up to 24 properties, displayed in a vertical list (Label for the property name + Label for the value with an Entry for a new value to be input). The CarouselView is bound to a collection of 50-70 objects, and each swipe should update the displayed item's properties.

Issues:

• The CarouselView exhibits severe performance issues:

• Laggy/swiping is not smooth

• Freezing in between objects

• Screen position glitches (items shifting incorrectly)

Data Setup:

• The data is currently collected by models like this

public partial class Measurement : ObservableObject
{
    private int? _id;
    public int? Id
    {
        get => _id;
        set => SetProperty(ref _id, value);
    }

    public ObservableCollection<Property>? Properties { get; set; }
}

public class Property
{
    public string? PropName { get; set; }
    public string? PrevValue { get; set; }
    public string? NewValue { get; set; }
}

• And then I'm initializing collection of type Measurement in the view model like so:

private ObservableCollection<Measurement>? _measurements;
public ObservableCollection<Measurement>? Measurements
{
    get => _measurements;
    set => SetProperty(ref _measurements, value);
}

public MainPageViewModel()
{
    Measurements = new ObservableCollection<Measurement>
    {
        new Measurement
        {
            Id = 1,
            Properties = new ObservableCollection<Property>
            {
                new Property {PropName = "Test Prop 1", PrevValue = "1", NewValue = string.Empty},
                new Property {PropName = "Test Prop 2", PrevValue = "2", NewValue = string.Empty},
                // Up to 24 properties
            }
        },
        new Measurement
        {
            Id = 2,
            Properties = new ObservableCollection<Property>
            {
                new Property {PropName = "Test Prop 1", PrevValue = "1", NewValue = string.Empty},
                new Property {PropName = "Test Prop 2", PrevValue = "2", NewValue = string.Empty},
                // Up to 24 properties
            }
        },
        // More Measurement objects (right now im testing with 10+)
    };
}

UI Setup:

• CarouselView is bound to an ObservableCollection<Measurement> Measurements

• Inside each CarouselView item, a CollectionView displays the object's 24 properties

• The view dynamically generates values for properties that are not null

<CarouselView ItemsSource="{Binding Measurements}">
    <CarouselView.ItemTemplate>
        <DataTemplate>
            <VerticalStackLayout>
                <CollectionView ItemsSource="{Binding Properties}">
                    <CollectionView.ItemTemplate>
                        <DataTemplate>
                            <HorizontalStackLayout>
                                <Label Text="{Binding PropName}" />
                                <Label Text="{Binding PrevValue}" />
                                <Entry Text="{Binding NewValue, Mode=TwoWay}" />
                            </HorizontalStackLayout>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>
            </VerticalStackLayout>
        </DataTemplate>
    </CarouselView.ItemTemplate>
</CarouselView>

What I've Tried:

• Using CollectionView inside CarouselView

• Hardcoding properties in the UI rather than having them dynamically generate as above.

• Experimenting with BindingMode=OneTime to reduce binding overhead.

Question:
Why does the CarouselView perform so poorly in this scenario, and what optimizations can be applied to improve swiping smoothness and data loading between "pages" or swipes?

Answer 1

Here are few tips that might help,

First, try upgrading to the latest .NET9 as there are some CollectionView performance updates in.NET9.

Second, it's not recommended to nest scroll views. But if you want, try simplifying the layouts which are unnecessary. You can refer to Choose the correct layout to improve app performance.

A layout that's capable of displaying multiple children, but that only has a single child, is wasteful.

For example, the VerticalStackLayout in the code is unnecessary as it only has one single child.

There are some docs to help analysis the performance, Profiling .NET MAUI Apps and Memory Leaks.

Here is also a related issue on GitHub [Android] CarouselView + CollectionView performance issues #23715, you may follow up this issue if you want.

Hope it helps!