microsoft / microsoft-ui-xaml

Windows UI Library: the latest Windows 10 native controls and Fluent styles for your applications
MIT License
6.36k stars 678 forks source link

ItemsStackPanel with ListView does not layout items properly when horizontal scroll mode is enabled #9860

Open w-ahmad opened 3 months ago

w-ahmad commented 3 months ago

Describe the bug

When horizontal scroll mode is enabled in a ListView with ItemsStackPanel, it does not measure and arrange item content correctly. This issue seems to occur only when the child or a descendant is a TextBlock whose desired width exceeds its set width. Replacing the ItemsStackPanel with a StackPanel resolves the issue, but at the cost of losing virtualization.

Steps to reproduce the bug

Add the code below to a new app and you'll be able to see the issue.

<ListView ScrollViewer.HorizontalScrollMode="Auto"
          ScrollViewer.HorizontalScrollBarVisibility="Auto">
    <Button Width="40">Click Me</Button>
    <Button Width="40">Click Me</Button>
    <Button Width="40">Click Me</Button>
</ListView>

image

Or here the simple app to demonstrate this issue. https://github.com/w-ahmad/ListViewLayoutIssue. You can increase value in NumberBox until the issue is gone.

Expected behavior

The item's content should be measured and arranged properly, as they are when horizontal scroll mode is disabled. image

Screenshots

No response

NuGet package version

None

Windows version

No response

Additional context

No response

RBrid commented 3 months ago

Thanks for your report. We'll investigate.

Maybe using the VirtualizingStackPanel is an option for you in the meantime?

    <ListView>
        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <VirtualizingStackPanel/>
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>

        <Button Width="40">Click Me</Button>
        <Button Width="40">Click Me</Button>
     </ListView>
w-ahmad commented 3 months ago

Thank you for your response @RBrid.

The VirtualizingStackPanel is able resolve the issue I've described, but it's causing problems with the horizontal scrolling of the header in my custom control, WinUI.TableView. I haven't tested it with ListView yet, so the header issue might be specific to my control.

This issue is preventing me from releasing the next update for my control; hence, I'm considering a workaround for it by manually calculating the widths for cells (content). Although this workaround won't address the problem for nested contents, it could be a temporary solution until a fix is available. I would greatly appreciate it if your team could address this in the 1.6 release.

https://github.com/user-attachments/assets/17c01c88-0fcc-41a5-a990-32af047728bc

Header scrolling issue by using VirtualizingStackPanel

w-ahmad commented 2 months ago

@RBrid could it be fixed in a servicing release please?