WPF comboxbox2 data binding update based on selection change in combobox1 with MVVM

Question

I have a combo box that I mapped to a list that exists in my viewmodel. Now that users make a selection in this combo box, I want the second combo box to update its contents.

So, for example, combobox1 is State and combobox2 should only contain Zipcodes of this state.

But in my case, I do not have predefined lists before the distribution for combobox2, I need to go from db.

Also, if necessary, I could get all the potential values ​​for combobox2 (for each value of combobox1) before starting, but I would like to avoid this if I can.

How to implement WPF and use MVVM? I am new to wpf \ databinding \ mvvm in this world.

Answer 1

Something like the following. Please note that the code is simplified for example. In reality, your ViewModel will implement INotifyPropertyChanged and increment PropertyChanged events when properties have been changed.

The key, although it is the installer of SelectedState. Your ComboBox will bind the SelectedValue property to the ViewModel SelectedState property. When the property has changed, the ZipCodes collection will be reloaded, to which another combo box will be bound.

class MyViewModel {

    public ObservableCollection<string> States {
        get;
        private set;
    }

    public ObservableCollection<string> ZipCodes {
        get;
        private set;
    }

    public string SelectedState {
        get { return _selectedState; }
        set {
            _selectedState = value;
            LoadZipCodes(_selectedState);
        }
    }

    public string SelectedZipCode {
        get;
        set;
    }

    void LoadZipCodes(string state) {
        // repopulate the ZipCodes property
    }

}

Answer 2

Another solution. Sample model:

class StateViewModel
{
    public string StateName
    {
        get {...}
        set {...}
    }

    public ObservableCollection<ZipCodeViewModel> ZipCodes
    {
        get {...}
        set {...}
    }
}

class ZipCodeViewModel
{
    public string ZipCodeName
    {
        get {...}
        set {...}
    }
}

class MainViewModel
{
    public ObservableCollection<StateViewModel> States
    {
        get {...}
        set {...}
    }
}

And XAML:

<ComboBox ItemsSource="{Binding Path=States}" IsSynchronizedWithCurrentItem="True">
    <ComboBox.ItemTemplate>
        <DataTemplate>
            <Label Content="{Binding Path=StateName}"></Label>
        </DataTemplate>
    </ComboBox.ItemTemplate>
</ComboBox>

<ContentControl Content="{Binding Path=States}">
    <ContentControl.ContentTemplate>
        <DataTemplate>
            <ComboBox ItemsSource="{Binding Path=ZipCodes}">
                <ComboBox.ItemTemplate>
                    <DataTemplate>
                        <Label Content="{Binding Path=ZipCodeName}"></Label>
                    </DataTemplate>
                </ComboBox.ItemTemplate>
            </ComboBox>
        </DataTemplate>
    </ContentControl.ContentTemplate>
</ContentControl>