How to load UserControl when clicking on ListBox item?

Question

WPF

Hello. This question is a continuation of this one .
I decided not to use Windows Form but to write an application in WPF. Slightly changing the interface and at the same time studying a new topic for myself. The interface, according to my idea, will look like this.

When you click on the listboxa element, the usercontrol (main) should be loaded, in it, when you click on the checkbox, the usercontrol should be loaded with a table in which the user specifies the data for the calculation (3 tables in total, i.e. 3 usercontrols) At the moment, I have implemented adding an element to the listbox.

MainWindowViewModel.cs

class MainWindowViewModel : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        private string _contentToAdd;
        private ObservableCollection<string> _devList;
        public ICommand AddCommand { get; set; }

        public void NotifyPropertyChanged(string propertyname)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyname));
            }
        }
        
        public MainWindowViewModel()
        {
            _devList = new ObservableCollection<string>();
            AddCommand = new DelegateCommand(Add);
        }

        public ObservableCollection<string> DevList
        {
            get { return this._devList; }
            set { this._devList = value; }
        }
        public string ContentToAdd
        {
            get { return this._contentToAdd; }
            set { this._contentToAdd = value; NotifyPropertyChanged("ContentToAdd"); }
        }
        public void Add(object parameter)
        {
            DevList.Add(ContentToAdd);
        }       
    }

MainWindow.xaml

<Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="60"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
            
            <StackPanel Grid.Row="0">
                    <Button x:Name="btn_add_list" Content="Добавить" Command="{Binding AddCommand}"  Margin="0,5,0,5"/>
                    <TextBox Text="{Binding ContentToAdd}" x:Name="item_title_txt" Height="23" TextWrapping="Wrap" Margin="0,5,0,10" Tag="Название устройства"/>
            </StackPanel>
                <ListBox ItemsSource="{Binding DevList}" Grid.Row="1" x:Name="device_list" ></ListBox>
            </Grid>

I don’t understand how I can now load the usercontrol when clicking on the listboxa element (data from all listboxa elements should be saved, that is, if I go to element2 and then to element1, the data should not disappear).
Did I understand correctly, I need to hang an event on the listboxa element, when triggered, the usercontrol will be loaded and placed in some kind of list, and when the event is triggered, there will be a check with this list. We also need a model that will collect values ​​for each usercontrol and put them in the list in the same way, i.e. this should all happen when the element is clicked. I don’t understand how to do this, maybe there is an example to see or read .. As far as I’m doing it right, maybe there is a more correct way?

Answer 1

You just need to bind the groupbox datacontext to the selected list item. WPF will do the rest.

<ListBox ItemsSource="{Binding DevList}" SelectedItem="{Binding SelectedElement}" />
<GroupBox DataContext="{Binding SelectedElement}">
</GroupBox>
<GroupBox DataContext="{Binding SelectedElement.Subelement1}">
</GroupBox>

For this to work, you need to make the DevList be a list of objects, not strings. Create a class (viewmodel) for your list items. It can store the properties that you want to show in groupboxes. That is, your objects are stored in the list of elements, and then they are also indicated by the data context in other controls (group boxes).
In this case, it's good to implement INotifyPropertyChanged in the viewmodel.