Cascading Dropdown & Multiselect Option in ListBox Using WPF

Download source - 53.98 KB

Introduction

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

There are also times 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 its excellent binding features which has been supported brilliantly by the ModelView-ViewModel pattern.

However, here I am not going to discuss the details of MVVM pattern as there are many good sites that hold an excellent volume of the stuff, e.g.

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

Prerequisites

.NET 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 binding

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 listbox, 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 the same as the above with the difference being that the user can select in multiples.

Code Explanation

I have 3 classes, viz. Country, State and City . I also have a Datasource class(Datasource.cs):

The datasource is the model which has 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 ObservableCollections .

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).