WPF Master-Details view with Listbox and Combobox with Binding

Question

I've been looking around for an answer to my question for a few days now, but am not able to find a solution.

The problem is that the combobox updates the Test object in User class with the the previous selected Users'.

i.e. you select user2 and user2 has test2, you then select user5 that has test5. Now if you select user2 again, it will show that it has test5.

Here is some code. I have two classes Users and Tests. And two ObservableCollections for each of those. This is how I've got them setup:

public class User
{
    public string Name { get; set; }
    public int test { get; set; }
    public test userTest { get; set; }
}

public class test
{
    public int ID { get; set; }
    public String Name { get; set; }
}

public class ListOfTests:ObservableCollection<test>
{
    public ListOfTests()
    {
        for (int i = 0; i < 4; i++)
        {
            test newTest = new test();
            newTest.ID = i;
            newTest.Name = "Test " + i;
            Add(newTest);
        }
    }
}

public class ListOfUsers: ObservableCollection<User>
{
    public ListOfUsers()
    {
        ListOfTests testlist = new ListOfTests();
        for (int i = 0; i < 10; i++)
        {
            User newUser = new User();
            newUser.Name = "User " + i;
            newUser.ID = i;
            newUser.userTest = testlist[i];
            Add(newUser);
        }
    }
}

And the XAML is:

<Window x:Class="ComboboxTest.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:ComboboxTest"
Title="Window1" Height="300" Width="300">
<StackPanel x:Name="SP1">
    <StackPanel.Resources>
        <local:ListOfTests x:Key="ListOfTests" />
    </StackPanel.Resources>
    <ListBox ItemsSource="{Binding}" DisplayMemberPath="Name" IsSynchronizedWithCurrentItem="True"/>
    <TextBox Text="{Binding Path=Name}" Foreground="Black"  />
    <TextBox Text="{Binding Path=userTest}" />  
    <ComboBox SelectedItem="{Binding Path=userTest}" 
              SelectedValue="{Binding Path=userTest.ID}"
              ItemsSource="{Binding Source={StaticResource ListOfTests}}" 
              DisplayMemberPath="Name" 
              SelectedValuePath="ID"

              Foreground="Black" />
</StackPanel>

Now if I change the Binding on the SelectedItem to "{Binding Path=userTest, Mode=OneWay}" then it works, but i can not change the it manually.

Here is a kicker thought... If I target .Net 4.0 (VS2010) then it works fine...

Can anyone please help me find a solution to this?

Answer 1

If I'm understanding your question, it sounds like that WPF isn't being notified when the value of a property changes. You can get around this by implementing the INotifyPropertyChanged interface. For example, the User class would look something like this:

public class User : INotifyPropertyChanged
{
    private string name = string.Empty;
    public string Name
    {
        get { return this.name; }
        set
        {
            this.name = value;
            this.OnPropertyChanged("Name");
        }
    }

    private int test = 0;
    public int Test
    {
        get { return this.test; }
        set
        {
            this.test = value;
            this.OnPropertyChanged("Test");
        }
    }

    private test userTest = null;
    public test UserTest
    {
        get { return this.userTest; }
        set
        {
            this.userTest = value;
            this.OnPropertyChanged("UserTest");
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    private void OnPropertyChanged(string propName)
    {
        PropertyChangedEventHandler eh = this.PropertyChangd;
        if(null != eh)
        {
            eh(this, new PropertyChangedEventArgs(propName));
        }
    }
}

You should probably do the same for your test class, as well.

WPF will watch for when the PropertyChanged event is fired, and updates any affected bindings as needed. This should cause the selected item in the ComboBox to change back to the test for user2.

Update: OK, I think I got this working. I think that you're missing part of the code in what you posted (like what the DataContext for the Window is), but here's what I got working:

I created a class called ViewModel, which is set to the DataContext of the main Window. Here's its code:

class ViewModel : INotifyPropertyChanged
{
    public ViewModel()
    {
        for(int i = 0; i < 4; i++)
        {
            this.tests.Add(new Test()
            {
                ID = i,
                Name = "Test " + i.ToString(),
            });
        }

        for(int i = 0; i < 4; i++)
        {
            this.users.Add(new User()
            {
                Name = "User " + i.ToString(),
                ID = i,
                UserTest = this.tests[i],
            });
        }
    }

    private ObservableCollection<User> users = new ObservableCollection<User>();
    public IEnumerable<User> Users
    {
        get { return this.users; }
    }

    private ObservableCollection<Test> tests = new ObservableCollection<Test>();
    public IEnumerable<Test> Tests
    {
        get { return this.tests; }
    }

    private User currentUser = null;
    public User CurrentUser
    {
        get { return this.currentUser; }
        set
        {
            this.currentUser = value;
            this.OnPropertyChanged("CurrentUser");
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    private void OnPropertyChanged(string propName)
    {
        var eh = this.PropertyChanged;
        if(null != eh)
        {
            eh(this, new PropertyChangedEventArgs(propName));
        }
    }
}

I moved the creation of the two lists to code. One thing I noticed in your sample is that one instance of ListOfTests was used as the ItemsSource of the ComboBox, while another instance was used to build ListOfUsers. I'm not sure if that was part of the problem or not, but it is better to just have one list of tests.

The XAML for the main Window is the following:

<Window x:Class="WpfApplication1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WpfApplication1"
    Title="Window1" Height="300" Width="300">
    <StackPanel>
        <ListBox ItemsSource="{Binding Path=Users}"
                 SelectedItem="{Binding Path=CurrentUser}"
                 DisplayMemberPath="Name"
                 IsSynchronizedWithCurrentItem="True">
        </ListBox>
        <TextBox Text="{Binding Path=CurrentUser.Name}" />
        <TextBox Text="{Binding Path=CurrentUser.UserTest.Name}" />
        <ComboBox ItemsSource="{Binding Path=Tests}"
                  SelectedItem="{Binding Path=CurrentUser.UserTest}"
                  DisplayMemberPath="Name" />
    </StackPanel>
</Window>

The key to getting things working is the CurrentUser property. It is bound to ListBox.SelectedItem, and ComboBox.SelectedItem is bound to CurrentUser.UserTest. This will change the selection in the ComboBox to represent the test of the user selected in the ListBox.

I got this all working using Visual Studio 2008 SP1, so hopefully it will work for you as well. If you have any problems getting this working, let me know and I'll see what I can do.

Answer 2

Andy,

Here is a more readable extract from the code I have now.

public class User : INotifyPropertyChanged
{
    private string name;
    public string Name 
    {
        get
        {
            return name;
        }
        set
        {
            name = value;
            OnPropertyChanged("Name");
        }
    }

    private int iD;
    public int ID 
    {
        get
        {
            return iD;
        }
        set
        {
            iD = value;
            OnPropertyChanged("ID");
        }
    }

    private test userTest;
    public test UserTest 
    {
        get
        {
            return userTest;
        }
        set
        {
            userTest = value;
            OnPropertyChanged("UserTest");
        }
    }


    public event PropertyChangedEventHandler PropertyChanged;
    private void OnPropertyChanged(string propName)
    {
        PropertyChangedEventHandler eh = this.PropertyChanged;
        if (null != eh)
        {
            eh(this, new PropertyChangedEventArgs(propName));
        }
    }
}

Looks better than in the comments.

Regards Corne