ListView Databinding with custom views

Question

I'm trying to get a custom list of custom views (I eventually will add controls to each view) displayed using databinding in a xamarin project. However when I run my project, nothing shows up on the list. I'm kind of new to the databinding stuff so I'm a little confused. I've searched and tried some other solutions but haven't been able to figure out my specific issue. Any help would be appreciated. Here's my code:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XamarinTuts.XMainPage">

  <ContentPage.Content>
    <StackLayout>
      <Label Text="Tasks:" HorizontalTextAlignment="Start" VerticalTextAlignment="Start" x:Name="tasksLabel"></Label>
      <ListView ItemsSource="{Binding taskItems}">
        <ListView.ItemTemplate>
          <DataTemplate>
            <Frame BackgroundColor="Black" Padding="5">
              <Grid>
                <StackLayout Name="TextStack" Orientation="Vertical" Grid.Column="0">
                  <Label Text="{Binding Name}"></Label>
                  <Label Text="{Binding Description}"></Label>
                </StackLayout>
                <StackLayout Name="ButtonStack" Orientation="Horizontal" HorizontalOptions="End" Grid.Column="1">
                  <Button Name="Edit" Text="Edit" Width="50" Height="50"></Button>
                </StackLayout>
              </Grid>
            </Frame>
          </DataTemplate>
        </ListView.ItemTemplate>
      </ListView>

    </StackLayout>

  </ContentPage.Content>  

</ContentPage>

That's my XAML. Here's my XMainPage.cs:

public partial class XMainPage : ContentPage
{


    TestViewModel vm;

    public XMainPage()
    {

        InitializeComponent();

        vm = new TestViewModel();

        TaskListItem testItem = new TaskListItem(this, "Go shopping", "Drive to meijer and get the following: Milk, Eggs, Booze");
        TaskListItem testItem2 = new TaskListItem(this, "Play Overwatch", "Pwn some n00bs");
        vm.taskItems.Add(testItem);
        vm.taskItems.Add(testItem2);


        BindingContext = vm;
    }

}

Followed by my TestViewModel.cs:

public class TestViewModel : INotifyPropertyChanged
{

    ObservableCollection<TaskListItem> mtaskItems;

    public TestViewModel()
    {
        mtaskItems = new ObservableCollection<TaskListItem>();
    }


    public ObservableCollection<TaskListItem> taskItems
    {
        get
        {
            return mtaskItems;
        }
        set
        {
            mtaskItems = value;
        }
    }
    public event PropertyChangedEventHandler PropertyChanged;

    void OnPropertyChanged(string name = null)
    {

        var changed = PropertyChanged;

        if (changed == null)
            return;

        changed.Invoke(this, new PropertyChangedEventArgs(name));

    }
}

Followed by my TaskListItem.cs:

public class TaskListItem : ViewCell
{

    public Task newTask;

    String mName;
    String mDescription;

    public String Name
    {
        get
        {
            return mName;
        }
    }

    public String Description
    {
        get
        {
            return mDescription;
        }
    }


    public TaskListItem(ContentPage taskListItemParent, String TaskName, String TaskDescription)
    {
        //newTask = new Task(TaskName, TaskDescription);

        mName = TaskName;
        mDescription = TaskDescription;

    }
}

Esteban Verbel Esteban Verbel · Accepted Answer · 2016-11-26T04:59:34

You haven't set the BindingContext property on on the view. You should Create a ViewModel and have the Observable Collection as a public property.

    TestViewModel vm;

    public XMainPage()
    {
        InitializeComponent();

        vm = new TestViewModel();

        BindingContext = vm;
    }

When using Xamarin.Forms it is recommended to follow the MVVM Pattern. Here is a simple sample project written that your help you understand better data binding and how all the pieces connect together. Also, in this chapter of the Xamarin.Forms book DataBinding is explained very well

ListView Databinding with custom views

1 Answers