dotnet / dotnet/maui

StackLayout, slow adding

Open
#9,671 4 comments 0 reactions 0 assignees View on GitHub
area-layout delighter-sc layout-stack perf/debug perf/general platform/android s/triaged t/bug
Dominant language
C#
Stars
23.3k
Forks
2k
Avg merge
1d 15h
Merged PRs (30d)
290

Description

### Description

I found it takes a long time to add items to the StackLayout. This generates a bad user experience. The problem is actually mostly noticeable on **Android**.

Unfortunately, I don't know if the topic was ever taken up, but accelerating the addition by even half the time (on Android) would be quite acceptable.

I never really bothered with view loading efficiency as it was always (e.g. WPF) very fast. The problem has always been the efficient retrieval of data from the database, and here it is just the opposite.

Below tests:

Microsoft Visual Studio Community 2022 (64-bit) - Current Version 17.3.2

The test was conducted by clicking a button that added 100 new items to the existing StackLayout.
The tests were carried out on various children such as Label and Grid, (Label fared a bit better than Button), the results are for Button.
Removing ScrollView had no significant performance impact.
**First value is in debug mode.**

**Android 12.0 - API 31 (MAUI)**
233 ms, 159 ms (first load)
1664 ms, 1201 ms
2283 ms, 1678 ms
3114 ms, 2175 ms
3918 ms, 2773 ms
5141 ms, 3965 ms
6250 ms, 4920 ms

**Windows 10 (MAUI)**
21 ms, 20 ms (first load)
171 ms, 167 ms
187 ms, 146 ms
215 ms, 172 ms
244 ms, 196 ms
283 ms, 235 ms
375 ms, 237 ms

For comparison, the times obtained in WPF .Net 6

**WPF (Debug)**
19 ms, (first load)
12 ms
8 ms
4 ms
12 ms
12 ms
26 ms

### Steps to Reproduce

1. Create new Maui Project
2. Delete AppShell class
3. Replace MainPage this code

```XAML


`
```
MainPage.cs

```C#
using System.Diagnostics;

namespace MauiApp1TestStackLayout;

public partial class MainPage : ContentPage
{
StackLayout SL { get; set; }
Label Lab { get; set; }

public MainPage()
{
InitializeComponent();
var sv = new ScrollView();
SL = new StackLayout() { Spacing = 5 };
sv.Content = SL;
MainGrid.Add(sv);
MainGrid.Add(Lab = new Label() { BackgroundColor = Colors.White, TextColor = Colors.Black, HorizontalOptions = LayoutOptions.End, VerticalOptions = LayoutOptions.End, Margin = new Thickness(5) });

AddNextItems();
}

private void Btn_Clicked(object sender, EventArgs e)
{
AddNextItems();
}

private void AddNextItems()
{
var sw = Stopwatch.StartNew();
SL.BatchBegin();
for (int i = 0; i < 100; i++)
{
var btn = new Button() { Text = $"Btn {i}" };
btn.Clicked += Btn_Clicked;
SL.Add(btn);
}
SL.BatchCommit();
sw.Stop();
Lab.Text = $"{sw.ElapsedMilliseconds} ms";
}
}
```

### Version with bug

6.0.486 (current)

### Last version that worked well

Unknown/Other

### Affected platforms

Android

### Affected platform versions

Android 12.0 - API 31

### Did you find any workaround?

Using a different view, eg ListView, does not fit my project model where everything is dynamically generated, although the main reason is different.
There may be another view that works like StackLayout efficiently, but I couldn't find it.

### Relevant log output

_No response_

Contributor guide

Open the contributing guide

Research direction

Start with the reproduced MainPage.cs sample and its StackLayout.Add loop on Android 12/API 31. Run the 100-button timing test in debug and release, then trace the StackLayout layout work to identify where time grows as children are added. Done means the Android addition time is measurably reduced without breaking the sample’s behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
android, csharp
Domain
frontend, mobile-dev, performance
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.