Line Separator in iOS ImageCell not always showing - xamarin.forms

Question

I have an ImageCell which binds to an iOS Asset. When it renders, the line separator doesn't always show.
Seems to be a drawing issue because if I scroll up and down some of the rows get the separator line redrawn as can be seen in the screenshot.
Any ideas?
I've coded up my UI like this:
public class Contact{
public Contact(string name, string email) {
Name = name;
Email = email;
Initial = "Avatar";
}
public string Name { get; }
public string Email { get; }
public string Initial { get; }
}
public class ContactCell: ImageCell {
public ContactCell() {
this.SetBinding(TextProperty, "Name");
this.SetBinding(DetailProperty, "Email");
this.SetBinding(ImageSourceProperty, "Initial");
}
}
public class ContactListPage : ContentPage {
public ContactListPage() {
Title = "List";
Content = new ListView {
RowHeight = 60,
ItemTemplate = new DataTemplate(typeof(ContactCell)),
Margin = new Thickness(10, 0, 0, 0),
ItemsSource = new List<Contact> {
new Contact("Isa Tusa", "isa.tusa#me.com"),
.
.
};
}
}

Answer 1

I think that's the behavior when using the default viewcell templates like Image cell, etc. I would suggest you go for custom implementation like using grid for the item template. We have more control over it and can be easily modified to any required design. I've modified your code and pasted below. Check if it is useful for you...
public ContactListPage()
{
Title = "List";
Content = new ListView
{
RowHeight = 71,
SeparatorVisibility = SeparatorVisibility.None,
// ItemTemplate = new DataTemplate(typeof(ContactCell)),
ItemTemplate = new DataTemplate(() =>
{
return new ViewCell { View = ContactCellGrid() };
}),
ItemsSource = new List<Contact> {
new Contact("Isa Tusa", "isa.tusa#me.com"),
new Contact("Racquel Ricciardi", "racquel.ricciardi#me.com"),
new Contact("Teresita Mccubbin", "teresita.mccubbin#me.com"),
new Contact("Rhoda Hassinger", "rhoda.hassinger#me.com"),
new Contact("Carson Cupps", "carson.cupps#me.com"),
new Contact("Devora Nantz", "devora.nantz#me.com"),
new Contact("Tyisha Primus", "tyisha.primus#me.com"),
new Contact("Muriel Lewellyn", "muriel.lewellyn#me.com"),
new Contact("Hunter Giraud", "hunter.giraud#me.com"),
}
};
}
private Grid ContactCellGrid()
{
var grid = new Grid();
grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(5, GridUnitType.Absolute) });
grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(2, GridUnitType.Star) });
grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });
grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(5, GridUnitType.Absolute) });
grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Absolute) });
grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(5, GridUnitType.Absolute) });
grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Auto) });
grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(5, GridUnitType.Absolute) });
var nameLabel = new Label { FontAttributes = FontAttributes.Bold, VerticalTextAlignment = TextAlignment.Center };
var ageLabel = new Label { VerticalTextAlignment = TextAlignment.Start }; ;
var locationLabel = new Image { HorizontalOptions = LayoutOptions.Center };
var boxView = new BoxView { Color = Color.Gray, HeightRequest = 1 };
nameLabel.SetBinding(Label.TextProperty, "Name");
ageLabel.SetBinding(Label.TextProperty, "Email");
locationLabel.SetBinding(Image.SourceProperty, "Initial");
grid.Children.Add(nameLabel, 2, 1);
grid.Children.Add(ageLabel, 2, 2);
grid.Children.Add(locationLabel, 1, 1);
Grid.SetRowSpan(locationLabel, 2);
grid.Children.Add(boxView, 1, 4);
Grid.SetColumnSpan(boxView, 2);
return grid;
}
below is the screenshot of it..