C#•15mo ago

❔ UI freezing in Maui

when I populate a collection with items, let's say 300 of them, the UI gets frozen for around two seconds. The rendering blocks the UI in the way that it cannot be interacted with such as scrolling or minimizing/maximizing. How can I solve this? I thought about implementing pagination but here is the thing - First, 300 doesn't seem like many records, does it really require pagination? And also pagination wouldn't really solve the issue of blocked UI, it would just reduce the two seconds down to an amount that is less annoying. What should I do?

11 Replies

Florian VoßOP•15mo ago

not sure if there even is a way to solve this. I guess small block of UI for just rendering 30 or 15 items should be fine right? for me its noticable cuz I know the blocking is there but a user might not notice, I'm not sure its like not even a second of blocking then with using pagination, is that acceptable? I've tried multiple different ways to update the collection, I've tried ObservableCollection<T> with clearing and adding items, I've tried implementing INotifyPropertyChanged and reassigning both with List<T> and ObservableCollection<T>. And I've also tried prepopulating with an even amount and then setting the items in it via indexing. The collection is bound to a <ListView> via binding.

Buddy•15mo ago

MAUI isnt really known for being performant or good for that matter. And I doubt ListView supports virtualized items. Does MAUI even have a "DataGrid" component? Pagination might be the only way to fix it unless MAUI supports item virtualization

Florian VoßOP•15mo ago

I don't know what virtualized items means, should I read into it? sadly Maui doesn't have a DataGrid no. this makes our migration from WPFvery hard indeed as its a ticketsystem full of datagids xD There is a highly upvoted issue on mauis github page to add it in the future. I have tried the most popular frameworks, even payed ones. Telerik's DataGrid has weird bug in windows, devexpress's datagrid for some reason only supports ios and android even tho its for maui xD Syncfusion seems to be the only one that works properly with maui and it costs hell of a lot money for my final exam project of my apprenticeship xD it was around 3k per developer iirc especially considering that I only need this one control, it feels super bad to even consider buying this license. But whats the alternative? building my own DataGrid with listview is a hustle, I already invested a few hours and I am long time away from completing it

sibber•15mo ago

https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/listview#cache-data

ListView - .NET MAUI

The .NET MAUI ListView displays a scrollable vertical list of selectable data items. ListView supports displaying headers and footers, grouped data, pull-to-refresh, and context menu items.

sibber•15mo ago

see if you can use RecycleElement they mention it virtualizes the items

Florian VoßOP•14mo ago

they say its the default behaviour of ListView. So that won't change anything sadly oh nvm I missread its RetainElement thats the defualt Imma give it a try I don't notice a difference let me show you guys what I'm doing:

public partial class MainPage : ContentPage, INotifyPropertyChanged
{
    private ObservableCollection<Call> _calls = new ObservableCollection<Call>();
    public ObservableCollection<Call> Calls { get => _calls; set { _calls = value; OnPropertyChanged(nameof(Calls)); } }
    private ICallRepository<Call> _callRepo;
    public MainPage(ICallRepository<Call> callRepo)
    {
        InitializeComponent();
        BindingContext = this;
        _callRepo = callRepo;
    }
    public async void OnButtonClicked(object sender, EventArgs e){
      Calls = new ObservableCollection<Call>(await _callRepo.GetAllAsync());
    }
}

public partial class MainPage : ContentPage, INotifyPropertyChanged
{
    private ObservableCollection<Call> _calls = new ObservableCollection<Call>();
    public ObservableCollection<Call> Calls { get => _calls; set { _calls = value; OnPropertyChanged(nameof(Calls)); } }
    private ICallRepository<Call> _callRepo;
    public MainPage(ICallRepository<Call> callRepo)
    {
        InitializeComponent();
        BindingContext = this;
        _callRepo = callRepo;
    }
    public async void OnButtonClicked(object sender, EventArgs e){
      Calls = new ObservableCollection<Call>(await _callRepo.GetAllAsync());
    }
}

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="AgentUI_Maui.MainPage">

    <ScrollView>
        <ListView CachingStrategy="RecycleElementAndDataTemplate" ItemsSource="{Binding Calls}">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <Label Text="Test"></Label>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
        </ListView>
    </ScrollView>
</ContentPage>

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="AgentUI_Maui.MainPage">

    <ScrollView>
        <ListView CachingStrategy="RecycleElementAndDataTemplate" ItemsSource="{Binding Calls}">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <Label Text="Test"></Label>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
        </ListView>
    </ScrollView>
</ContentPage>

This blocks the UI for 1-2 seconds. @Cyberrex @Networking is a pain save me pls any ideas what I could try?

sibber•14mo ago

no idea sorry

Florian VoßOP•14mo ago

@Cyberrex @Networking is a pain save me pls I was able to find and fix the problem turned out it was rendering so slow because of the ScrollView. A listview is scrollable by default so it should be removed now that I've removed the ScrollView, its only slow when trying to render 300 items, using pagination with only 15 items renders nearly instant now as expected 😊 with ScrollView -> 300 records - 2.5 seconds stuttering, 15 records - 2.5 seconds stuttering without ScrollView -> 300 records - 1 second stuttering, 15 records - no stuttering

Buddy•14mo ago

Florian VoßOP•14mo ago

now I'm looking into how to implement virtual scrolling which you guys mentioned

Accord•14mo ago

Was this issue resolved? If so, run /close - otherwise I will mark this as stale and this post will be archived until there is new activity.

Gaming

Programming

❔ UI freezing in Maui