MVVM + AtomForm + Cascaded ComboBoxes
UI Atoms version 1.2.22 resolves Cascaded ComboBoxes issue in MVVM pattern. Advanced AtomForm is now capable of handling cascaded ComboBoxes with MVVM and it also integrates well with third party controls.
Recently we identified few issues with MVVM implementation in Silverlight regarding ComboBoxes. ComboBox looses its “SelectedValue” binding once the ItemsSource of ComboBox changes. This needed some workaround as well as Modifying DataForm is very painful as you may need very complex form designs in regular business applications.
1. Create Models
Lets assume we need to edit a Customer’s Country and City, as we change the Country the list of cities should change it. Problem with existing ComboBox and DataForm is, as soon as list of cities changes, ComboBox’s SelectedValue binding vanishes. So lets create Customer Model first.
Each of properties in CustomerViewModel raises PropertyChanged event for corresponding properties when modified.
When selected customer changes, SelectedCountry also changes and which changes Cities property, so in drop down we can display the list of cities of selected country.
2. Create Master View
Master View control declares grid with two columns, left side displaying list of customers and on right side displaying details of the selected customer.
Lets analyze Bindings,
- ListBox’s ItemsSource is bound to ViewModel.Customers which returns list of available customers.
- ListBox’s SelectedItem is bound (two way) to ViewModel.SelectedCustomer.
Lets analyze the bindings,
- AtomForm’s DataContext is bound to SelectedCustomer of ViewModel, which comes from SelectedItem of Parent Control
- AtomTextBox’s Text is bound to Name (of AtomForm’s DataContext’s binding) with Mode=TwoWay
- ItemsSource is bound to ViewModel.Countries which returns list of countries.
- SelectedValue is bound to CountryID (of AtomForm’s DataContext’s binding) with Mode=TwoWay
- SelectedItem is bound to ViewModel.SelectedCountry, which triggers change of SelectedCountry property on ViewModel which changes list of cities.
- AtomComboBox (this is the one that’s tricky, normal ComboBox does not work here)
- ItemsSource is bound to ViewModel.Cities which returns list of cities of SelectedCountry.
- SelectedValue is bound to CityID (of AtomForm’s DataContext’s binding) with Mode=TwoWay
3. Cascaded ComboBox
You can see that the cascaded ComboBox work well with AtomForm and AtomComboBox and its easy to design AtomForm with MVVM with so much less code then that of DataForm and ComboBoxes.
Please download the latest version of UI Atoms 2010 suite to try MVVM + AtomForm + Cascaded ComboBoxes.