[Bug] [UWP] GridItemsLayout.HorizontalItemSpacing adds spacing to edges

[Eli-Black-Work]

Description

On UWP, when setting GridItemsLayout.HorizontalItemSpacing or GridItemsLayout.VerticalItemSpacing, spacing is applied not only between elements in the grid but also around the edges of the grid.

Steps to Reproduce

Given this XAML:

<StackLayout>
	<SearchBar ... />

	<CollectionView ItemsSource="...">
		<CollectionView.ItemsLayout>
			<GridItemsLayout Orientation="Vertical" Span="4" HorizontalItemSpacing="5" VerticalItemSpacing="5" />
		</CollectionView.ItemsLayout>
		<CollectionView.ItemTemplate>
			<DataTemplate x:DataType="viewModels:ExistingPanelViewModel">
				<Frame BorderColor="Gray" Padding="8" CornerRadius="0">...</Frame>
			</DataTemplate>
		</CollectionView.ItemTemplate>
	</CollectionView>
</StackLayout>

The result is that not only does the 5pt of spacing get applied between items, but it also gets applied around the edges of the CollectionView. This makes it so that the CollectionView appears offset from the search bar that's above it:

###Workaround

In my case, this spacing is undesired, but it's kind of annoying to get rid of :) One approach is to apply a negative margin to the entire CollectionView, but this means that the negative margin also affects CollectionView.EmptyView, CollectionView.Header, and CollectionView.Footer, so then we have to add margin to those elements to compensate:

<StackLayout>
	<SearchBar ... />

	<CollectionView ItemsSource="..." Margin="-5,0,-5,0">
		<CollectionView.ItemsLayout>
			<GridItemsLayout Orientation="Vertical" Span="4" HorizontalItemSpacing="5" VerticalItemSpacing="5" />
		</CollectionView.ItemsLayout>
		<CollectionView.ItemTemplate>
			<DataTemplate x:DataType="viewModels:ExistingPanelViewModel">
				<Frame BorderColor="Gray" Padding="8" CornerRadius="0">...</Frame>
			</DataTemplate>
		</CollectionView.ItemTemplate>
	</CollectionView>
	<CollectionView.EmptyView>
		<StackLayout Padding="5,0,5,0">
			<Label Text="Empty view" />
		</StackLayout>
	</CollectionView.EmptyView>
	<CollectionView.Header>
		<StackLayout Padding="5,0,5,0">
			<Label Text="Header view" />
		</StackLayout>
	</CollectionView.Header>
	<CollectionView.Footer>
		<StackLayout Padding="5,0,5,0">
			<Label Text="Footer view" />
		</StackLayout>
	</CollectionView.Footer>
</StackLayout>

Basic Information

• Version with issue: Xamarin.Forms 4.5
• IDE: VS 2019
• Environment: UWP (I haven't tested this on other platforms)

[Eli-Black-Work]

If backwards compatibility isn't an issue, then my suggestion for fixing this would be to have GridItemsLayout.HorizontalItemSpacing/GridItemsLayout.VerticalItemSpacing only apply spacing between elements in the grid and not apply spacing around the edges of the grid. Then, introduce a a Margin attribute for GridItemsLayout that takes care of applying margin around the edges of the grid.

[hartez]

ItemSpacing shouldn't be applied to the leading/trailing edges.

[Eli-Black-Work]

Okay, good to know, thanks. I was seeing this on UWP, so maybe it's specific to that platform. Let me update the bug's description :)

[YZahringer]

Related to #10547?