[WinUI 2.6] UniformGridLayout has very large row height when its ItemTemplate is aspect ratio constrained

Describe the bug Each row in UniformGridLayout becomes very tall when its ItemTemplate contains an element that is constrained to an aspect ratio (i.e. the element gets taller as it gets wider), such as an Image. The height of each row is equal to the height of the ItemTemplate element if it was stretched across the width of the page.

Steps to reproduce the bug Steps to reproduce the behavior:

1. Create a blank UWP app and reference WinUI 2.6 prerelease
2. Add a ScrollViewer and ItemsRepeater to MainPage.xaml
3. In code-behind, set ItemsRepeater.ItemsSource = new bool[100] (the data source doesn’t matter, we just need the items repeater to show some items)
4. Set ItemsRepeater.Layout to a UniformGridLayout
5. Set UniformGridLayout.MinItemWidth so that there are multiple columns in the layout
6. Set ItemsRepeater.Layout to an Image control that loads any image
7. Observe that the height of each row is much taller than the height of the images

Repro app

Expected behavior The height of each row should be equivalent to the height of the elements that make up each row.

Screenshots

This screenshot demonstrates the issue. The second row of images should be touching the first row, but instead the rows are very far apart.

This screenshot includes a copy of the image in the background, to demonstrate that the height of each row is equivalent to the height of the image if it was stretched across the width of the window.

Version Info

NuGet package version: [Microsoft.UI.Xaml.2.6.0-prerelease.2104300001]

Windows app type:

UWP	Win32
Yes

Windows 10 version	Saw the problem?
Insider Build (xxxxx)
May 2021 Update (19043)	Yes
October 2020 Update (19042)
May 2020 Update (19041)
November 2019 Update (18363)
May 2019 Update (18362)
October 2018 Update (17763)
April 2018 Update (17134)
Fall Creators Update (16299)
Creators Update (15063)

Device form factor	Saw the problem?
Desktop	Yes
Xbox
Surface Hub
IoT

Additional context It’s my understanding that UniformGridLayout performs an initial layout pass on the first element to determine the height of each row. Perhaps that initial layout is performed using the entire width of the ItemsRepeater, when instead it should be performed using the calculated column width?

[Ryken100]

@chingucoding Thanks for the suggestion! Unfortunately it won’t work for our situation since our containing control doesn’t have any context on what ItemTemplate will be used in its ItemsRepeater at any given moment. We don’t mind waiting 😃

[chingucoding]

Yup, UniformGridLayout realizes the first item and uses it to measure the rest. Guess that UniFormGridLayout doesn’t use the Min/Max Item Height/Width properties correctly. The fix is probably to set the Min/Max Width/Height on the realized item and see what it reports as heigh and width then.