Xamarin.Forms:自定义列表视图单元格的数据绑定

时间:2015-02-25 13:20:11

标签: c# ios xamarin.ios xamarin.forms

创建我的第一个根页:

public class App : Application
{
    public App ()
    {
        MainPage = new NavigationPage (new ListExample ());
    }
}

这是我的员工对象:

public class Employee
{
    public string ImageUri { get; set; }
    public string DisplayName { get; set; }
    public string Twitter { get; set; }

    public Employee (string imageUri, string displayName, string twitter)
    {
        this.ImageUri = imageUri;
        this.DisplayName = displayName;
        this.Twitter = twitter;
    }
}

这是我为UITableView设置项目的方式:

public class ListExample : ContentPage
{
    public ListExample ()
    {
        var listView = new ListView
        {
            RowHeight = 40
        };
        List<Employee> myListOfEmployeeObjects = new List<Employee> {
            new Employee("", "Max Mustermann", "@fake1"),
            new Employee("", "Eva Mustermann", "@fake2")
        };
        listView.ItemsSource = myListOfEmployeeObjects;
        listView.ItemTemplate = new DataTemplate(typeof(EmployeeCell));
    }
}

这是我的自定义表格视图单元格:

public class EmployeeCell : ViewCell
{
    public EmployeeCell()
    {
        var image = new Image
        {
            HorizontalOptions = LayoutOptions.Start
        };
        image.SetBinding(Image.SourceProperty, new Binding("ImageUri"));
        image.WidthRequest = image.HeightRequest = 40;

        var nameLayout = CreateNameLayout();

        var viewLayout = new StackLayout()
        {
            Orientation = StackOrientation.Horizontal,
            Children = { image, nameLayout }
        };
        View = viewLayout;
    }

    static StackLayout CreateNameLayout()
    {

        var nameLabel = new Label
        {
            HorizontalOptions= LayoutOptions.FillAndExpand
        };
        nameLabel.SetBinding(Label.TextProperty, "DisplayName");

        var twitterLabel = new Label
        {
            HorizontalOptions = LayoutOptions.FillAndExpand
        };
        twitterLabel.SetBinding(Label.TextProperty, "Twitter");

        var nameLayout = new StackLayout()
        {
            HorizontalOptions = LayoutOptions.StartAndExpand,
            Orientation = StackOrientation.Vertical,
            Children = { nameLabel, twitterLabel }
        };
        return nameLayout;
    }
}

如果我理解正确,则必须在自定义表格视图单元格中设置绑定。系统采用我的对象的属性和属性的名称以及绑定的名称必须匹配。

使用上面的代码会导致空视图。

here you can see the empty view I'm talking about

我做错了什么?

1 个答案:

答案 0 :(得分:2)

我忘了设置Content。使用

Content = listView;

或更详细:

Content = new StackLayout
{
    VerticalOptions = LayoutOptions.FillAndExpand,
    Children = { listView }
};