c# - Operation is not valid while ItemsSource is in use. Access and modify elements with ItemsControl.ItemsSource

Question

I'm trying to make 2 list boxes where I can press on a button to add an item selected from the left listbox to the right listbox. Here's the XAML for the listboxes:

        <ListBox
        x:Name="LeftList"
        Foreground="{StaticResource Foreground}"
        HorizontalAlignment="Left" 
        Height="237" Margin="15,103,0,0" 
        VerticalAlignment="Top" 
        Width="128">
        <ListBoxItem>360T</ListBoxItem>
        <ListBoxItem>BARX</ListBoxItem>
        <ListBoxItem>BNP</ListBoxItem>
        <ListBoxItem>BOA</ListBoxItem>
        <ListBoxItem>CITI</ListBoxItem>
        <ListBoxItem>CS</ListBoxItem>
        <ListBoxItem>DB</ListBoxItem>
        <ListBoxItem>GS</ListBoxItem>
        <ListBoxItem>JPM</ListBoxItem>
        <ListBoxItem>RBS</ListBoxItem>
        <ListBoxItem>UBS</ListBoxItem>
    </ListBox>

    <ListBox 
        x:Name="RightList"
        Foreground="{StaticResource Foreground}"
        HorizontalAlignment="Left" 
        Height="237" Margin="257,103,0,0" 
        VerticalAlignment="Top" 
        Width="128"/>

C#:

List<string> leftSideList = new List<string>();
List<string> rightSideList = new List<string>();

    public ChooseLPWindow()
    {
        InitializeComponent();

        //Add to the collection leftside list
        leftSideList.Add("360T");
        leftSideList.Add("BARX");
        leftSideList.Add("BNP");
        leftSideList.Add("BOA");
        leftSideList.Add("CITI");
        leftSideList.Add("CS");
        leftSideList.Add("DB");
        leftSideList.Add("GS");
        leftSideList.Add("JPM");
        leftSideList.Add("RBS");
        leftSideList.Add("UBS");

    }

    private void AddBtn_Click(object sender, RoutedEventArgs e)
    {
        if (LeftList.SelectedIndex > -1)
        {
            int SelectedIndex = LeftList.SelectedIndex;
            string SelectedItem = LeftList.SelectedValue.ToString();

            //Add the selected item to the right side list
            RightList.Items.Add(SelectedItem);
            rightSideList.Add(SelectedItem);

            if (leftSideList != null)
            {
                //Remove the item from the collection list 
                leftSideList.RemoveAt(SelectedIndex);

                //Update the left side list
                LeftList.Items.Clear();
                LeftList.ItemsSource = leftSideList;
            }
        }
    }

I get the exception on:

LeftList.Items.Clear();

This happens when I try to add a second item the first one gets added but then the exception occurs when you try to add another item. The error is:

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

Any suggestions?

Answer 1

You can't modify ListBox's Items when the items populated through ItemsSource. In that case you suppose to modify items in the ItemsSource collection instead.

I'd suggest to change your List to ObservableCollection. With that removing item from collection is enough, because ObservableCollection has built-in mechanism to notify UI to refresh whenever item added or removed from collection :

ObservableCollection<string> leftSideList = new ObservableCollection<string>();
ObservableCollection<string> rightSideList = new ObservableCollection<string>();

public ChooseLPWindow()
{
    InitializeComponent();

    leftSideList.Add("360T");
    leftSideList.Add("BARX");
    leftSideList.Add("BNP");
    leftSideList.Add("BOA");
    leftSideList.Add("CITI");
    leftSideList.Add("CS");
    leftSideList.Add("DB");
    leftSideList.Add("GS");
    leftSideList.Add("JPM");
    leftSideList.Add("RBS");
    leftSideList.Add("UBS");

    LeftList.ItemsSource = leftSideList;
}

private void AddBtn_Click(object sender, RoutedEventArgs e)
{
    if (LeftList.SelectedIndex > -1)
    {
        int SelectedIndex = LeftList.SelectedIndex;
        string SelectedItem = LeftList.SelectedValue.ToString();

        //Add the selected item to the right side list
        RightList.Items.Add(SelectedItem);
        rightSideList.Add(SelectedItem);

        if (leftSideList != null)
        {
            //Remove the item from the ItemsSource collection 
            //instead of removing it from ListBox.Items
            leftSideList.RemoveAt(SelectedIndex);
        }
    }
}