Windows Phone From Scratch #19 – MVVM Light Toolkit Soup To Nuts #4

Let’s back up a bit and examine the day to day use of a View Model, and binding to the view model.  In this mini-tutorial I’ll show the basics of binding a collection that sits in a View Model to a list box in the view.  In the next, I’ll show how to capture the selection and, in the view model, determine what the details page should show.

Let’s create a simple application that will display the full name of customers and their email, and that will (eventually) allow the user to click on one and go to the details about that customer.

We start by creating a new MVVM application for Windows Phone.  Once created, open the application in Expression Blend and add a ListBox to the content panel. I chose to have it fill the entire panel with a small margin all around. 

Creating the CustomerCollection

The CustomerCollection class exists to give us some data to work with.  I “borrowed” this class from a previous demo and have included it with the source code.  We can summarize it here by saying that the class consists of a number of fields ( First, Last, Address, City, Zip, Phone, Fax, Email) , properties and most important a property Customers that returns an observable collection of Customer instances generated by mixing and matching values for the fields randomly.

Binding the ItemSource

The key to understanding how MVVM handles the data binding is that the DataContext for the View is the View Model.  The binding for the ItemsSource is created as you might expect, in the view:

<ListBox
   x:Name="PersonListBox"
   Margin="10"
   ItemsSource="{Binding Customers}">

When you set up the MVVM Light application the data context for this page was set to the view model, and there you’ll need a (read only) property for binding. I suggest using the code snippet that was installed with the MVVM Light Toolkit.

Thus, back in Visual Studio, in the code behind file, MainViewModel.cs, enter the letters mvvminpc and press tab.  This will expand to a property, and by using tab you can set the property name to Customers and the backing variable to _customers.  It turns out that we won’t need either the backing variable nor the setter, as we’ll use the Customers property from the CustomerCollection class.

public ObservableCollection<Customer> Customers
{
   get
   {
      var customerCollection = new CustomerCollection();
      return customerCollection.Customers;
   }
}

All that is left is to provide a DataTemplate in the view so that each Customer is displayed as we wish,

<ListBox
   x:Name="PersonListBox"
   Margin="10"
   ItemsSource="{Binding Customers}">
   <ListBox.ItemTemplate>
      <DataTemplate>
         <StackPanel>
            <StackPanel
               x:Name="DataTemplateStackPanel"
               Orientation="Horizontal">
               <TextBlock
                  x:Name="FirstName"
                  Text="{Binding First}"
                  Margin="0,0,5,0"
                  Style="{StaticResource PhoneTextExtraLargeStyle}" />
               <TextBlock
                  x:Name="LastName"
                  Text="{Binding Last}"
                  Margin="0"
                  Style="{StaticResource PhoneTextExtraLargeStyle}" />
            </StackPanel>
            <TextBlock
               x:Name="Email"
               Text="{Binding Email}"
               Margin="0"
               Style="{StaticResource PhoneTextSubtleStyle}" />

         </StackPanel>
      </DataTemplate>
   </ListBox.ItemTemplate>
</ListBox>

Finally, we need to handle the event of the user clicking on one of the listed customers and responding by going to the Details page, which we will look at in the next mini-tutorial.

The complete source code for this mini-tutorial is available here.