ListDetailsView might not properly virtualize items

[Marv51]

Describe the bug

I'm using a small to medium amount of data in a ListDetailsView and the load time of that control is currently not great.

To me it looks like, even with a small amount of data, that a large amount of UIElements are created (Judging from the Live Visual Tree). Maybe leading me to the thought that list virtualization must not be working properly.

Regression

unclear, maybe?

Reproducible in sample app?

• [ ] This bug can be reproduced in the sample app.

Steps to reproduce

<controls:ListDetailsView x:Name="ActuatorListDetails" Margin="0"
                            ItemTemplate="{StaticResource PlanElementTypeListTemplate}"
                            CompactModeThresholdWidth="300" BackButtonBehavior="Inline" ItemsSource="{x:Bind ViewModel.Actuators}">
    <controls:ListDetailsView.ItemTemplate>
        <DataTemplate x:DataType="model:PlanElementType">
            <Grid HorizontalAlignment="Stretch">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="52" />
                    <ColumnDefinition Width="auto" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <ToggleSwitch Grid.Column="0"
                              IsOn="{x:Bind AddedToProject, Mode=TwoWay}" 
                              HorizontalAlignment="Left" 
                              VerticalAlignment="Center" 
                              OnContent="" OffContent="" />
                <Grid Grid.Column="1">
                    <Image Margin="0,5,5,5" 
                           HorizontalAlignment="Center" 
                           Width="36" 
                           Height="36" 
                           Source="{Binding IconPath, Converter={StaticResource PathToImageConverter}}" />
                </Grid>
                <TextBlock Grid.Column="2" VerticalAlignment="Center" 
                           Name="PlanElementName" Text="{x:Bind Name, Mode=OneWay}" />
            </Grid>
        </DataTemplate>
    </controls:ListDetailsView.ItemTemplate>
    <controls:ListDetailsView.ListHeader>
        <Grid Margin="0, 2">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="auto" />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <FontIcon Grid.Column="0" Margin="0,0,6,0" Glyph="&#xE721;" />
            <TextBox Grid.Column="1" Text="{x:Bind ViewModel.Filter, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
        </Grid>
    </controls:ListDetailsView.ListHeader>
    <controls:ListDetailsView.DetailsTemplate>
        <!-- omitted because it seems unrelated --> 
    </controls:ListDetailsView.DetailsTemplate>
</controls:ListDetailsView>

The ItemsSource is an ObservableCollection.

Expected behavior

The list should virtualize elements in the list that are not currently visible.

Screenshots

In the screenshot below, the Live Property Explorer says that the [ItemsPresenter] (1917) is the first to have an ActualHeight of 4002. Parent elements of it have an ActualHeight of 444 or smaller.

Also in the screenshot below, the ItemsSource contains 87 elements. As the ItemTemplate is 21 elements, this means that all elements are fully create (22*87 = 1914).

Windows Build Number

• [ ] Windows 10 1809 (Build 17763)
• [ ] Windows 10 1903 (Build 18362)
• [ ] Windows 10 1909 (Build 18363)
• [ ] Windows 10 2004 (Build 19041)
• [ ] Windows 10 20H2 (Build 19042)
• [ ] Windows 10 21H1 (Build 19043)
• [X] Windows 11 21H2 (Build 22000)
• [ ] Other (specify)

Other Windows Build number

No response

App minimum and target SDK version

• [X] Windows 10, version 1809 (Build 17763)
• [ ] Windows 10, version 1903 (Build 18362)
• [ ] Windows 10, version 1909 (Build 18363)
• [X] Windows 10, version 2004 (Build 19041)
• [ ] Other (specify)

Other SDK version

No response

Visual Studio Version

2022

Visual Studio Build Number

Version 17.0.4

Device form factor

Desktop

Nuget packages

 <PackageReference Include="CommunityToolkit.WinUI.UI.Controls" Version="7.1.2" />
 <PackageReference Include="CommunityToolkit.WinUI.UI" Version="7.1.2" />

This is on WindowsAppSDK 1.0 / WinUI 3.

Additional context

It looks like there are multiple ScrollViews nested inside of each other for this list, which might be an issue.

On first glance it looks like WinUI might have added a ScrollViewer to the TwoPane view only on 1809 or later? Maybe that's part of the problem?

Help us help you

Yes, but only if others can assist.

[ghost]

Hello Marv51, thank you for opening an issue with us!

I have automatically added a "needs triage" label to help get things started. Our team will analyze and investigate the issue, and escalate it to the relevant team if possible. Other community members may also look into the issue and provide feedback 🙌

[zateutsch]

@Marv51 Hey there. I was able to recreate this issue today with a super simple test scenario and it looks like you were right - items don't seem to virtualizing with the ListDetailsView. Gonna do some more digging later today

[zateutsch]

EDIT: According to WinUI team, this shouldn't affect virtualization, just column height. Problem still appears to lie with Two PaneView, but not sure of cause.

So it appears this is a problem with WinUI's TwoPaneView, which is placing the leftmost pane in a grid column of width "Auto", which disables virtualization by default. Looking into workarounds.

[zateutsch]

Link to created WinUI issue.