Occasional crashes when using ScrollView to wrap nested ItemsRepeater

[wky214269273]

Describe the bug

When using a ScrollView to wrap nested ItemsRepeater, there is an occasional Layout Cycle Detected exception. There is also a strange issue where when I use Debug to debug and try to catch the exception, it never triggers, but when I run the program individually, both Debug and Release builds trigger it.

Steps to reproduce the bug

Refer to the following code. As long as you swipe, there is a high probability of triggering. Also, it seems to be related to DPI. I have not triggered it when using 100% DPI on my desktop, but my laptop has a high trigger rate when using 150% DPI.

```XAML
 <ScrollView MaxHeight="500">
    <ItemsRepeater ItemsSource="{x:Bind ItemsSource}">
        <ItemsRepeater.Layout>
            <StackLayout Orientation="Vertical" Spacing="3" />
        </ItemsRepeater.Layout>
        <ItemsRepeater.ItemTemplate>
            <DataTemplate x:DataType="model:ComEventLog">
                <Expander HorizontalAlignment="Stretch" IsExpanded="{x:Bind IsExpand, Mode=TwoWay}">
                    <Expander.Header>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="auto" />
                                <ColumnDefinition />
                            </Grid.ColumnDefinitions>
                            <FontIcon
                                Margin="5,0"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                Foreground="#E63935"
                                Glyph="&#xEB90;"
                                Visibility="{x:Bind ShowError, Converter={StaticResource VisibilityBool}}" />
                            <FontIcon
                                Margin="5,0"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                Foreground="#F57C00"
                                Glyph="&#xE814;"
                                Visibility="{x:Bind ShowWarnning, Converter={StaticResource VisibilityBool}}" />
                            <FontIcon
                                Margin="5,0"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                Foreground="#43A047"
                                Glyph="&#xEC61;"
                                Visibility="{x:Bind ShowInfo, Converter={StaticResource VisibilityBool}}" />
                            <TextBlock
                                Grid.Column="1"
                                HorizontalAlignment="Left"
                                VerticalAlignment="Center"
                                Text="{x:Bind LogText}"
                                TextWrapping="Wrap" />
                        </Grid>
                    </Expander.Header>
                    <Expander.Content>
                        <ItemsRepeater ItemsSource="{x:Bind ChildrenNodes}">
                            <ItemsRepeater.Layout>
                                <StackLayout Orientation="Vertical" Spacing="10" />
                            </ItemsRepeater.Layout>
                            <ItemsRepeater.ItemTemplate>
                                <DataTemplate x:DataType="model:ComEventLog">
                                    <Grid Margin="25,0,0,0">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="auto" />
                                            <ColumnDefinition />
                                        </Grid.ColumnDefinitions>
                                        <FontIcon
                                            Margin="5,0"
                                            HorizontalAlignment="Center"
                                            VerticalAlignment="Center"
                                            Foreground="#E63935"
                                            Glyph="&#xEB90;"
                                            Visibility="{x:Bind ShowError, Converter={StaticResource VisibilityBool}}" />
                                        <FontIcon
                                            Margin="5,0"
                                            HorizontalAlignment="Center"
                                            VerticalAlignment="Center"
                                            Foreground="#F57C00"
                                            Glyph="&#xE814;"
                                            Visibility="{x:Bind ShowWarnning, Converter={StaticResource VisibilityBool}}" />
                                        <FontIcon
                                            Margin="5,0"
                                            HorizontalAlignment="Center"
                                            VerticalAlignment="Center"
                                            Foreground="#43A047"
                                            Glyph="&#xEC61;"
                                            Visibility="{x:Bind ShowInfo, Converter={StaticResource VisibilityBool}}" />
                                        <TextBlock
                                            Grid.Column="1"
                                            HorizontalAlignment="Left"
                                            VerticalAlignment="Center"
                                            IsTextSelectionEnabled="True"
                                            Text="{x:Bind LogText}"
                                            TextWrapping="Wrap" />
                                    </Grid>
                                </DataTemplate>
                            </ItemsRepeater.ItemTemplate>
                        </ItemsRepeater>
                    </Expander.Content>
                </Expander>
            </DataTemplate>
        </ItemsRepeater.ItemTemplate>
    </ItemsRepeater>
</ScrollView> 

### Expected behavior

Never Crash

### Screenshots

_No response_

### NuGet package version

WinUI 3 - Windows App SDK 1.4.5: 1.4.240411001

### Windows version

Windows 11 (22H2): Build 22621

[github-actions]

Hi I'm an AI powered bot that finds similar issues based off the issue title.

Please view the issues below to see if they solve your problem, and if the issue describes your problem please consider closing this one. Thank you!

Open similar issues:

• Unhandled exception when scrolling a ScrollViewer/ItemsRepeater after expanding two or more items that have ItemsRepeater inside (#8162), similarity score: 0.76

Closed similar issues:

• ItemsRepeater crashes when scrolling back and forth (#2834), similarity score: 0.73
• Putting ItemsRepeater inside ScrollViewer throws exception (#710), similarity score: 0.71

Note: You can give me feedback by thumbs upping or thumbs downing this comment.

[wky214269273]

I found a solution by replacing the first ItemsRepeater with a ListView. It seems that multiple ItemsRepeater cannot be directly nested. According to Microsoft's official documentation, it is recommended that ItemsRepeater only be used for data display.

[ranjeshj]

@wky214269273 thanks for reporting and the details. Is this the smallest repro to cause it to crash ? Would it still crash without the Expander etc in the template. If you are able to provide a smaller/minimal repro that would be useful. Thanks!

[RBrid]

I tried this xaml markup

<ScrollView MaxHeight="500">
    <ItemsRepeater ItemsSource="{x:Bind ItemsSource}">
        <ItemsRepeater.Layout>
            <StackLayout Orientation="Vertical" Spacing="3"/>
        </ItemsRepeater.Layout>
        <ItemsRepeater.ItemTemplate>
            <DataTemplate x:DataType="local:ComEventLog">
                <Expander HorizontalAlignment="Stretch"
                    IsExpanded="{x:Bind IsExpand, Mode=TwoWay}">
                    <Expander.Header>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition />
                            </Grid.ColumnDefinitions>
                            <FontIcon
                                Margin="5,0"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                Foreground="#43A047"
                                Glyph="&#xEC61;"/>
                            <TextBlock
                                Grid.Column="1"
                                HorizontalAlignment="Left"
                                VerticalAlignment="Center"
                                Text="{x:Bind LogText}"
                                TextWrapping="Wrap"/>
                        </Grid>
                    </Expander.Header>
                    <Expander.Content>
                        <ItemsRepeater ItemsSource="{x:Bind ChildrenNodes}">
                            <ItemsRepeater.Layout>
                                <StackLayout Orientation="Vertical" Spacing="10"/>
                            </ItemsRepeater.Layout>
                            <ItemsRepeater.ItemTemplate>
                                <DataTemplate x:DataType="local:ComEventLog">
                                    <Grid Margin="25,0,0,0">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto"/>
                                            <ColumnDefinition />
                                        </Grid.ColumnDefinitions>
                                        <FontIcon
                                            Margin="5,0"
                                            HorizontalAlignment="Center"
                                            VerticalAlignment="Center"
                                            Foreground="#43A047"
                                            Glyph="&#xEC61;"/>
                                        <TextBlock
                                            Grid.Column="1"
                                            HorizontalAlignment="Left"
                                            VerticalAlignment="Center"
                                            IsTextSelectionEnabled="True"
                                            Text="{x:Bind LogText}"
                                            TextWrapping="Wrap" />
                                    </Grid>
                                </DataTemplate>
                            </ItemsRepeater.ItemTemplate>
                        </ItemsRepeater>
                    </Expander.Content>
                </Expander>
            </DataTemplate>
        </ItemsRepeater.ItemTemplate>
    </ItemsRepeater>
</ScrollView>

with this code behind:

public sealed partial class MainPage : Page
{
    public List<ComEventLog> ItemsSource
    { get; private set; }

    public BlankPage()
    {
        this.InitializeComponent();

        ItemsSource = new List<ComEventLog>();

        for (int i = 0; i < 100; i++)
        {
            ComEventLog comEventLog1 = new ComEventLog();
            comEventLog1.LogText = "Com Event Log " + (i * i * i).ToString();
            comEventLog1.ChildrenNodes = new List<ComEventLog>();
            comEventLog1.IsExpand = (((i + 1) * i) / 3) * 3 != (i + 1) * i;

            for (int j = 0; j < i + 1; j++)
            {
                ComEventLog comEventLog2 = new ComEventLog();
                comEventLog2.LogText = "Com Event Log " + ((i + j) * (i + j) * (i + j)).ToString();
                comEventLog1.ChildrenNodes.Add(comEventLog2);
            }

            ItemsSource.Add(comEventLog1);
        }
    }
}

public class ComEventLog
{
    public bool IsExpand
    { get; set; }

    public string LogText
    { get; set; }

    public List<ComEventLog> ChildrenNodes
    { get; set; }
}

I could not repro the layout cycle in 125% and 150% DPI, for the WinAppSDK 1.7 release.