microsoft / microsoft/microsoft-ui-xaml

LinedFlowLayout compresses items below their desired width

Open
#10,612 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

area-TextBlocks bug
Dominant language
C++
Stars
8.4k
Forks
942
Avg merge
2d 7h
Merged PRs (30d)
105

Description

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:
Image

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

Image

NuGet package version

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

Windows version

Windows 11 (24H2): Build 26100

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the attached test.zip reproduction and the LinedFlowLayout usage shown with ItemsView; verify whether the same behavior occurs through ItemsRepeater. Trace the layout behavior when the first row exceeds available width, and consider the work complete when items retain their desired width and wrap to a new line without trimming.

Written by the indexing model from the issue text.

Assessment

Tech stack
cpp
Domain
desktop
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.