ListBox and recycle container content and layout performance

[msneijders]

Context: a ListBox with a non-trivial ItemTemplate (relatively heavy for layout calculations) and scrolling performance on an android device.

My observations:

It seems that the content of the recycled ListBoxItem gets removed in VirtualizingStackPanel.RecycleElement. This triggers layout calculations?

In release mode the layout time per frame is just over 6ms (on desktop and according to devtools overlay).

My (likely naive) changes) to prevent the removing of the content so the content will only be set once per recycle:

public class SelectingItemsControl
{
        protected internal override void ClearContainerForItemOverride(Control element)
        {
            //no more clearing of Content (and ContentTemplate)
            //base.ClearContainerForItemOverride(element);

            try
            {
                _ignoreContainerSelectionChanged = true;
                element.ClearValue(IsSelectedProperty);
            }
            finally
            {
                _ignoreContainerSelectionChanged = false;
            }
        }
}

public class ItemsControl
{
        protected internal virtual void PrepareContainerForItemOverride(Control container, object? item, int index)
        {
            // ...
            else if (container is ContentControl cc)
            {
               // now always set content because we do not clear it anymore:
                cc.SetCurrentValue(ContentControl.ContentProperty, item);
                //SetIfUnset(cc, ContentControl.ContentProperty, item);

                if (itemTemplate is not null)
                    SetIfUnset(cc, ContentControl.ContentTemplateProperty, itemTemplate);
            }
            // ...
        }
}

Now in release mode the layout time per frame is just below 3ms -- cutting half of the layout time.

On a desktop machine you notice very little in difference while scrolling. But using Android on common business devices (like Zebra TC21 that I am using) the difference is very big. Going from practically not being able to scroll to scrolling very reasonably.

Questions:

Have others noticed layout often takes too much time on (medium to low end) Android devices for scrolling a ListBox decently?
And what techniques are you using to deal with that?

What caveats would my solution here have? ie. I think it could give problems if the itemtemplate has transitions defined, which could get triggered unwantedly.

[maxkatz6]

With these changes you likely break virtualization, keeping items from being reused on scrolling properly.

If you are fine going deeper into inheriting list box and redefining some function, like you already did, I would recommend going alternative approach, familiar to WPF developer with overriding containers generator. And instead of relying ItemTemplate you can override the way containers are generated in the first place.

public class MyListBox : ListBox
{

  protected override bool NeedsContainerOverride(object? item, int index, out object? recycleKey)
  {
      // Set special recycle key for your models. This will keep a separated recycle pool for this model.
      // In the same way, you can handle multiple item types, with dedicated recycle pool. Saving lots of CPU on jumping between different templates for different model types.
      if (item is MyDataModel)
      {
           recycleKey = typeof(MyDataContainer);
           return true;
      }
  
      // Fallback to default containers.
      return NeedsContainer<ListBoxItem>(item, out recycleKey)
  }

    protected override Control CreateContainerForItemOverride(object? item, int index, object? recycleKey)
    {
        // This is method where containers are created, to be reused per each recycle key. Avalonia will create as many containers as needed to display one screen of items, and pool them per specific key.
        if ((Type)recycleKey! == typeof(MyDataContainer))
        {
            return new MyDataContainer(); // If you inherit ListBox, this container should inherit ListBoxItem as well.
        }

        return base.CreateContainerForItemOverride(item, index, recycleKey);
    }

    // Two optional, but not required method, you can override to prepare container for a new item. Note, base implementation handles selection too.
    protected override void PrepareContainerForItemOverride(Control container, object? item, int index)
    {
        base.PrepareContainerForItemOverride(container, item, index);
    }
    protected override void ClearContainerForItemOverride(Control container)
    {
        base.ClearContainerForItemOverride(container);
    }

}

[maxkatz6]

This way, you don't rely on data templates at all. And instead handle containers creation, as well as you handle preparing these containers for items on recycling.

[maxkatz6]

Also don't forget to set StyleKeyOverride for MyDataContainer, or make a custom theme.

[msneijders]

I sort of use this technique in my more complete 'solution' -- a custom MyListBoxItem created in a MyListBox -- and then preventing base.ClearContainerForItemOverride(container), so it will not reset Content of this container. (only hurdle is it should clear IsSelectedProperty, but without triggering ContainerSelectionChanged (SelectingItemsControl.MarkContainerSelected() but this one is private, so I use an (unwanted) reflection to call this). This is working in production for quite some time, and have not seen breaking virtualization yet -- also this solution needed some tricks for preventing transition animation, for example when using an Expander in the container it would otherwise do an 'open' animation on the collapser button if the item was still in the 'opened' state when scrolling into view.

I have to think about your solution a bit longer and try it out; I think I am still in the 'use data template' mode -- I assume this will need a Container type for each model type I have, and the listbox needs to know about all these model types. Thank you for your reply.

[msneijders]

Just for sharing: based on this suggestion, as far as I am understanding it, I created this:

    class MyDataContainer: ListBoxItem
    {
        protected override Type StyleKeyOverride => typeof(MyDataContainer);
    }

    public class MyListBox : ListBox
    {
        protected override Type StyleKeyOverride => typeof(ListBox);

        protected override bool NeedsContainerOverride(object? item, int index, out object? recycleKey)
        {
            if (item is ItemModel)
            {
                recycleKey = typeof(MyDataContainer);
                return true;
            }

            return base.NeedsContainerOverride(item, index, out recycleKey);
        }

        protected override Control CreateContainerForItemOverride(object? item, int index, object? recycleKey)
        {
            if ((Type)recycleKey! == typeof(MyDataContainer))
            {
                return new MyDataContainer(); // If you inherit ListBox, this container should inherit ListBoxItem as well.
            }

            return base.CreateContainerForItemOverride(item, index, recycleKey);
        }
    }

And in ListBoxPage.xaml (using avalonia's ControlCatalog ListBoxPage):

<UserControl
    x:Class="ControlCatalog.Pages.ListBoxPage"
    xmlns:pages="using:ControlCatalog.Pages"
    xmlns:viewModels="using:ControlCatalog.ViewModels"
    x:DataType="viewModels:ListBoxPageViewModel">
    <UserControl.Resources>
        <ControlTheme
            x:Key="{x:Type pages:MyDataContainer}"
            BasedOn="{StaticResource {x:Type ListBoxItem}}"
            TargetType="pages:MyDataContainer">
            <Setter Property="Background" Value="White" />
            <Setter Property="Padding" Value="{DynamicResource ListBoxItemPadding}" />
            <Setter Property="Template">
                <ControlTemplate x:DataType="viewModels:ItemModel">
                    <ContentPresenter
                        Name="PART_ContentPresenter"
                        Height="125"
                        Padding="{TemplateBinding Padding}"
                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        CornerRadius="{TemplateBinding CornerRadius}">
                        <ContentPresenter.Content>
                            <Canvas Height="125">
                               <!-- rest of item template -->
                            </Canvas>
                        </ContentPresenter.Content>
                    </ContentPresenter>
                </ControlTemplate>
            </Setter>
        </ControlTheme>
    </UserControl.Resources>
    <DockPanel>
        <pages:MyListBox
            AutoScrollToSelectedItem="{Binding AutoScrollToSelectedItem}"
            ItemsSource="{Binding Items}"
            Selection="{Binding Selection}"
            SelectionMode="{Binding SelectionMode^}"
            WrapSelection="{Binding WrapSelection}" />
    </DockPanel>
</UserControl>

In release mode this gives similar performance as my optimization (preventing clearing content) (so about half the layout time per frame compared to using ItemTemplate in an unmodified ListBox).

To me this feels a bit of a workaround to optimize layout performance; using Datatemplates/ItemTemplates feels more natural to me.

I could keep testing my own optimization in production without using Reflection for IsSelected clearing, if SelectingItemsControl.MarkContainerSelected could become protected or part of PrivateAPI; would that be considered merged?