Xamarin.Forms: Data Binding of custom listview cell

Question

Creating my first root page:

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

This is my Employee object:

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

This is how I set the items for my 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));
    }
}

And here is my custom table view cell:

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

If I understand it correctly, one has to set the binding in the custom table view cell. The system takes the properties of my object and the name of the property and the name of the binding has to match.

Using the above code leads to an empty view.

What I'm doing wrong?

Answer 1

I forgot to set the Content . Either use

Content = listView;

or in more detail:

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