How to separate rows in a collectionview, using frame to show the items

Good morning colleagues, I have a view that shows a list of tables, I am using collectionview as a data container, and to give it a better appearance I am using frame in each of the articles, so far it shows them to me, but I need to achieve a separation between each of the frames of the rows. I show you an image for a better understanding.

The code of my xaml view is the following

<StackLayout Orientation="Horizontal" BackgroundColor="Transparent" VerticalOptions="Start" HorizontalOptions="Center" Margin="5,5,2,5" Spacing="5" Padding="5">

            <Grid x:Name="contenedorprincipal" RowSpacing="10" ColumnSpacing="10"  >
                <Grid.RowDefinitions>
                    <RowDefinition Height="35" />
                    <RowDefinition Height="Auto" />
                    

                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="42"/>
                    <ColumnDefinition Width="Auto"/>
                
                </Grid.ColumnDefinitions>

                <Button Text="&#10094;" 
                               FontSize="20"
                               FontAttributes="Bold"
                               Grid.Row="0"
                               Grid.Column="0"
                               TextColor="White"
                               BackgroundColor="Transparent"
                               HorizontalOptions="StartAndExpand" 
                               Padding="0,5,0,0"
                               Margin="0,5,0,0"
                               Command="{Binding VolverCommand}"
                       
                        />

                <Label Text="Mesas Abiertas" 
                               FontSize="20"
                               FontAttributes="Bold"
                               Grid.Row="0"
                               Grid.Column="1"
                               Padding="0,5,0,0"
                               Margin="0,5,0,0"                       
                               HorizontalOptions="Center"
                               VerticalOptions="Center"
                               HorizontalTextAlignment="Center"
                               TextColor="WhiteSmoke" 
                               
                       />




                <Frame Grid.Row="1"
                       Grid.Column="0" 
                       Grid.ColumnSpan="3"
                       BorderColor="Black"                                                               
                       CornerRadius="5" 
                       x:Name="frmresultados"
                       Padding="5"
                       
                       
                       >

                    <control:AutoScrollCollectionView x:Name="lstpedidos" 
                                      ItemsSource="{Binding Lista_Mesas}"
                                      HorizontalScrollBarVisibility="Always"
                                      VerticalScrollBarVisibility="Always" 
                                                 
                                      
                                      >

                        <control:AutoScrollCollectionView.ItemTemplate>
                            <DataTemplate>
                                <Frame BackgroundColor="#1c1c1c" CornerRadius="13" Padding="5" x:Name="frmesas" Margin="0,0,0,3" >
                                    
                                    <Grid RowDefinitions="35" ColumnDefinitions="50,50,Auto,*"
                                               ColumnSpacing="5"
                                               RowSpacing="5"
                                               Padding="0"
                                               Margin="2,0,0,5"
                                              
                                             
                                          >

                                        <Label
                                                x:Name="lblmesa"
                                                           Text="{Binding Mesa,StringFormat='No: {0}'}"
                                                           TextColor="White"                                                           
                                                           FontSize="20" 
                                                           FontAttributes="Bold"                                                           
                                                           Grid.Row="0"
                                                           Grid.Column="0"
                                                           Margin="2"
                                                           VerticalOptions="Start"                                                          
                                                           
                                                           
                                                            >


                                        </Label>

                                        <control:ButtonArticulos
                                                           x:Name="btnestado"                                                              
                                                           BackgroundColor="{Binding Esta_abierta,Converter={StaticResource colorConvertor}}"                                                          
                                                           Grid.Row="0"
                                                           Grid.Column="1"
                                                           HorizontalOptions="Center"
                                                           CornerRadius="20"
                                                           WidthRequest="40"
                                                           HeightRequest="40"                                            
                                                                                                                  
                                                      
                                                           >
                                        </control:ButtonArticulos>
                                        
                                        <Label             Text="{Binding Total,StringFormat='Total: {0:F2}'}"
                                                           FontAttributes="Bold"
                                                           Grid.Row="0"
                                                           Grid.Column="2"
                                                           HorizontalOptions="Start"
                                                           HorizontalTextAlignment="Center"
                                                           TextColor="Yellow"
                                                           FontSize="20"
                                                >


                                        </Label>

                                        
                                    </Grid>
                                </Frame>
                                





                               


                            </DataTemplate>
                        </control:AutoScrollCollectionView.ItemTemplate>

                    </control:AutoScrollCollectionView>
                </Frame>




               



            </Grid>

        </StackLayout>

If you could help me, I would appreciate it, thank you very much.

that is the code of AutoScrollCollectionView

using System;
using System.Collections.Generic;
using System.Collections.Specialized;
using System.Runtime.CompilerServices;
using System.Text;
using Xamarin.Forms;

namespace SOLTACTPV.ControlesPersonalizados
{
   public  class AutoScrollCollectionView : CollectionView
    {
        private INotifyCollectionChanged _previousObservableCollection;

        protected override void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            base.OnPropertyChanged(propertyName);

            if (propertyName == nameof(ItemsSource))
            {
                if (_previousObservableCollection != null)
                {
                    _previousObservableCollection.CollectionChanged
                        -= OnItemsSourceCollectionChanged;
                    _previousObservableCollection = null;
                }

                if (ItemsSource is INotifyCollectionChanged
                        newObservableCollection)
                {
                    _previousObservableCollection = newObservableCollection;
                    newObservableCollection.CollectionChanged
                        += OnItemsSourceCollectionChanged;
                }
            }
        }

        private void OnItemsSourceCollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
        {
            if (e.Action == NotifyCollectionChangedAction.Add || e.Action == NotifyCollectionChangedAction.Replace)
            {
                ScrollTo(e.NewStartingIndex);
               
            }
            
        }


       




    }
}

Yes, if I tested on Xamarin form, it is just the case as you said.

You can adjust the item spacing to separate the rows with the ItemSpacing property or by setting an ItemTemplate which includes padding space.

Solution 1:

You can add the following code for your AutoScrollCollectionView:

               <CollectionView.ItemsLayout>
                   <LinearItemsLayout  Orientation="Vertical" ItemSpacing="8"/>
               </CollectionView.ItemsLayout>

Solution 2:

You can add a ContentView and set Padding for the ContentView.

                  <local:AutoScrollCollectionView.ItemTemplate>
                   <DataTemplate >
                     <ContentView Padding="2" >
                       <Frame BackgroundColor="#1c1c1c" CornerRadius="13" Padding="5" x:Name="frmesas"  >

                            <Grid  >
                                 <!-- For brevity, omit the other code   -->

                           </Grid>
                       </Frame>
                       </ContentView>

                   </DataTemplate>
               </local:AutoScrollCollectionView.ItemTemplate>