Binding Comboboxes which are in listbox to the viewmodels property(s)

Question

Please look at the image below:

Only three items in the listbox are displayed in the above image but it can be any number of items depending on the user's choice.

Now, as you can see in the image above each item has two comboboxes. Now I want to have selectedItem or SelectedValue in my viewModel from which I should be able to get the user's selection. Now I don't know how to bind these comboboxes for getting the user's selection.

Suppose I have only one item instead of the list then I would declare a property of type int so that I can easily get the selectedValue but for the list I am very much confused. Can anybody point me to the right direction?

Answer 1

To start of, lets say the class you are going to be binding the combo box is

public class UnitSource :INotifyPropertyChanged
{
    public IEnumerable Units
    {
        get { return new[] { "Test Unit", "Alternate Unit" }; }
    }

    string _selectedComboItem1;
    public string SelectedComboItem1
    {
        get
        {
            return _selectedComboItem1;
        }

        set
        {
            if (_selectedComboItem1 == value)
                return;
            _selectedComboItem1 = value;
            OnPropertyChanged();
        }
    }

    string _selectedComboItem2;
    public string SelectedComboItem2
    {
        get
        {
            return _selectedComboItem2;
        }

        set
        {
            if (_selectedComboItem2 == value)
                return;
            _selectedComboItem2 = value;
            OnPropertyChanged();
        }
    }
    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged([CallerMemberName]string propertyName = null)
    {
        var handler = PropertyChanged;
        if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
    }
}

Then in your view model you will have an ObservableCollection of the UnitSource Like below

    public ObservableCollection<UnitSource> MuchoUnitSources
    {
        get; set;
    }

To get the selected ListBoxItem have this in your ViewModel

private UnitSource _selectedUnitSource;
    public UnitSource SelectedUnitSource
    {
        get
        {
            return _selectedUnitSource;
        }
        set
        {
            if (_selectedUnitSource == value)
                return;
            _selectedUnitSource = value;
            OnPropertyChanged();
        }

    }

Lets assume it is initialized like so

MuchoUnitSources = new ObservableCollection<UnitSource>(new []{ new UnitSource(),new UnitSource() });

The in your view your listbox should look like below

    <ListBox Name ="TestList1" ItemsSource="{Binding MuchoUnitSources}" SelectedItem="{Binding SelectedUnitSource}">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Vertical">
                    <ComboBox   SelectedItem="{Binding SelectedComboItem1}"  ItemsSource="{Binding Units}" />
                    <ComboBox   SelectedItem="{Binding SelectedComboItem2}"  ItemsSource="{Binding Units}" />
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>

    </ListBox>

Now whenever you select an item from any of the combobox they will update the objectbeing bound to.