FlowLayoutAlgorithm.Generate() should take into account the spacing after the current element

Currently, FlowLayoutAlgorithm considers that there is enough space for the current item if it fits:

https://github.com/microsoft/microsoft-ui-xaml/blob/1ced221991d3abd51875d24d69221afa878b6c5a/dev/Repeater/FlowLayoutAlgorithm.cpp#L324 However, it doesn’t add minItemSpacing for that current item.

This is a problem because UniformGridLayout computes the number of items per line with the assumption that they all include that spacing:

https://github.com/microsoft/microsoft-ui-xaml/blob/1ced221991d3abd51875d24d69221afa878b6c5a/dev/Repeater/UniformGridLayout.cpp#L142

So, we can have a weird visual bug in the following scenario.

Steps to reproduce the bug

Steps to reproduce the behavior:

1. Create an ItemsRepeater with: Layout = UniformGridLayout { Orientation = Orientation.Vertical, MinItemWidth = 100, MinItemHeight = 40, MinRowSpacing = 10, MinColumnSpacing = 10 };
2. Resize the window.Height to be exactly 490
3. Scroll forward until the first line is no longer visible.
4. You should obtain something similar to this:

In this example, the FlowLayoutAlgorithm allows the item “♯9” to be in the first line because:

double remainingSpace = Minor(availableSize) - (MinorStart(previousElementBounds) + MinorSize(previousElementBounds) + minItemSpacing + Minor(desiredSize));
// 0 = 490 - (450 + 40 + 10 + 40);

Which means that it generates 10 lines.

However, UniformGridLayout computes 9 lines:

const int itemsPerLine = Minor(availableSize) / GetMinorSizeWithSpacing(context));
// 9 = 490 / (40 + 10)

Expected behavior

If we change remainingSpace to substract an additional minItemSpacing, then there will only be 9 lines and the weird bug will not occur:

If we want to allow 10 lines in this scenario, UniformGridLayout needs to be update everywhere in how it computes the number of items per line…

Update: This bug seems to only occur when Orientation == Vertical. And the suggested fix should only be applied in that case (otherwise, it causes the bug to occur when Horizontal).

Version Info Master branch on GitHub (as of the creation of this issue).

[KPixel]

I’ve created issue #2834 for the new bug.

Regarding this issue, do you see value in where I thought the bug was? (The difference between how FlowLayoutAlgorithm computes the items in a line and how UniformGridLayout computes the number of items per line). It seemed to make sense that if the spacing is large enough, the discrepancy between these two algos could cause glitches… But maybe I’m missing something.

[KPixel]

@chingucoding I will try to put together a sample app later today.