dotnet
Add Padding to CollectionView
Description
Generally everything in the subject. I tried to override the default implementation of CollectionView handler. On Android this is not an issue, but with iOS cannot set UICollectionVIew.ContentInset = Padding, because ContentInset being reset by the internal implementation of CollectionView handler. So this is more architectural change of the handler and related things.
Public API Changes
var collView = new CollectionView();
collView.Padding = new Thickness(15);
Intended Use-Case
Padding for CollectionView can be very helpful, especially if you have GridLayout and you need space around edge views but the scrollbar stick to the edge. Doing it with margins of each item is not the proper way to achieve this, even more, in this case you need to calculate margins only for those edge views.
Related to https://github.com/dotnet/maui/issues/11782 - unfortunately this has been requested since 2019
you can emulate this with ScrollView + StackLayout using BindableLayout attached properties - but it does not perform anywhere near as well.
it's annoying becuase I have some large buttons that overlay my content area, which means that without the ability to "scroll past" the end by ~30dp there is some information on the last item that gets covered up.
The other solution is to wrap all my data items in some container that gets told about it's index in the collection to add the final padding in - which is pretty ugly.
Would be super useful. Sharpnado Collection View has this implemented (a CollectionPadding property), if you can live with fixed item sizes.
I've just finished the process of porting from sharpnado to maui's collection view (unfortunately sharpnado isn't being maintained and has a number of bugs on android that can't be worked around anymore) and this was by far the biggest pain point for the migration.
I had achieved the following design on tablets / large screens
Sharpnado Implementation
All I have to do is set a padding, and item spacing:
<sharpnado:CollectionView
CollectionLayout="Vertical"
CollectionPadding="18"
ItemSpacing="18"
ItemTemplate="{StaticResource LogbookCard}"
ItemsSource="{Binding Logbooks}" />
This way you get a nice grid, equally spaced and easy to change values.
Maui Implementation
To achieve the same result in maui we have to start applying various margins in our collection view, data template and the view that contains the collection view in order to have the correct spacing. You'll see what I've done below is VERY cumbersome and I think highlights how necessary adding a Padding property to collection view is!
For an even padding and spacing that matches the sharpnado:
- Set the item spacing to 1/2 the desired gap
<CollectionView.ItemsLayout>
<GridItemsLayout
HorizontalItemSpacing="9"
Orientation="Vertical"
Span="2"
VerticalItemSpacing="9" />
</CollectionView.ItemsLayout>
- Add a margin to your outer most visible element in your data template, set to 1/4 the desired gap
In this case specifically the
Borderis the visible element, I have a grid that is acting as the parent so I can optionally display a badge style view over my data template
<DataTemplate x:Key="LogbookCard">
<Grid>
<Border Margin="4.5"/>
</Grid>
</DataTemplate>
-
Wrap your collection view inside a
RefreshViewand set to Padding to 3/4 the desired margin, but NOT THE TOP
<RefreshView Padding="13.5,0,13.5,13.5">
<CollectionView/>
</RefreshView>
- Inside your collection view add a header set to 3/4 the desired margin
The reason for doing this instead of using the padding is that by adding an invisible header to provide an effective margin, the top of the content is not cut off by the padding when scrolling up items
| Padding All Around | Padding L,R,B + Fake Header |
|---|---|
<CollectionView.Header>
<ContentView HeightRequest="13.5" Opacity="0" />
</CollectionView.Header>
