[Enhancement] CollectionView item spacing

[pauldipietro]

Summary

The current CollectionView spec (#3172) lacks the ability to specify the amount of space between items inside of it. There are, of course, cases where a user might wish for specific spacing, and could be especially useful with the Grid layout type that CollectionView provides.

API Changes

ListItemsLayout:

• public double ItemSpacing { get; set; }

GridItemsLayout:

• public double VerticalItemSpacing { get; set; }
• public double HorizontalItemSpacing { get; set; }

Intended Use Case

Provide adequate space between items inside of a CollectionView.

On iOS, these will map to GetMinimumLineSpacingForSection and GetMinimumInteritemSpacingForSection. On Android, these will add a subclass of RecyclerView.ItemDecoration which will provide the spacing between items.

[rasmuschristensen]

Where would the ItemSpacing be added? Currently I can not see a way of doing this?

[krdmllr]

Does this also affect the edge spacing? As i describe here #3172 (comment) we need something in addition to the CollectionView margin to have the same spacing between the columns in a grid layout and the sides of the grid.

For example, having a thickness of 5 on all items would result in a spacing of 10 between the items and a spacing of 5 on the outside of the grid. In this case, something like an EdgeOffset of 5 would be required to keep the same spacing in- and outside of the grid.

[hartez]

@pauldipietro I've added ItemSpacing to the CollectionView spec.

[hartez]

@krdmllr My first instinct is to say "yes, this will also effect edge spacing"; i.e., it would work like your example above with a Thickness of 5 -> 5 around the edges, 10 in between items. But I'll need to dig into the actual implementation on each platform to be totally sure; if we can reasonably limit this to inter-item spacing and leave the edges alone, then we might do that just so it's less mental effort for devs to figure out what effect margin/padding will have.

I suspect in either case we will need to address the issues you mentioned in your comment on #3172; I just don't know yet how we'd want to go about handling an EdgeOffset (or whatever we end up calling it).

[rmarinho]

So in #4996 I talked in adding also Padding so we can apply "insets" to the Viewport. Take note insets on CarouselView are also handle by the renderers so you can be able to select the 1st item if multiple items are on the screen and we need to push the 1st item to the center

[adrianknight89]

@hartez In my opinion, ItemSpacing should be a separate property that translates directly to InterimSpacing/LineSpacing (vertical/horizontal) whereas section insets should map to Padding.

ItemSpacing should not do the job of Padding. If there is a calculation issue (e.g. 10 between items, 5 on the edges), then the dev should also set Padding to correct this.

OR make Margin work for items so that there is no need for ItemSpacing and as I argued before, let people use Padding on the CollectionView to even out the extra space.

[davidortinau]

What's the status of this, still needs specification?

From a DX standpoint, I first tried to add a Margin to my Frame within the ItemTemplate, and it did nothing. I then went looking to any option to set Spacing on either the GridItemsLayout or CollectionView.

I then solved this by adding a ContentView and setting Padding to achieve the spacing. O @jassmith forgive me!

And finally I came here.

[krdmllr]

@davidortinau this still has the problem that the spacing between the items (10+10) is not the spacing the outer items have to the window (10). But i think your point is that your way the shadow of the frame still works?

edit: I would vote for an item spacing and padding property on the collection view since stack layout and grid both have a item spacing property aswell (RowSpacing/ColumnSpacing/Spacing)