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?

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?

• performance
• reflection
• maui
• controls
• carousel

• What .NET version and what platform (android/iOS/Windows) do you use? And does this Laggy-Swiping issue happen if you decrease the amount of objects or properties? – Liqun Shen-MSFT Commented Feb 17 at 5:53
• Im using -8.0 and its targeting android and iOS for now. The laggy swiping between objects significantly decreases with less properties displayed (around 5 to 8), any more than that and it starts to behave really ugly. – Reno Nowhere Commented Feb 17 at 19:39
• Seems like a memory issue of emulator/simulator, Have you tested on a physical device? – Liqun Shen-MSFT Commented Feb 18 at 6:33
• I have tested it on a device and also without a debugger attached on the emulator as well, still horrendous performance unfortunately. Produces the same kind of glitch behavior and lag as the emulator. Maybe one or two swipes will be smooth, then some animations just skip all together, then delay, then bugging and stopping the carousel in between items etc – Reno Nowhere Commented Feb 18 at 7:01

1 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!