Cascading Dropdown & Multiselect option in ListBox using WPF

Introduction

Many times we come across the situation where we need to populate the dropdowns based on the value of another dropdown or combo.

Even there are needs where we need to populate Listbox items based on the multiple selected values. In this article I will show a way of solving the same using WPF.

Background

WPF is really cool with it's excellent binding features which has been supported brilliantly by the ModelView-ViewModel pattern.
However, I not going to discuss here the details of MVVM pattern as many good sites are there that hold an excellent volume of the stuff e.g.

http://msdn.microsoft.com/en-us/magazine/dd419663.aspx

http://blogs.msdn.com/johngossman/archive/2005/10/08/478683.aspx

I will concentrate more on how by using the pattern added with WPF flavor, I have solved that problem.

Prerequisites

Dotnet framework 3.5

A few points on MVVM pattern

In very simple words, I am describing the MVVM elements
Model: The datasource
View: The UI elements
ViewModel: It sits between Model and View and helps in binging

About the application

Basically, there are two small programs

Simple Cascading Dropdown

Simple Cascading Listbox

In both the cases, I have taken 3 types of elements viz. a Country dropdown/listbox followed by a State dropdown/listbox followed by City dropdown/listbox.
The difference is that in the case of list box we can select multiple items.

Program goal

In the case of Simple Cascading Dropdown, the State dropdown will be populated based on the Country selected while the city will be populated based on the State selected.

In the case of Simple Cascading Listbox, the concept is same as the above with the difference is that, the user can select in multiples.
Code explanation

I have 3 classes viz. Country, State and City .

The class diagram of each of the following is as under

I also have a Datasource class whose class diagram is as under

The datasource is the model which is having the following code snippet

ObservableCollection<Country> _country = new ObservableCollection<Country>();
ObservableCollection<State> _state = new ObservableCollection<State>();
ObservableCollection<City> _city = new ObservableCollection<City>();

As can be seen I have created 3 ObservableCollection's .
The advantage of using ObservableCollection as opposed to list is that it provides notifications when items get added, removed, or when the whole list is refreshed.

The datasources are as under

//For Country

private void CountryData()
{
_country.Add(new Country { CountryName = "India", CountryCode = "IN" });
_country.Add(new Country { CountryName = "USA", CountryCode = "US" });
_country.Add(new Country { CountryName = "Canada", CountryCode = "CA" });
_country.Add(new Country { CountryName = "Singapore", CountryCode = "SI" });
}

//For State

private void StateData()
{
_state.Add(new State { StateName = "IndState1", CountryCode = "IN", StateCode = "INS1" });
_state.Add(new State { StateName = "IndState2", CountryCode = "IN", StateCode = "INS2" });
_state.Add(new State { StateName = "IndState3", CountryCode = "IN", StateCode = "INS3" });
_state.Add(new State { StateName = "IndState4", CountryCode = "IN", StateCode = "INS4" });

_state.Add(new State { StateName = "USAState1", CountryCode = "US", StateCode = "USS1" });
_state.Add(new State { StateName = "USAState2", CountryCode = "US", StateCode = "USS2" });
_state.Add(new State { StateName = "USAState3", CountryCode = "US", StateCode = "USS3" });
_state.Add(new State { StateName = "USAState4", CountryCode = "US", StateCode = "USS4" });

_state.Add(new State { StateName = "CANState1", CountryCode = "CA", StateCode = "CAS1" });
_state.Add(new State { StateName = "CANState2", CountryCode = "CA", StateCode = "CAS2" });
_state.Add(new State { StateName = "CANState3", CountryCode = "CA", StateCode = "CAS3" });
_state.Add(new State { StateName = "CANState4", CountryCode = "CA", StateCode = "CAS4" });

_state.Add(new State { StateName = "SINGState1", CountryCode = "SI", StateCode = "SIS1" });
_state.Add(new State { StateName = "SINGState2", CountryCode = "SI", StateCode = "SIS2" });
_state.Add(new State { StateName = "SINGState3", CountryCode = "SI", StateCode = "SIS3" });
_state.Add(new State { StateName = "SINGState4", CountryCode = "SI", StateCode = "SIS4" });
}

//For City

private void CityData()
{
_city.Add(new City { CityName = "IndianState1City1", StateCode = "INS1" });
_city.Add(new City { CityName = "IndianState1City2", StateCode = "INS1" });

_city.Add(new City { CityName = "IndianState2City1", StateCode = "INS2" });
_city.Add(new City { CityName = "IndianState2City2", StateCode = "INS2" });

_city.Add(new City { CityName = "IndianState3City1", StateCode = "INS3" });
_city.Add(new City { CityName = "IndianState3City2", StateCode = "INS3" });

_city.Add(new City { CityName = "IndianState4City1", StateCode = "INS4" });

_city.Add(new City { CityName = "IndianState4City2", StateCode = "INS4" });

_city.Add(new City { CityName = "USAState1City1", StateCode = "USS1" });
_city.Add(new City { CityName = "USAState1City2", StateCode = "USS1" });

_city.Add(new City { CityName = "USAState2City1", StateCode = "USS2" });
_city.Add(new City { CityName = "USAState2City2", StateCode = "USS2" });

_city.Add(new City { CityName = "USAState3City1", StateCode = "USS3" });
_city.Add(new City { CityName = "USAState3City2", StateCode = "USS3" });

_city.Add(new City { CityName = "USAState4City1", StateCode = "USS4" });
_city.Add(new City { CityName = "USAState4City2", StateCode = "USS4" });

_city.Add(new City { CityName = "CanadaState1City1", StateCode = "CAS1" });
_city.Add(new City { CityName = "CanadaState1City2", StateCode = "CAS1" });
_city.Add(new City { CityName = "SingaporeState1City1", StateCode = "SIS1" });
_city.Add(new City { CityName = "SingaporeState1City2", StateCode = "SIS2" });
}

Now comes the ModelView which has the name StateCountryViewModel.cs.

The class has inherited from INotifyPropertyChanged interface. It contains an event called PropertyChanged. Whenever a property on a ViewModel object changes, it raises the PropertyChanged event to notify the WPF binding system of the new value. Upon receiving that notification, the binding system queries the property, and the bound property on some UI element receives the new value.

Lastly comes the View part which is Window1.xaml.

The entire source of the view is the view model(in this case StateCountryViewModel).

The bindings are done on the items used here by using the ItemsSource="{Binding PropertyName}" syntax(note it is the property that the ViewModel has exposed) while the values are displayed using the DisplayMemberPath="PropertyName" note it is the property that the Class has exposed)

Conclusion

It is just an attempt to show the flexibility of binding in WPF using MVVM pattern.