CollectionView ItemSpacing cannot be set below an arbitrary value

[IndianaGary]

Description

I am using a CollectionView to present a list of Text items (Labels) in a "green-bar" or "gray-bar" list. Unfortunately, the items cannot be set to abut one another; i.e. the items are always separated by a minimum size gap. Research has shown that this gap size is a function of a hard coded minimum size which was inherited from ListView and, likely from Xamarin Forms.

It is not possible to implement my application with this limitation in place. My application is for Windows Desktop application but the affliction is likely multi-platform since it is found in shared code.

My biggest objection is that setting ItemSpacing to zero does not reduce the gap between items to 0, but to some internally predetermined, non-overridable, minimum. ItemSpacing=0 should mean just that; no gap between items.

A sample application is attached

CollectionViewItemSpacingBug.zip

Steps to Reproduce

1. Unzip the sample application on a Windows Desktop and open in VS 2022 17.1 Preview 5.0
2. Build and launch the application.
3. Observe the gap between the CollectionView rows.

Version with bug

Preview 12 (current)

Last version that worked well

Unknown/Other

Affected platforms

Windows, I was not able test on other platforms

Affected platform versions

Windows SDK 10.0.18362 and later

Did you find any workaround?

No

Relevant log output

I was able to locate the likely culprit. Note that the following is the CollectionView inheritance
hierarchy (code is from the Preview 12 branch):

CollectionView -> GroupableItemsView -> SelectableItemsView -> StructuredItemsView -> ItemsView

ItemsView implements OnMeasure as follows:

protected override SizeRequest OnMeasure(double widthConstraint, double heightConstraint)
{
	// TODO hartez 2018-05-22 05:04 PM This 40,40 is what LV1 does; can we come up with something less arbitrary?
	var minimumSize = new Size(40, 40);

	var scaled = DeviceDisplay.MainDisplayInfo.GetScaledScreenSize();
	var maxWidth = Math.Min(scaled.Width, widthConstraint);
	var maxHeight = Math.Min(scaled.Height, heightConstraint);

	Size request = new Size(maxWidth, maxHeight);

	return new SizeRequest(request, minimumSize);
}

Note hartez comment from 2018 that the minimum size is arbitrarily set to 40, 40, meaning that the item can never be smaller.

[IndianaGary]

I did some additional testing using the sample app and confirmed that the fixed minimum row height is indeed the culprit.

1. Setting HeightRequest on the label to 40 and above increased the height of each item as HeightRequest increased.
2. Reducing HeightRequest below 40 resulted in the item assuming the specified height, with the difference between that height and 40 remaining as a gap between items. The item is never less than 40 units high.

I am attaching a slightly updated version of the sample code.

CollectionViewItemSpacingBug.zip

[IndianaGary]

I was able to test the issue on the Android emulator today and can confirm that the issue does not affect Android. I was able to set the item height to 20 with the following result:

I am unable to test Apple devices...

[shimingsg]

Verified Repro with windows and the above project.

[hartez]

Note hartez comment from 2018 that the minimum size is arbitrarily set to 40, 40, meaning that the item can never be smaller.

That's the OnMeasure for ItemsView, not for individual items - the entire CollectionView can't be less than 40x40. It doesn't have anything to do with the height of individual rows.

Also, it's there to support legacy renderer shims; I don't believe it ever gets called if you're using a vanilla CollectionView with Maui.Controls.

Since you're only seeing this behavior on Windows, it's unlikely that the culprit is any of the cross-platform code. I don't have time to dig into it during this iteration, but my best guess is that you're seeing an issue with the underlying WinUI ListView's individual row height. Or that the ItemContentControl class which acts as a container for CollectionView items in Windows is measuring something incorrectly; you might look at the MeasureOverride in that class.

[boarder2]

By no means am I an expert in MAUI but it looks like this may be due to inferring styles from their default styles.

maui/src/Controls/src/Core/Handlers/Items/StructuredItemsViewHandler.Windows.cs

Line 206 in 3409e87

var style = new WStyle(typeof(ListViewItem));

IIRC, the default UWP ListViewItem style sets a MinHeight of 40. This would also explain the platform specific behavior.

Since there doesn't seem to be a way to set the ItemContainerStyle via MAUI, we're kind of stuck here. This is negatively impacting my project as well.

This behavior doesn't occur if you use a ListView control instead of a CollectionView and I didn't dig into why, but since CollectionView seems to be the preferred control going forward, it seems like something that should be addressed.

[hbraasch]

Can confirm it is working correctly under iOS.

I am also interested in getting this fixed for Windows. Thanks

[IndianaGary]

No, I do not do iOS. From: Heinrich Braasch ***@***.***> Sent: Sunday, August 28, 2022 9:28 PM To: dotnet/maui ***@***.***> Cc: Gary Lewis ***@***.***>; Author ***@***.***> Subject: Re: [dotnet/maui] CollectionView ItemSpacing cannot be set below an arbitrary value (Issue #4520) Can confirm it is working correctly under iOS. [image]<https://nam12.safelinks.protection.outlook.com/?url=https%3A%2F%2Fuser-images.githubusercontent.com%2F7484186%2F187122869-6b549761-1162-47f0-afe7-cc3426791690.png&data=05%7C01%7C%7C9367e5874b4246ad062908da8976d343%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637973440685587207%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=hPX0KquYmTCMQSeFUplqfc2KZ73UCXLreIMq6H3PPjA%3D&reserved=0> I am also interested in getting this fixed for Windows. Thanks - Reply to this email directly, view it on GitHub<https://nam12.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fdotnet%2Fmaui%2Fissues%2F4520%23issuecomment-1229754393&data=05%7C01%7C%7C9367e5874b4246ad062908da8976d343%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637973440685587207%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=fbvbNU7y%2FkSbrHUZQHEoJ%2FCTJsOyclP69eE3mUXagWo%3D&reserved=0>, or unsubscribe<https://nam12.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FADFAH7EHJPVRVZ5BHUPCP6TV3Q34FANCNFSM5NTG2SZA&data=05%7C01%7C%7C9367e5874b4246ad062908da8976d343%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637973440685587207%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=qCCsQM9OFDT5GQJCcAJq8VQcdEVyDsdm2qO4ekiiOsY%3D&reserved=0>. You are receiving this because you authored the thread.Message ID: ***@***.******@***.***>>

[ghost]

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.