How to create 2500 variable height textbox in reasonable time

[slsTomE]

I am making a property grid / inspector type control where I have a finite but large amount of rows that are generated from data.

Each row is a component and has a number of nested field controls that have non-uniform height. Some of the controls are expanders or lists so the sizes aren't completely stable, a lot of the controls are textboxes but not all of them, some are custom controls with different heights.

My worst case is 100 expanders at the top level that each have 7 rows where each row and expander have 3 textboxes, so about 2500 textboxes in total.

Just generating them naively takes about 4 seconds which is way too long since my users will be doing this a lot, it needs to be responsive after max 1 seconds, preferably .5 seconds.
I did some profiling and almost all of the time is spent doing MeasureCore.
I tried setting constant sizes to maybe ease the measurement load but that did nothing and looking at the source I can't see any early outs so that makes sense.
I also tried different panels simpler than the grid but that did nothing either.
I tried using virtualized panels which is a lot faster but doesnt work since I have variable heights.If I change the textboxes to textblocks (I can't in reality though) it does speed it up quite a bit but it still takes one second and its still MeasureCore.

[Layout]Started layout pass. To measure: '8' To arrange: '0' (LayoutManager #28158266)
[Layout]Layout pass finished in '00:00:04.2280866' (LayoutManager #28158266)

Currently I'm generating one expander and its content, waiting until a ui background dispatch happens and then do the next expander. This makes it so it doesn't freeze everything and they pop in one at a time which is kinda of fine by itself however this becomes annoying since i have it in a dock tab which detached all my expanders from the visual tree when a tab is hidden which means that it needs to re-add them incrementally again and my scroll position is lost.

This is a simplified example that shows how it would look in the textbox case, I have removed a lot of details to make it easier to read.

<Setter Property="Template">
    <ControlTemplate>
        <Border Background="{TemplateBinding Background}"
                Padding="{TemplateBinding Padding}">
            <ItemsControl x:Name="PART_ItemHost" ItemsSource="{TemplateBinding LoadedComponents}">
                <ItemsControl.Template>
                    <ControlTemplate>
                        <ScrollViewer>
                            <ItemsPresenter/>
                        </ScrollViewer>
                    </ControlTemplate>
                </ItemsControl.Template>
            </ItemsControl>
        </Border>
    </ControlTemplate>
</Setter>

protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
{
     _ItemHost.ItemTemplate = new FuncDataTemplate<Field_v1ViewModel>((component, _) => new RowTemplate(component));
}

internal class RowTemplate : ContentPresenter
{
    public RowTemplate2(Field_v1ViewModel component)
    {
        Content = CreateControl(_Component);
    }
}

public static Control? CreateControl(FieldViewModel field)
{
    var label = new TextBox { Text = field.Name, [Grid.ColumnProperty] = 0, };
    var value = new TextBox { Text = field.Value, [Grid.ColumnProperty] = 1, };
    var type = new TextBox { Text = field.Type, [Grid.ColumnProperty] = 2, Height = 25 * rnd.Next(1, 10) };

    var fieldGrid = new Grid();

    fieldGrid.Children.Add(label);
    fieldGrid.Children.Add(value);
    fieldGrid.Children.Add(type);

    if (field.Fields.Count == 0)
        return fieldGrid;

    StackPanel childPanel = new();
    foreach (var child in field.Fields)
        childPanel.Children.Add(CreateControl(child));

    var expander = new Expander()
    {
        Header = fieldGrid,
        IsExpanded = true,
        Content = childPanel,
    };
    return expander;
}

private void MeasureAsync()
{
    var dto = Dto;
    var loadedComponents = LoadedComponents;

    Task.Run(async () =>
    {
        while (true)
        {
            if (loadedComponents.Count >= dto.Count)
                return;

            // Adding to this observable list trigger a row template to be created which then creates the expander and its controls
            loadedComponents.Add(dto[loadedComponents.Count]);

            await Dispatcher.UIThread.Invoke(async () => await Task.CompletedTask, DispatcherPriority.Background);
        }
    });
}

Im using avalonia 11.3.11 desktop

My questions are

1. Am I doing something wrong or is there a better way to do this?
2. Is there some way that I can precalculate the sizes to speed it up?
3. Is there a way to cache the result to make the redraw faster?
4. It sounds like PR Feature/20259 virtualizingdatatemplate #20267 would solve my case, what is the status of that?

[stevemonaco]

Some ideas.

1. You will definitely want to ensure virtualization (the recycling/pooling part) is working. You'll need to bridge that gap yourself for now.
2. You should prefer using TextBlock and swapping to TextBox when the user actually interacts. This is how most DataGrid controls work.
3. Re-template TextBox to eliminate some of the controls. It's quite complex and you may not need all of it.
4. Find a different UI design that doesn't require a large number of variable height items and expanders.
5. Async measuring through firing a task is not a good idea.
6. Ensure you aren't adding one item at a time to the collection when initializing.
7. Batching. Need to ensure your collection supports INPC for ranges, same with the control.
8. Batching. Write a layout control that measures only N new items during a layout pass and invalidates for a new layout pass next tick to measure the next N items. There may be cyclic protection against InvalidateMeasure while measuring though. Experimental approach I haven't seen before.
9. Use an estimated constant size and only measure when the item is on screen. Hard to do.

VirtualizingStackPanel (as ItemsControl.ItemsPanel) and ItemsRepeater both have historically had bugs, especially with variable height items. ItemsRepeater is going be deprecated/unmaintained for v12, AFAIK, so I would avoid it.

[slsTomE]

Thanks for the quick and helpful reply

1: I would like to but it seems like the only solution is to write my own virtualized stack panel and scroll viewer that works on logical units instead, like the one wpf has, is my only choice and that seems very complicated.
2: That is a good idea and I will look into doing that.
3: I have done this a little already but there are a few more things that could probably be removed.
4: Unfortunately the use-case is very complex so this will not be an option.
5: Yeah I tried and it really doesn't like being measured on a separate thread.
6: My first version added all of them at the same time and that makes the measuring take too long so my current version adds them one at a time to spread out the calculations as a workaround, ideally i dont want to do this because it messes up other things..
7-8: Do you know of a control that does something similar that I could look at?
9:I have considered this and maybe i could figure out some sort of estimate in my use-case but that also means i have to make my own virtualized stack panel right, just with a different way of estimating height?

[BreyerW]

Are you doing actually one at a time or like several items at a time? If the former try going middle and insert X amount every time. Ideally X should be large enough to fill visible space so that user can instantly interact with UI but if thats not possible then just do some rough estimation how many items to insert every time

[thevortexcloud]

AOT compiling might help a little bit. But you get all the tradeoffs of AOT with that.

https://learn.microsoft.com/en-us/dotnet/core/deploying/native-aot/

[stevemonaco]

I don't think so. I didn't recommend ReadyToRun (which gives you around half the benefit for no effort) because these are 2500 template instantiations at runtime so the JIT will be well-warmed a few iterations in. It's not the same as if you had a hardcoded page with 2500 controls where calling the View's constructor (and InitializeComponent) can take a second or longer for the JIT.