WPF Binding ListBox Master/Detail

Question

I can get this working with an XmlDataSource but not with my own classes. All I want to do is bind the listbox to my collection instance and then link the textbox to the listbox so I can edit the person's name (two-way). I've deliberately kept this as simple as possible in the hope that somebody can fill in the blanks.

XAML:

<Window x:Class="WpfListTest.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WpfListTest"
    Title="Window1" Height="300" Width="600">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="160"/>
            <ColumnDefinition Width="3"/>
            <ColumnDefinition Width="1*"/>
        </Grid.ColumnDefinitions>
        <DockPanel Grid.Column="0">
            <ListBox />
        </DockPanel>
        <DockPanel Grid.Column="2">
            <StackPanel>
                <Label>Name</Label>
                <TextBox />
            </StackPanel>
        </DockPanel>
    </Grid>
</Window>

C# code behind:

namespace WpfListTest
{
    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>
    public partial class Window1 : Window
    {
        public People MyPeeps = new People();

        public Window1()
        {
            InitializeComponent();

            MyPeeps.Add(new Person("Fred"));
            MyPeeps.Add(new Person("Jack"));
            MyPeeps.Add(new Person("Jill"));
        }
    }

    public class Person
    {
        public string Name { get; set; }

        public Person(string newName)
        {
            Name = newName;
        }
    }

    public class People : List<Person>
    {
    }
}

All the examples on the web seem to have what is effectively a static class returning code-defined data (like return new Person("blah blah")) rather than my own instance of a collection - in this case MyPeeps. Or maybe I'm not uttering the right search incantation.

One day I might make a sudden breakthrough of understanding this binding stuff but at the moment it's baffling me. Any help appreciated.

Answer 1

The correct way would be to use the MVVM pattern and create a ViewModel like so:

public class MainWindowViewModel : INotifyPropertyChanged
{
    private People _myPeeps;
    private Person _selectedPerson;

    public event PropertyChangedEventHandler PropertyChanged;

    public People MyPeeps
    {
        get { return _myPeeps; }
        set
        {
            if (_myPeeps == value)
            {
                return;
            }
            _myPeeps = value;
            RaisePropertyChanged("MyPeeps");
        }
    }

    public Person SelectedPerson
    {
        get { return _selectedPerson; }
        set
        {
            if (_selectedPerson == value)
            {
                return;
            }
            _selectedPerson = value;
            RaisePropertyChanged("SelectedPerson");
        }
    }

    private void RaisePropertyChanged(string propertyName)
    {
        var handler = PropertyChanged;
        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

Initialize it in your View's code behind like so:

public partial class MainWindow : Window
{
    private readonly MainWindowViewModel _viewModel;

    public MainWindow()
    {
        _viewModel = new MainWindowViewModel();
        _viewModel.MyPeeps = new People();
        _viewModel.MyPeeps.Add(new Person("Fred"));
        _viewModel.MyPeeps.Add(new Person("Jack"));
        _viewModel.MyPeeps.Add(new Person("Jill"));
        DataContext = _viewModel;

        InitializeComponent();
    }
}

And bind the data like so:

<Window x:Class="WpfApplication3.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow"
        Height="350"
        Width="525">
  <Grid>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="160" />
      <ColumnDefinition Width="3" />
      <ColumnDefinition Width="1*" />
    </Grid.ColumnDefinitions>
    <DockPanel Grid.Column="0">
      <ListBox SelectedItem="{Binding SelectedPerson}"
               DisplayMemberPath="Name"
               ItemsSource="{Binding MyPeeps}" />
    </DockPanel>
    <DockPanel Grid.Column="2">
      <StackPanel>
        <Label>Name</Label>
        <TextBox Text="{Binding SelectedPerson.Name}" />
      </StackPanel>
    </DockPanel>
  </Grid>
</Window>

The binding will work like this:

The DataContext of the window itself is set to the ViewModel instance. Because the ListBox and the TextBox don't specify any DataContext, they inherit it from the Window. The bindings on an object always work relative to the DataContext if nothing else is being specified. That means that the TextBox binding looks for a property SelectedPerson in its DataContext (i.e., in the MainWindowViewModel) and for a Property Name in that SelectedPerson.

The basic mechanics of this sample are as follows: The SelectedPerson property on the ViewModel is always synchronized with the SelectedItem of the ListBox and the Text property of the TextBox is always synchronized with the Name property of the SelectedPerson.