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.

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

What I'm doing wrong?

Cannot find anything wrong and the ListView runs well here. Probably your ListView is placed wrongly? Could you post also the Page layout here? — Alex Lau
@AlexLau: Thanks for your response. I edited my question and included some more code. The table view worked with the default layout. Now I switched to the custom cell and something goes wrong. — testing

testing testing · Accepted Answer · 2015-02-25T14:06:56

I forgot to set the Content. Either use

Content = listView;

or in more detail:

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

Xamarin.Forms: Data Binding of custom listview cell

1 Answers