Multi Select ComboBox in Silverlight

Problem:

              Need a way to use the combo box of silverlight which has check boxes and user can select multiple options from the combo box.

Solution:

             When I came across this requirement to implement the multi selection in combo box the first thing which I have done which many of the developer do is to search on the Google for possible solution.The solution which I found is from the stack over flow, here you can see it has give complete code and you can easily implement it. But here in my post I have changed some of the code but the the user control which is inherit from combo box. I will explain you where I have modified the code as I discuss it.
The main application which I have used for this is shown in image 1 here you can see a combo box control which is used for multiple selection and a data grid control which filter records based on the selected item from combo box. In this test application I am using the customer xml to show the records in the data grid control and I have get the countries names in the combo box control so that user can select country or countries to filter out the records in the data grid control.

Image 1

Let use discuss code for the sample application. As I have said that the control which inherit from the combo box is same as you can see on the post on the stack over flow but the code which I have modified is the model of the combo box item and the text property of the combo box which is dependency property to show the comma separate values of the selected record of the combo box control.

The first thing which I have modified is the item source collection of the combo box which raise the checked changed event I have inherit from INotifyPropertyChanged interface and use it to raise the property changed event of the class. As you can see in the code in List 1 that I have only raise the property changed for the IsChecked property which is of boolean type is bind to the IsChecked Property of the check box control which is place inside the combo box control.

List 1

Next is some modification in the view model of the Home view which is located in the viewModel folder, The thing which I modified is the display value of the combo box, in original post stack over flow if you implement the code as it is or read it you can see that combo box will display selected item is comma separated format but I have display the static text "Select Country" and don't display the comma separated value.
In List 2 I have code which is used to populate the list for the combo box, here you can see that function take list of customer and then by using the LINQ get the distinct country name which are order by country and after getting the countries I have populate the ComboBoxList which is of type "ComboBoxItemsModel " which is listed in List 1. Here you can see that I have created new object and then attached the PropertyChanged with the newly created object and assign text and then add in the list.

List 2

I have used same code to get the selected item as I need to check the country or countries name is the list and then filter the data grid records which used the PagedCollectionView as filtering of record is quite easy if you use the PagedCollectionView. If you didn't know about the PagedCollectionView filter then you can refer to my post for detail. After getting the comma separate value of the selected item from the combo box list I have just called the Refresh function of the PagedCollectionView to Refresh the collection of the data grid control to display the filtered records.

The last code which is listed in List 3 is the xaml code for the combo box. Here you can see that I have bind the Text Property of the combo box as it was bind in the original code and item source the only thing which I have changed in this code is the ItemTemplate I have used the combo box item template.

List 3

Note: As you can see that in the xaml code for the combo box, that the tag for the combo box is change not the ComboBox which is the default control for the silverlight. So you have to create separate style for the newly create control with the controls:MyComboBox tag so that it can apply to the custom combo box control. I have created one for my control which you can find in the app.xaml file.

Image 2

Output of the can be seen in the Image 2, here you can see that I have selected three countries and records for the selected countries are displayed in the grid. After filter I have sort the grid records by using the country.You can download the source code of the sample from here.

All and any comments / bugs / suggestions are welcomed!