xamarin 如何在collectionview中分隔行,使用frame显示项

to94eoyn  于 11个月前  发布在  其他
关注(0)|答案(1)|浏览(99)

早上好,同事们,我有一个显示表列表的视图,我使用collectionview作为数据容器,为了给予更好的外观,我在每篇文章中都使用了frame,到目前为止,它向我显示了它们,但我需要实现行的每个帧之间的分离。我给你看一个图像,以便更好地理解。

我的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);
               
            }
            
        }

       



    }
}

wgx48brx

wgx48brx1#

是的,如果我在Xamarin表上进行测试,正如你所说的那样。
您可以使用ItemSpacing属性或设定包含填补空间的ItemTemplate,来调整项目间距以分隔数据列。

解决方案1:

可以为AutoScrollCollectionView添加以下代码:

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

字符串

解决方案2:

您可以新增ContentView,并将Padding设定为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>

相关问题