ListView on Android is slow to update items

[ramarinkahua]

Current behavior

When using a ListView in UNO Platform on Android to display and update a simple collection of 25 random numbers, there is a noticeable performance lag between triggering the update and seeing the changes reflected in the UI. This performance issue is clearly demonstrated in the attached video, where you can observe a significant delay between clicking the generate button and the list updating with new values.

uno_performance.mp4

Expected behavior

The ListView should update promptly when its items are modified, providing a responsive user experience. For comparison, the attached video shows an identical implementation in .NET MAUI, demonstrating a better performance level with faster updates of the same data volume.

maui_performance.mp4

How to reproduce it (as minimally and precisely as possible)

1. Download and extract the attached UNO implementation:
   UnoApp.zip
2. Open the solution in Visual Studio 2022
3. Build and run the Android project
4. Click the "Generate Numbers" button multiple times
5. Observe the delay between clicking the button and seeing the updated numbers

For comparison, you can also run the MAUI implementation from:
MauiApp.zip

Workaround

No response

Works on UWP/WinUI

Yes

Environment

Uno.UI / Uno.UI.WebAssembly / Uno.UI.Skia

NuGet package version(s)

Framework:
.NET 8

UNO Implementation:
Microsoft.Extensions.Logging.Console (8.0.0)
Uno.UI (5.5.66)
Uno.UI.Adapter.Microsoft.Extensions.Logging (5.5.66)
Uno.UI.DevServer (5.5.66)
Uno.UI.RemoteControl (5.5.66)
Uno.UniversalImageLoader (1.9.36)

MAUI Implementation:
Microsoft.Extensions.Logging.Debug (8.0.1)
Microsoft.Maui.Controls (8.0.83)
Microsoft.Maui.Controls.Compatibility (8.0.83)
Microsoft.NET.ILLink.Tasks (8.0.100)

Affected platforms

Android

IDE

Visual Studio 2022

IDE version

17.12.1

Relevant plugins

No response

Anything else we need to know?

No response

[jeromelaban]

Thanks for the report. In the sample itself, the item template style use is the full style, and it uses a very complex template that supports everything that the listview supports.

When using a small template, like this (which is not specified in your sample):

<Style x:Key="KahuaFlatListViewItemStyle"
       TargetType="ListViewItem">
    <Setter Property="Background"
            Value="Transparent" />
    <Setter Property="BorderThickness"
            Value="0" />
    <Setter Property="BorderBrush"
            Value="Transparent" />
    <Setter Property="Foreground"
            Value="Black" />
    <Setter Property="Height"
            Value="32" />
    <Setter Property="HorizontalContentAlignment"
            Value="Stretch" />
    <Setter Property="MinHeight"
            Value="32" />
    <Setter Property="Padding"
            Value="0" />
    <Setter Property="UseSystemFocusVisuals"
            Value="False" />
    <Setter Property="VerticalContentAlignment"
            Value="Center" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListViewItem">
                <Border x:Name="Border"
                        Margin="{TemplateBinding Margin}"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        CornerRadius="{TemplateBinding CornerRadius}">
                    <ContentPresenter x:Name="ContentPresenter"
                                      Padding="{TemplateBinding Padding}"
                                      HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                      VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                      Content="{TemplateBinding Content}"
                                      ContentTemplate="{TemplateBinding ContentTemplate}"
                                      ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}"
                                      ContentTransitions="{TemplateBinding ContentTransitions}" />

                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="Disabled">
                                <VisualState.Setters>
                                    <Setter Target="Border.Opacity"
                                            Value="0.56" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="PointerOver" />
                            <VisualState x:Name="Pressed" />
                            <VisualState x:Name="Selected" />
                            <VisualState x:Name="SelectedUnfocused" />
                            <VisualState x:Name="SelectedPointerOver" />
                            <VisualState x:Name="SelectedPressed" />
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

the recreation of the list is faster.

Could you try and see if this is the performance you're expecting? It is likely that the performance issue you're chasing is not directly related to ListView, but we may need to determine more specifically the scenarion you're running into.

[ramarinkahua]

Thanks for the provided style. It did indeed speed things up. I will try to refactor the template to be better optimized for mobile. Is it possible to make it faster than shown in the video or is this the limit?

Screen.Recording.2024-12-10.141736.mp4

[jeromelaban]

Thanks for the update. Make sure to run this using AOT and release mode. Otherwise, the performance is greatly reduced.