[BUG] Margin and Padding don't work in CollectionView

[acaliaro]

Description

On iOS Margin and Padding don't work in CollectionView. In the attached example, I have 3 collection views.

• In the first, a grid with padding appears to maintain padding correctly.

• In the second, the grid with the margin does not maintain the margin: I would expect there to be white space around the grid but the blue color is continuous.

• In the third (with border), it seems that the padding is replaced by a margin.

I have seen that in the past some bugs relating to these problems have already been opened, apparently resolved, but apparently not correctly

Steps to Reproduce

Run the project
presso "popup problem!!!!" button
a page with 3 collections should appears

Link to public reproduction project repository

https://github.com/acaliaro/MauiCollectionViewPaddingProblems

Version with bug

8.0.60 SR6

Is this a regression from previous behavior?

Yes, this used to work in .NET MAUI, Yes, this used to work in Xamarin.Forms

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

iOS 17.3 iphone 12

Did you find any workaround?

I think this could help #17885 (comment)

Relevant log output

No response

[github-actions]

Hi I'm an AI powered bot that finds similar issues based off the issue title.

Please view the issues below to see if they solve your problem, and if the issue describes your problem please consider closing this one and thumbs upping the other issue to help us prioritize it. Thank you!

Open similar issues:

• Margin doesn't work inside CollectionView EmptyView (#8494), similarity score: 0.79
• [iOS] Label's width can't full fill Grid's * (GridUnitType.Star) space when Grid has a Horizontal padding (#16912), similarity score: 0.78

Closed similar issues:

• [iOS] Margin does not work on Border inside a CollectionView (#19365), similarity score: 0.84
• Border Margin on IOS Increases Padding (#14051), similarity score: 0.82
• Collection in StackLayout incorrect padding and margins (#6524), similarity score: 0.80

Note: You can give me feedback by thumbs upping or thumbs downing this comment.

[Zhanglirong-Winnie]

This issue has been verified using Visual Studio 17.11.0 Preview 2.1 (8.0.40 & 8.0.60 & 8.0.14). Can be reproduced on iOS platform.

[acaliaro]

@samhouts Hi. Any news about this?

[kiddailey]

Just to document my experience because this isn't limited to iOS. I have the same issue on Windows.

I have a Border view directly in a collection view DataTemplate and the Margin values have no affect at all on Windows. I'm trying to add a Border to each item in the CollectionView and add spacing in between them.

For example, the Margins on the Border in this example are completely ignored (although the Padding does work):

<CollectionView.ItemTemplate>
    <DataTemplate>
        <Border Margin="0,0,0,10" Padding="10,5"> ... </Border>
    </DataTemplate>
</CollectionView.ItemTemplate>

If I simply wrap the Border in a Grid (or any other type of container View) without changing anything else then the margins on the border suddenly work. For example:

<CollectionView.ItemTemplate>
    <DataTemplate>
        <Grid>
            <Border Margin="0,0,0,10" Padding="10,5"> ... </Border>
        </Grid>
    </DataTemplate>
</CollectionView.ItemTemplate>

It's worth noting that the obsolete Frame View also behaves this same way. Margins on Grids, Stacklayouts, etc work as expected.

[Domik234]

Hey,
we've always used wrapping to ContentView to make it work even in Xamarin.Forms.

Currently I am doing it too and it works as expected for MAUI.

Using the padding or margin directly on root view in item template had always some problems depending on used platform.

[acaliaro]

there are some news about this issue? Will be moved on a sprint?

[acaliaro]

Hi. Are there some news about this?

[RsZoli]

Well if you are so fast on closing issues about key problems, i would also like to know the current state about this, because its blocking us to deploy on other platforms than Android!

@samhouts Please?

[IliyanPopov]

i have encountered similar issue only on iOS when using collection view with observable collection and two way bindings.

My workaround is to use a grid and add a second row for example of 20 heigh and leave it blank in purpose:

			<CollectionView ItemsSource="{Binding Displays}"
				                SelectionMode="Single"
				                SelectedItem="{Binding Selection, Mode=TwoWay}"
				                HorizontalOptions="Fill" VerticalOptions="Fill">
					<CollectionView.ItemTemplate>
						<DataTemplate x:DataType="{x:Type viewModels:RedDisplayViewModel}">
							<Grid HorizontalOptions="Fill" VerticalOptions="Center" RowSpacing="10"
							      ColumnSpacing="8" HeightRequest="60">
								<Grid.RowDefinitions>
									<RowDefinition Height="*" />
									<RowDefinition Height="20" /> // Like so
								</Grid.RowDefinitions>
								<Grid.ColumnDefinitions>

[Domik234]

Hey @IliyanPopov,

I believe that wrapping into ContentView should be performance more efficient than Grid.

<!-- ContentView acts only as a wrapper. It allows to use margin and padding in it's Content property -> Do not set margin and padding here -->
<ContentView> 
<!-- Set margin and padding here -->
<.... /> 
</ContentView>

Note: <.... /> = Any view or layout

Example: I need to have grid in CollectionView with margin 8.
<ContentView>
    <Grid Margin="8" />
</ContentView>