Controls in ListView.Header may end up in unload state after changing the ListView.ItemsPanel

[acouvert-msft]

Describe the bug

When changing the ItemsPanel value of a given ListView, the control child of the ListView.Header will be unload and reload again reusing the same instance.

Issue is that often a race condition occurs and the ListView.Header control child receive the load event first and then unload one, meaning we end up with controls in an unload state in the ListView.Header.

Steps to reproduce the bug

Create a UWP project with the following:

.xaml:

    <Page.Resources>
        <ItemsPanelTemplate x:Name="GridDisplayModeItemsPanelTemplate">
            <ItemsWrapGrid Orientation="Horizontal" />
        </ItemsPanelTemplate>

        <ItemsPanelTemplate x:Name="ListDisplayModeItemsPanelTemplate">
            <ItemsStackPanel />
        </ItemsPanelTemplate>
    </Page.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <ListView
            x:Name="list"
            ItemsPanel="{StaticResource GridDisplayModeItemsPanelTemplate}"
            ItemsSource="{x:Bind Items}">
            <ListView.Header>
                <muxc:ProgressRing
                    HorizontalAlignment="Left"
                    VerticalAlignment="Center"
                    IsActive="True"
                    Loaded="ProgressRing_Loaded"
                    Unloaded="ProgressRing_Unloaded" />
            </ListView.Header>
        </ListView>

        <Button
            Grid.Row="1"
            Click="ChangeItemsPanel"
            Content="Change ItemsPanel" />

        <TextBlock
            x:Name="Status"
            Grid.Row="2"
            Padding="12"
            Foreground="Red"
            TextWrapping="Wrap" />
    </Grid>

.xaml.cs:

        public IEnumerable<string> Items { get => new[] { "Item1", "Item2", "Item3" }; }

        private void ChangeItemsPanel(object sender, Windows.UI.Xaml.RoutedEventArgs e)
        {
            Status.Text += "ItemsPanel: Changing\n";

            // Switching ItemsPanel
            list.ItemsPanel = list.ItemsPanel == ListDisplayModeItemsPanelTemplate
                ? GridDisplayModeItemsPanelTemplate
                : ListDisplayModeItemsPanelTemplate;

            Status.Text += "ItemsPanel: Changed\n";
        }

        private void ProgressRing_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs e)
            => Status.Text += $"ProgressRing#{sender.GetHashCode()}: Loaded\n";

        private void ProgressRing_Unloaded(object sender, Windows.UI.Xaml.RoutedEventArgs e)
            => Status.Text += $"ProgressRing#{sender.GetHashCode()}: Unloaded\n";

To repro, just click on the Button until the ProgressRing is no longer visible.

Expected behavior

While changing a ListView.ItemsPanel value the ListView.Header control child must always receive the unload and load event in the right order.

Screenshots

As you can see, based on its hashcode 23318221, the ProgressRing control instance is reused after updating the ListView.ItemsPanel. It also received the second load event before the unload event, which explains why the ProgressRing is not animated anymore due to its unloaded state.

NuGet package version

Microsoft.UI.Xaml 2.8.0

Windows app type

• UWP
• Win32

Device form factor

Desktop

Windows version

Windows 11 (21H2): Build 22000

Additional context

No response

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[acouvert-msft]

Any update regarding this issue?

[ranjeshj]

This is likely a dup of the issue mentioned here - #1900