早上好,同事们,我有一个显示表列表的视图,我使用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="❮"
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);
}
}
}
}
型
1条答案
按热度按时间wgx48brx1#
是的,如果我在Xamarin表上进行测试,正如你所说的那样。
您可以使用
ItemSpacing
属性或设定包含填补空间的ItemTemplate
,来调整项目间距以分隔数据列。解决方案1:
可以为
AutoScrollCollectionView
添加以下代码:字符串
解决方案2:
您可以新增
ContentView
,并将Padding
设定为ContentView
。型