MVVM WPF ObservableCollection : Error addign items, ItemsSource binding

Question

I'm having troubles adding items to an ObservableCollection while using a listbox with ItemsSource. I add dummy data for testing in my viewmodels constructor.

My viewmodel:

public class KabaDeviceListViewModel : KabaBase
{

    private ObservableCollection<KabaDeviceDetailViewModel> _details;

    public ObservableCollection<KabaDeviceDetailViewModel> KabaDevices
    {
        get { return _details; }
        set 
        {
            if (value != _details)
            {
                _details = value;
                OnPropertyChanged("KabaDevices");
            }
        }
    }


    public KabaDeviceListViewModel()
    {

        ObservableCollection<KabaDeviceDetailViewModel> _details = new ObservableCollection<KabaDeviceDetailViewModel>();

        KabaDevice kd1 = new KabaDevice("localhost A", "127.0.0.1", true);
        KabaDeviceDetailViewModel dvm = new KabaDeviceDetailViewModel(kd1);
        _details.Add(dvm);

        KabaDevice kd2 = new KabaDevice("localhost B", "127.0.0.1", true);
        KabaDeviceDetailViewModel dvm2 = new KabaDeviceDetailViewModel(kd2);
        _details.Add(dvm2);

        this.KabaDevices = _details;
    }
}

So far so good, but an error occurs in XAML code here, on ItemsSource of the listbox. I don't see what I'm doing wrong. I use VS2010 and .NET 4.0.

<UserControl x:Class="KabaTest.View.KabaDeviceListView"
         ...
         xmlns:myViewModels="clr-namespace:KabaTest.ViewModel"
         xmlns:myViews="clr-namespace:KabaTest.View">
<UserControl.DataContext>
    <myViewModels:KabaDeviceListViewModel/>
</UserControl.DataContext>
<Grid>
    <ListBox Margin="5" 
             ItemsSource="{Binding Path=KabaDevices, Mode=TwoWay}" >
             ScrollViewer.HorizontalScrollBarVisibility="Disabled" >
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel IsItemsHost="True" Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBox.ItemTemplate>
            <DataTemplate DataType="{x:Type myViewModels:KabaDeviceDetailViewModel}" >
                <myViews:KabaDeviceDetailView DataContext="{Binding }"/>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</Grid>

The InnerException at ItemsSource is : {"Operation is not valid while ItemsSource is in use. Access and modify elements with ItemsControl.ItemsSource instead."}. Thanks for your help!

Answer 1

There might be a problem in your constructor. Your assigning the backing field _details to the public property for that backing field KabaDevices. Not 100% sure whether this is the reason for the exception, but everything else should work fine, as far as I can tell. Try this:

public KabaDeviceListViewModel()
{

    var details = new ObservableCollection<KabaDeviceDetailViewModel>();

    KabaDevice kd1 = new KabaDevice("localhost A", "127.0.0.1", true);
    KabaDeviceDetailViewModel dvm = new KabaDeviceDetailViewModel(kd1);
    details.Add(dvm);

    KabaDevice kd2 = new KabaDevice("localhost B", "127.0.0.1", true);
    KabaDeviceDetailViewModel dvm2 = new KabaDeviceDetailViewModel(kd2);
    details.Add(dvm2);

    this.KabaDevices = details;
}