iOS ImageCell中的行分隔符并非始终显示

时间:2018-12-11 14:51:03

标签: xamarin.forms

我有一个绑定到iOS资产的ImageCell。渲染时,行分隔符并不总是显示。

似乎是绘图问题,因为如果我上下滚动某些行,将重绘分隔线,如屏幕截图所示。

有什么想法吗?

ListView with ImageCell

我已经这样编写了UI:

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"),
              .
              .
           };
        }
    }

1 个答案:

答案 0 :(得分:2)

我认为这是使用默认视单元格模板(例如图像单元格等)时的行为。我建议您进行自定义实现,例如对项目模板使用网格。我们对它有更多的控制权,并且可以轻松地修改为任何所需的设计。我已经修改了您的代码并粘贴到下面。检查它是否对您有用...

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

下面是它的屏幕截图。

enter image description here