create a new ObservableCollection breaks my app

Question

I have this view Model

  public List<User>? _peopleData { get; set; }

        public List<string>? _comboData { get; set; }

        public ObservableCollection<string>? _people { get; set; }

        public Command? _selectionItemChangedCommand { get; set; }

        public CreateRoomDaialogViewModel(List<User> PeopleData) {
            _people = new ObservableCollection<string>();
            _peopleData = PeopleData;
            _selectionItemChangedCommand = new Command(ItemChanged);
            ComboData();
        }

        private void ItemChanged(object obj) {

            if (obj == null) {
                return;
            }
            var combo = obj as ComboBox;


        }

        private void ComboData() {
            _comboData = new List<string>();

            foreach (var item in _peopleData!) {
                _comboData.Add($"{item.Name} ({item.Email})");
            }
        }
    }


        public List<User>? _peopleData { get; set; }

        public List<string>? _comboData { get; set; }

        public ObservableCollection<string>? _people { get; set; }

        public Command? _selectionItemChangedCommand { get; set; }

        public CreateRoomDaialogViewModel(List<User> PeopleData) {
            _people = new ObservableCollection<string>();
            _peopleData = PeopleData;
            _selectionItemChangedCommand = new Command(ItemChanged);
            ComboData();
        }

        private void ItemChanged(object obj) {

            if (obj == null) {
                return;
            }
            var combo = obj as ComboBox;
            _people!.Add((string)combo!.SelectedItem);

        }

        private void ComboData() {
            _comboData = new List<string>();

            foreach (var item in _peopleData!) {
                _comboData.Add($"{item.Name} ({item.Email})");
            }
        }


    }
}

and this UI

 <StackPanel>

        <TextBox ui:ControlHelper.PlaceholderText="meeting name" />

        <ComboBox
            Margin="0,20,0,0"
            x:Name="PeopleCombo"
            ui:ControlHelper.PlaceholderText="Invite others"
            HorizontalAlignment="Stretch"
            ItemsSource="{Binding _comboData}">
            <behaviors:Interaction.Triggers>
                <behaviors:EventTrigger EventName="SelectionChanged">
                    <behaviors:InvokeCommandAction Command="{Binding _selectionItemChangedCommand}"
                                                   CommandParameter="{Binding ElementName=PeopleCombo}"
                                                   PassEventArgsToCommand="True" />
                </behaviors:EventTrigger>
            </behaviors:Interaction.Triggers>

        </ComboBox>
    </StackPanel>

Everything works fine

But if I modify the UI

<StackPanel>

        <TextBox ui:ControlHelper.PlaceholderText="meeting name" />

        <ComboBox
            x:Name="PeopleCombo"
            Margin="0,20,0,0"
            HorizontalAlignment="Stretch"
            ui:ControlHelper.PlaceholderText="Invite others"
            ItemsSource="{Binding _comboData}">
            <behaviors:Interaction.Triggers>
                <behaviors:EventTrigger EventName="SelectionChanged">
                    <behaviors:InvokeCommandAction
                        Command="{Binding _selectionItemChangedCommand}"
                        CommandParameter="{Binding ElementName=PeopleCombo}"
                        PassEventArgsToCommand="True" />
                </behaviors:EventTrigger>
            </behaviors:Interaction.Triggers>
        </ComboBox>

// new stuff

        <ui:ListView Margin="0,20,0,0"
                     IsSelectionEnabled="False"
                     ItemsSource="{Binding _people}">
            <DataTemplate>
                <StackPanel>
                    <TextBlock Text="{Binding}" />
                </StackPanel>
            </DataTemplate>
        </ui:ListView>
    </StackPanel>

I get

System.InvalidOperationException: 'Items collection must be empty before using ItemsSource.'

I just want to add people to my list view

Answer 1

Hi,@Eduardo Gomez. Welcome Microsoft Q&A.

The error message indicates that you cannot set the ItemsSource property and populate the ListView's Items collection at the same time. You should remove the Items collection and bind the ItemsSource property to the collection in your view model.

Here's an updated version of the XAML:

 <ListView Margin="0,20,0,0"   ItemsSource="{Binding _people}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <StackPanel>
                        <TextBlock Text="{Binding}" />
                    </StackPanel>
                </DataTemplate>
            </ListView.ItemTemplate>
         
        </ListView>

The result:

---

If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.