search

AvaloniaUI / Avalonia

Develop Desktop, Embedded, Mobile and WebAssembly apps with C# and XAML. The most popular .NET UI client technology
https://avaloniaui.net
MIT License
25.51k stars 2.21k forks source link

WrapPanel autowrap sorting problem #16191

Open Coloryr opened 3 months ago

Coloryr commented 3 months ago

Describe the bug

When the window is not that small, sorting is normal, but there is a problem with sorting when the window is smallest. Not the smallest case: image The smallest case: image

To Reproduce

Adjust window width

Expected behavior

No response

Avalonia version

11.0.11

OS

Windows

Additional context

https://github.com/Coloryr/ColorMC/blob/5f18c13347aece1accd7bdac14ed8a43d4e7634b/src/ColorMC.Gui/UI/Controls/Setting/Tab4Control.axaml#L131-L157

Coloryr commented 3 months ago

image image

image image

Coloryr commented 3 months ago

Could anybody take a look at this question?

timunie commented 3 months ago

If it is a question -- Don't file it as a bug!!

Otherwise, please file a very minimal sample, not your full App.

Coloryr commented 3 months ago

If it is a question -- Don't file it as a bug!!

Otherwise, please file a very minimal sample, not your full App.

Ok... But I think this is a bug. image image image

AvaloniaApplication1.zip

stevemonaco commented 3 months ago

It seems like a bug to me, particularly when Margin is involved (either left or right side) and the item cannot fit on a single line. If Margin is removed, then the behavior appears correct. The next item is moved onto the same already overfilled line (when checking Bounds in DevTools). There's different behavior between Avalonia and WPF, too. Using a simplified repro in 11.1-rc2:

<WrapPanel>
  <TextBlock FontSize="24" Text="01234567890123456789" Margin="0,0,50,0" Background="Orange" />
  <TextBlock FontSize="24" Text="9876543210" />
</WrapPanel>

Avalonia behavior: wrappanel-margin-avalonia

WPF behavior: wrappanel-margin-wpf

timunie commented 3 months ago

I agree, no item should disappear. Thx for the repo

Coloryr commented 2 months ago

11.1.0 same

Coloryr commented 2 months ago

image image

maxkatz6 commented 2 months ago

Most likely a problem in this condition (and similar in Measure method): https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Controls/WrapPanel.cs#L206

stevemonaco commented 2 months ago

I will PR a fix for this.

This is a bit more complicated than I expected and needs to wait for guidance from the team on the correct approach: 1.changing the layout engine to be consistent with WPF or 2. making changes to WrapPanel which was ported from WPF to reflect Avalonia's layout behavior differences. See linked issue.