How to add a separator space between rows on custom Xamarin.Forms ViewCell?

Question

In this question on Xamarin Forums https://forums.xamarin.com/discussion/20517/curved-corners-in-tableview-cells Craig Dunn teaches how to create a cell with frame.

I want to Add a space between each cell.

At present the cells seems glued, and the ViewCell doesn`t have a space property.

Thanks!

Please add the relevant code right into the question so people can know exactly what the problem is. Thanks! — gitsitgo

Pete Pete · Accepted Answer · 2015-06-14T08:37:28

You just have to customize the layout of the MenuCell further to achieve this.

Shown below is a version that uses a further Xamarin.Forms.Frame to create a spacing between each item with a couple other modifications:-

XAML Page:-

<ListView x:Name="lstItems" />

XAML Code-Behind:-

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

ViewCell class:-

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

Will result in the following:-

ListView with spacing between each item.

How to add a separator space between rows on custom Xamarin.Forms ViewCell?

2 Answers