.NET MAUI Problem with rendering ListView/CollectionView on Android

This issue has been moved from a ticket on Developer Community.

---

[severity:It’s more difficult to complete my work]
I have a program on the MAUI platform with the MVVM pattern. I’m doing it now for Android and there is a problem with rendering ListView/CollectionView:
The problem is the long rendering of ListView or CollectionView on Android phones. Here you have an empty application screen with an empty ListView. You click the “Add 20 items” button. And the User interface “freezes for 2 seconds” on the android 10 version is about 3 seconds, on android 13 it is already 1.5 seconds. Provided that you have only 8 Labels, but as soon as you add another picture or more Labels, etc., the loading time will increase even more.

Example:

C#

using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Windows.Input;

namespace MauiApp1;

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        BindingContext = new MainPageModel();
    }
}

public class MainPageModel : INotifyPropertyChanged
{

    public event PropertyChangedEventHandler? PropertyChanged;

    public ICommand ButtonCommand => new Command(UpdateList);

    private void UpdateList()
    {
        List list = new();
        for (int i = 0; i < 20; i++)
        {
            list.Add(new MainPageModel()
            {
                Example = "Text",
                Test = "Test"

            });
        }
        MyItems = new ObservableCollection(list);

    }

    public ObservableCollection MyItems
    {
        get => _MyItems;
        set
        {
            _MyItems = value;
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(MyItems)));
        }
    }
    private ObservableCollection _MyItems = new ObservableCollection();

    public string Example
    {
        get => _example;
        set
        {
            _example = value;
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(Example)));
        }
    }
    private string _example;

    public string Test
    {
        get => _test;
        set
        {
            _test = value;
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(Test)));
        }
    }
    private string _test;
}

  

XAML

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiApp1.MainPage"
             xmlns:local="clr-namespace:MauiApp1"
             x:DataType="local:MainPageModel">
    <ScrollView Padding="6">
        <VerticalStackLayout>
            <Button Text="Add 20 items" Command="{Binding ButtonCommand}" />
            <ListView ItemsSource="{Binding MyItems}" HasUnevenRows="True">
                <ListView.ItemTemplate>
                    <DataTemplate x:DataType="local:MainPageModel">
                        <ViewCell>
                            <Grid>
                                <VerticalStackLayout>
                                    <VerticalStackLayout Margin="0,12,0,0">
                                        <Label Text="{Binding Example}"  />
                                        <Label Text="{Binding Example}"  />
                                        <Label Text="{Binding Example}"  />
                                        <Label Text="{Binding Example}"  />
                                    </VerticalStackLayout>
                                    <VerticalStackLayout Margin="0,12,0,0">
                                        <Label Text="{Binding Test}"  />
                                        <Label Text="{Binding Test}"  />
                                        <Label Text="{Binding Test}"  />
                                        <Label Text="{Binding Test}"  />
                                    </VerticalStackLayout>
                                </VerticalStackLayout>
                            </Grid>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </VerticalStackLayout>
    </ScrollView>
</ContentPage>

PS: Don’t track the rendering using Stopwatch. Since the “user interface” itself freezes, it is easily visible if you add a Gif image next to the button and notice the “GIF freezing” when you click on the button.

---

Original Comments

Feedback Bot on 12/4/2022, 04:35 PM:

(private comment, text removed)

---

Original Solutions

(no solutions)

[PureWeen]

Related https://github.com/dotnet/maui/issues/12130

[msftbot[bot]]

We’ve moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.