如何在集合视图中分隔行，使用框架来显示项目

Question

早上好，同事们，我有一个显示表格列表的视图，我使用 CollectionView 作为数据容器，为了使其外观更好，我在每篇文章中使用框架，到目前为止它向我展示了它们，但我需要在行的每个框架之间实现分离。 为了更好地理解，我向您展示了一张图片。

我的xaml视图的代码如下

<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>

如果您能帮助我，我将不胜感激，非常感谢。

这是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);
               
            }
            
        }


       




    }
}

Answer 1

是的，如果我在Xamarin表单上测试过，就是你说的情况。

还有一个关于此的已知问题，您可以在这里查看：[Android, iOS] CollectionView 的项间距。

因此，您可以为您的

AutoScrollCollectionView

添加以下代码：

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