如何在自定义Xamarin.Forms ViewCell中的行之间添加分隔空间？

Question

在Xamarin论坛上的这个问题中，Craig Dunn教授如何创建一个带框架的单元格。

我想在每个单元格之间添加空格。

目前，单元格似乎粘在一起，而ViewCell没有空格属性。

如何在自定义的Xamarin.Forms ViewCell中添加行之间的分隔空格？

- Ineltec Android

---

请将相关代码直接添加到问题中，这样人们就可以准确地了解问题所在。谢谢！ - gitsitgo

Answer 1

您只需进一步自定义MenuCell的布局即可实现此目的。

下面展示了一个版本，使用更多的Xamarin.Forms.Frame来创建每个项目之间的间隔，并进行其他修改：

XAML页面：

<ListView x:Name="lstItems" />

XAML代码后台：

lstItems.ItemTemplate = new DataTemplate(typeof(Classes.MenuCell));
lstItems.ItemsSource = new string[] { "Apples", "Bananas", "Pears", "Oranges" };

ViewCell类：

public class MenuCell : ViewCell
{
    public MenuCell()
    {
        Label objLabel = new Label
        {
            YAlign = TextAlignment.Center,
            TextColor = Color.Yellow,                
        };
        objLabel.SetBinding(Label.TextProperty, new Binding("."));


        StackLayout objLayout = new StackLayout
        {
            Padding = new Thickness(20, 0, 0, 0),
            Orientation = StackOrientation.Horizontal,
            HorizontalOptions = LayoutOptions.StartAndExpand,
            Children = { objLabel }
        };

        Frame objFrame_Inner = new Frame
        {
            Padding = new Thickness(15, 15, 15, 15),
            HeightRequest = 36,
            OutlineColor = Color.Accent,
            BackgroundColor = Color.Blue,
            Content = objLayout,                
        };

        Frame objFrame_Outer = new Frame
        {
            Padding = new Thickness(0, 0, 0, 10),
            Content = objFrame_Inner
        };

        View = objFrame_Outer;            
    }
}

将导致以下结果：-

- Pete

---

基本上，你需要填充一个包含元素。<ViewCell><StackLayout Padding="10"><MyNestedRowLayout /></StackLayout></ViewCell> - Tristan Warner-Smith

Answer 2

我的XAML示例：

 <ListView BackgroundColor="Gray" SeparatorVisibility="None" ItemsSource="{Binding Shipments}" x:Name="lstShipments" RowHeight="60">
    <ListView.ItemTemplate>
      <DataTemplate>
        <ViewCell>
          <StackLayout Padding="0,0,0,1">
            <Grid VerticalOptions="Fill" BackgroundColor="White">
              <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*"></ColumnDefinition>
                <ColumnDefinition Width="60"></ColumnDefinition>
              </Grid.ColumnDefinitions>
              <Label Grid.Column="0" Grid.Row="0" Text="{Binding DestinationCountry}" FontSize="16" />
              <Image Grid.Column="1" Grid.Row="0" Source="box32.png" />
              <Label Grid.Column="0" Grid.Row="1" Text="{Binding ExchangeOfficeDestinationTitle}" FontSize="16" />
              <Label Grid.Column="1" Grid.Row="1" Text="{Binding ShipmentNum}" FontSize="10" />

            </Grid>
          </StackLayout>
        </ViewCell>
      </DataTemplate>
    </ListView.ItemTemplate>
  </ListView>

- ahaliav fox

---

这是您的卡片列表视图的完整XAML代码吗？我正在尝试使用您的XAML代码，但与您的屏幕截图相比差别很大。如果您有时间，请看一下我的帖子：https://dev59.com/05bfa4cB1Zd3GeqP0evd - Phoneswapshop