StackLayout, slow adding
- 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
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