MultiSelect ComboBox for WPF, the MVVM Way

Applications demanding user input often requires end users to select multiple values from a combobox. As of now, C1ComboBox for WPF does not have the feature to allow multiple selection of values. However, with the flexibility of WPF, this feature can be implemented by extending the existing class of C1Combo. >> Download ComponentOne Studio Before we proceed further, I'll specify that only downside of this implementation. This implementation is dependent on the existing structure of the Business Object. When we extend C1Combo, we modify this as per a single Class definition. For example, we have a Class Person. In this scenario, Combo would be modified to show only this Class structure for multiple selection. We cannot change it to show values of another Class type or change the binding at run-time. We would have to define another Combo to cater to that Class design. Complete Application has been designed to work in MVVM concept except for events of CheckBox defined in the DataTemplate for C1ComboBox. This is how our final ComboBox control will work.


Since lot of code is involved, I'll quickly run through the core concepts instead of providing the entire code snippets.

Define Extended Class for WPF C1Combo

Create a Class 'MultiSelectComboBox' and extend it further from C1.WPF.C1ComboBox namespace.

class MultiSelectComboBox : C1.WPF.C1ComboBox


Create ViewModel Structure

This section is self understood where you define the Class design for your business Object entity.

Define ItemTemplate in Main Application Window

Once we have the basic structure of the extended C1ComboBox defined, add this usercontrol to your main application. Include the namespace and refer the control in the XAML. Next step is to define the internal DataTemplate to include in the CheckBox control in the dropdown items.

class MultiSelectComboBox : C1.WPF.C1ComboBox


Implementing MultiSelect Feature in the Extended Class

Next step involves adding additional Properties, corresponding Dependency Properties and Supporting Methods. Since the code structure is large, refer to the attached sample application for complete code base.

Download Sample


GrapeCity Developer Tools
comments powered by Disqus