Xamarin CollectionView : How to remove unwanted space between items

Question

TLDR : I need to display a list of labels using CollectionView. But CollectionView adds unwanted vertical space between the labels, where Stacklayout works as expected (no spacing)

Expected result is like this :

(This has been obtained using a StackLayout instead of CollectionView, just to show the result I want; but I want the same result using a CollectionView)
Note : To make example understandable, Labels have a red background, while container has a Cyan background.

But using CollectionView, there are empty spaces between Labels. I'm trying to remove this space, and I could not find any solution.

Here is the result, when using this code :

<CollectionView BackgroundColor="Cyan" ItemsSource="{Binding .}">
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical" />
</CollectionView.ItemsLayout>

        <CollectionView.ItemTemplate>  
            <DataTemplate>  
                <Label Text="{Binding .}" BackgroundColor="Red" ></Label>  
            </DataTemplate>  
        </CollectionView.ItemTemplate>  
    </CollectionView>  

There are 2 unwanted spaces over and under first labels;
Another unwanted anomaly is that Label height is too big using the CollectionView (while when using same label in a Stacklayout it is thinner like in first screenshot)
When adding VerticalItemSpacing="0" in GridItemLayout, I get exactly the same result.

Now, if I use a GridItemsLayout like this
<GridItemsLayout Orientation="Vertical" VerticalItemSpacing="10" />
I get this
]3
This time, label heights are OK, but there is a space between all labels.

Using CollectionView, do you have any idea how to get rid of these unwanted item spacing, while keeping the right label height?
Thanks

Answer 1

Have you tried with ItemSpacing?

layout

collectionview-item-spacing.html

Answer 2

Hello,

I used the official sample CollectionViewDemos for testing, and implemented the collectionView without space.

I modified the VerticalListSpacingPage.xaml in folder Views/Spacing/, here is the code.

   <CollectionView x:Name="collectionView"  
                           ItemsSource="{Binding Monkeys}"  
                           BackgroundColor="Cyan">  
       <CollectionView.ItemTemplate>  
           <DataTemplate>  
               <Grid>  
                   <Grid.RowDefinitions>  
                       <RowDefinition Height="Auto" />  
                   </Grid.RowDefinitions>  
                   <Grid.ColumnDefinitions>  
                       <ColumnDefinition Width="Auto" />  
                   </Grid.ColumnDefinitions>  
                   <Label Grid.Column="1"   
                                  Text="{Binding Name}"  
                                  BackgroundColor="Red"  
                                  FontAttributes="Bold" />  
               </Grid>  
           </DataTemplate>  
       </CollectionView.ItemTemplate>  
   </CollectionView>  

Best Regards,

Alec Liu.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.