LinedFlowLayout compresses items below their desired width

[tipa]

Describe the bug

When the items in a LinedFlowLayout extend the available width of the first row, the items are compressed instead of being laid out in a new line. This causes cut off or trimmed text when using a TextBlock as item content:

Steps to reproduce the bug

<ItemsView ItemsSource="{x:Bind dataSource}">
    <ItemsView.ItemTemplate>
        <DataTemplate x:DataType="sys:String">
            <ItemContainer Background="Red">
                <TextBlock Text="{x:Bind}" Margin="2" TextTrimming="CharacterEllipsis"/>
            </ItemContainer>
        </DataTemplate>
    </ItemsView.ItemTemplate>
    <ItemsView.Layout>
        <LinedFlowLayout LineSpacing="4" MinItemSpacing="4" />
    </ItemsView.Layout>
</ItemsView>

The same issue also occurs when using ItemsRepeater instead of ItemsView. See example project: test.zip

Expected behavior

When using LinedFlowLayout I expect the items to not render below their desired size. The items aren't compressed in size

NuGet package version

WinUI 3 - Windows App SDK 1.8 Experimental 1: 1.8.250515001-experimental2

Windows version

Windows 11 (24H2): Build 26100

[snigdha011997]

Hi @tipa , with the example project provided here, I see the following output

which is not exactly replicating the issue. Please do let me know any more steps are required.

[tipa]

@snigdha011997 The items may lay out correctly for certain screen widths. Did you try to resize the window horizontally? I observed that the layout didn't correctly flow the items into a new line if the space in a row becomes too small, but first reduces the width of the individual items (so you see the text ellipsis shown in my first screenshot) before eventually wrapping the item in a new line when further reducing the window width.

I expect the items to not be reduced in their width, but that the layout immediately wraps them to a new line if the space becomes too narrow