Operation is not valid while ItemsSource is in use. Access and modify elements with ItemsControl.ItemsSource instead

Question

I am new in Binding and WPF recently I've learned how to create a listBox with multiple columns using Binding tech

 <ListView ItemsSource="{Binding Items}" Margin="306,70,22,17" MouseDoubleClick="listBoxSS_MouseDoubleClick" Name="listBoxSS" >           
    <ListView.View>
            <GridView>
                <GridView.Columns>
                    <GridViewColumn Header="first_name " Width="100" DisplayMemberBinding="{Binding Path=First_name}" />
                    <GridViewColumn Header="last_name" Width="100" DisplayMemberBinding="{Binding Path=Last_name}" />
                    <GridViewColumn Header="phone_number" Width="100" DisplayMemberBinding="{Binding Path=Phones[0]}" />
                    <GridViewColumn Header="notes" Width="100" DisplayMemberBinding="{Binding Path=Notes}" />
                </GridView.Columns>
            </GridView>
        </ListView.View>
    </ListView>

and this is the code:

List<Student> arr = search.students();
        listBoxSS.ItemsSource = arr;

but the problem was when I tried to use add or remove item or clear

 listBoxSS.Items.Clear();

Please I need an example for using the items source or the way that I can ADD or Remove Item or Clear the list.

EDIT:

<ListView ItemsSource="{Binding Items}" Margin="306,70,22,17" MouseDoubleClick="listBoxSS_MouseDoubleClick" Name="listBoxSS" >
    <ListView.View>
        <GridView>
            <GridView.Columns>
                <GridViewColumn Header="first_name " Width="100" DisplayMemberBinding="{Binding Path=First_name}" />
                <GridViewColumn Header="last_name" Width="100" DisplayMemberBinding="{Binding Path=Last_name}" />
                <GridViewColumn Header="phone_number" Width="100" DisplayMemberBinding="{Binding Path=Phones[0]}" />
                <GridViewColumn Header="notes" Width="100" DisplayMemberBinding="{Binding Path=Notes}" />
            </GridView.Columns>
        </GridView>
    </ListView.View>
</ListView>

and here is the code:

 ObservableCollection<Employee> Gemployees;
var employees = new ObservableCollection<Employee>(search.employees());

search.employees() get the list of all employees in my DB

 listBoxPE.ItemsSource = employees;
        Gemployees = employees;

now I can perform all the methods on Gemployees

 Gemployees.Remove((Student)listBoxSS.SelectedItem);
 Gemployees.Add((Student)listBoxSS.SelectedItem);

The ListView perform a refresh whenever I add or remove an Item from Gemployees!! Cool but still a little hard work on binding. Now I am doing an interface class to every ListView so I can put my stuff into it. It wont perform any flexibility in Adding Items.

Answer 1

You're binding the ItemsSource to a property in the DataContext called Items, so to update the collection, you need to go to the Items property in the DataContext and clear it.

In addition, the Items property needs to be of type ObservableCollection, not List if you want it to update the UI whenever the underlying collection changes.

Your bit of code that sets the ItemsSource in the code behind is not needed and should be removed. You only need to set the ItemsSource in one place, not both.

Here's a simple example of how it can work:

// Using Students instead of Items for the PropertyName to clarify
public ObservableCollection<Student> Students { get; set; }

public MyConstructor()
{
    ...

    Students = search.students();
    listBoxSS.DataContext = this;
}

Now when you have:

<ListView ItemsSource="{Binding Students}" ... />

you're binding the ItemsSource to the ObservableCollection<Student>, and when you want to clear the list you can call:

Students.Clear()