Selecting an item in a list with WPF and M-V-VM

22 Feb 2009

The M-V-VM seminar of last month inspired me to finally get serious about WPF. The best way to learn a technology is to write some code with it, so I have begun working on a project of my own, which I hope to complete by end-March (in spite of being working full bore on a project for a client). So far, working with Model-View-ViewModel and WPF has proven easier than what I expected. Once you get the logic, things flow pretty naturally. One of my recent stumbling blocks was binding with a collection. Now that I got it to work, it seems trivial, but maybe this will help some other WPF beginner on the path to enlightenment! Imagine that your model contains a list of persons, and that you want to display two things:

For the sake of simplicity, in this example we will not separate the Model and ViewModel. Let’s add a class ViewModel, with an ObservableCollection of Persons, which we pre-populate at construction time.

Let’s connect the View to the ViewModel. In the “startup” code of the application, we instantiate a ViewModel, and pass it as the DataContext to the View, in this case, the Window. This will allow the View to have access to data from the ViewModel. Note that the ViewModel knows nothing about the View.

The first part, ItemsSource, binds the contents of the ListBox to the ObservableCollection, by telling it to look for the Persons property in the DataContext (our ViewModel class). The second part declares that the data should be displayed calling the LastName property on the items in the list. If you don’t do this, by default the display will call “ToString()”, which is typically not all that great.
First part is done; if you run the app, you should see the ListBox display the names of some fine people.

Now let’s add the following code to the ViewModel, to keep track of the selected Person:

we want the selected item in the ListBox to drive the SelectedPerson in the ViewModel. We could do this by setting the selection through code in the view, working with the DataContext, or firing events. Rather, we will use binding again, and bind the SelectedItem property on the ListBox to the SelectedPerson property in the ViewModel, by adding this code:

Et voila! If you run the application, the list should be populated, and whenever you select a person in that list, it will update the selected person in the View Model, and display the first and last name in the view.