Binding ListView in MainView

A to-do list is not much use without a list of items. Let's extend MainViewModel with a list of items:

1. Open ViewModels/MainViewModel.cs.
2. Add using statements for System.Collections.ObjectModel and System.Linq.
3. Add a property for the to-do list items:

public ObservableCollection<TodoItemViewModel> Items { get; set; }

ObservableCollection is like an ordinary collection, but it has a useful superpower. It can notify listeners about changes in the list, such as when items are added or deleted. The ListView control listens to changes in the list and updates itself automatically based on these. It's important, however, to be aware that a change to an item in the list will not trigger an update. Changing the title of an item will not cause the list to re-render. Let's move on to implementing the rest of MainViewModel.

We now need some data:

1. Open ViewModels/MainViewModel.cs.
2. Replace (or complete) the LoadData method and create the CreateTodoItemViewModel and ItemStatusChanged methods.
3. Resolve the reference to DoToo.Models by adding a using statement:

private async Task LoadData()
{
    var items = await repository.GetItems();
    var itemViewModels = items.Select(i =>  
    CreateTodoItemViewModel(i));
    Items = new ObservableCollection<TodoItemViewModel>  
    (itemViewModels); 
}

private TodoItemViewModel CreateTodoItemViewModel(TodoItem item)
{
    var itemViewModel = new TodoItemViewModel(item);
    itemViewModel.ItemStatusChanged += ItemStatusChanged;
    return itemViewModel;
}

private void ItemStatusChanged(object sender, EventArgs e)
{
}

The LoadData method calls the repository to fetch all items. We then wrap each to-do list item in TodoItemViewModel. This contains more information that is specific to the view that we don't want to add to the TodoItem class. It is good practice to wrap plain objects in ViewModel; this makes it simpler to add actions or extra properties to it. ItemStatusChanged is a stub that is called when we change the status of the to-do list item from active to completed and vice versa.

We also need to hook up some events from the repository to know when data changes:

1. Open ViewModels/MainViewModel.cs.
2. Add the following code in bold:

public MainViewModel(TodoItemRepository repository)
{
    repository.OnItemAdded += (sender, item) => 
                              
       Items.Add(CreateTodoItemViewModel(item));
    repository.OnItemUpdated += (sender, item) => 
       Task.Run(async () => await LoadData());
 
    this.repository = repository;
           
    Task.Run(async () => await LoadData());
}  

When an item is added to the repository, no matter who added it, MainView will add it to the items list. Since the items collection is an observable collection, the list updates. If an item is updated, we simply reload the list.

Let's data-bind our items to ListView:

1. Open up MainView.xaml and locate the ListView element.
2. Modify it to reflect the following code:

<ListView Grid.Row="1"
          RowHeight="70"
          ItemsSource="{Binding Items}">
    <ListView.ItemTemplate>    
        <DataTemplate>
            <ViewCell>
                <Grid Padding="15,10">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="10" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>

                    <BoxView Grid.RowSpan="2" />
                    <Label Grid.Column="1"
                           Text="{Binding Item.Title}"
                           FontSize="Large" />
                    <Label Grid.Column="1"
                           Grid.Row="1"
                           Text="{Binding Item.Due}"
                           FontSize="Micro" />
                    <Label Grid.Column="1" 
                           Grid.Row="1" 
                           HorizontalTextAlignment="End" 
                           Text="Completed" 
                           IsVisible="{Binding Item.Completed}"
                           FontSize="Micro" />
                </Grid>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

The ItemsSource binding tells ListView where to find the collection to iterate over and is local to ViewModel. Any bindings in the ViewCell node, however, are local to each item that we iterate in the list. In this case, we are binding to the TodoItemViewModel, which contains a property named Item. This, in turn, has properties such as Title, Due, and Completed. We can navigate down the hierarchy of objects without any problem when defining a binding.

The DataTemplate element defines what each row will look like. We use a grid to partition the space, just as we did earlier.