Click here to Skip to main content
11,706,159 members (52,801 online)
Click here to Skip to main content

Multiple-Selection ComboBox for Silverlight

, 12 Mar 2013 CPOL 98.2K 3.8K 27
Rate this:
Please Sign up or sign in to vote.
A tutorial on how to create a Multiple-Selection ComboBox for Silverlight

Introduction

ComboBox is a widely used control. Sometimes, we want to go beyond its default capability, such as multiple-selection. In this article, I will walk through with you how to create a multiple-selection ComboBox for Silverlight. The same approach applies to WPF. I will use Expression Blend for design. It is efficient to use the Blend to create a resource skeleton; and you can use either Blend or Visual Studio to edit the code.

In this updated version, I answered the most asked question: How to display the selected items?

Step by Step

The goal is to create a multiple-selection ComboBox as shown in the left side of following figure. The items in the dropdown should display with CheckBoxes. The right side ListBox demonstrates the same XAML code can be used for a multiple selection ListBox. One stone kills two birds!

Assume you have a ComboBox in place, and want to make it supporting multiple-selection. First, right-click the ComboBox to popup the context menu. In the menu, select Edit Template -> Edit a Copy. This will open the Create Style Resource dialog box. You can rename the default Name (Key) in the dialog. And then click OK to close the dialog.

Now you get the default template of the ComboBox in your .xaml file. You can browse the details in the following window, and figure out how the ComboBox works: when you click the ComboBox, it pops up a Popup control. By default, the Popup control uses an ItemsPresenter to display the SourceItems of the ComboBox. We need to replace it with a ListBox which supports multiple-selection.

Tips

  • The Windows theme setting will effect on the Blend generated template. I suggest you avoid Basic Themes.
  • The Blend generated template could be slightly different with different versions of Silverlight. If you cannot make the ComboBox template generated with Silverlight 3 work with Silverlight 4, regenerate it Silverlight 4.

We also need to the replace the ListBoxItem with CheckBox so that the user can easily identify the selection status. It would be efficient to do this in the XAML window. Let’s create the CheckBoxListBoxItemStyle style as follows:

<Style x:Key="CheckBoxListBoxItemStyle" TargetType="ListBoxItem">
    <Setter Property="Foreground" Value="#FF000000" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListBoxItem">
                <Grid x:Name="RootElement">
                    <CheckBox ClickMode="Press" Content="{Binding Path=Name}"
                          IsChecked="{Binding Path=IsSelected, Mode=TwoWay}" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style> 

Make sure you set ClickMode="Press"; and Mode=TwoWay.

The data I am using here is very simple: a Name property, and an IsSelected property.

 

Set the ItemContainerStyle in the ListBox to the CheckBoxListBoxItemStyle as follows:

<ListBox x:Name="lstBox" SelectionMode="Multiple"
                 ItemsSource="{TemplateBinding ItemsSource}"
                 ItemContainerStyle="{StaticResource CheckBoxListBoxItemStyle}"
                 HorizontalAlignment="Stretch" />

Now you can build and run the project. In the demo page, I included an additional ListBox, which is bound to the same data. The ListBox reuses the same style CheckBoxListBoxItemStyle. With the ListBox, you can validate that the selection is updated on both the ComboBox and the ListBox.

Now it’s time to create a Resource Dictionary file, and move the resource (templates and styles) to the Resource Dictionary.

It seems ambiguous to display the selected items in the collapsed ComboBox, which is designed to display a single item. Here we need the creativity of the User Interface design. For instance, we can reduce the width of the ComboBox, and use a separate ItemsControl to display the selected items. The ItemsControl binds to the same data as ComboBox, but displays selected items only. We can implement a converter class with IValueConverter to convert the IsSelected bool property to Visibility. In this way, the ItemsControl displays selected items only.

<ItemsControl ItemsSource="{Binding Data}" >
<ItemsControl.ItemTemplate>
              <DataTemplate>
                    <TextBlock Text="{Binding Name}"
			Visibility="{Binding IsSelected,
			Converter={StaticResource BoolToVisibilityConverter}}" />
              </DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>

Further, we can use the Tooltip to display the selected items. The following figure shows the Tooltip with an ItemsControl embedded within.

Following is the code snippet for how to embed an ItemsControl in the Tooltip:

<ComboBox ItemsSource="{Binding Data}" Width="26" VerticalAlignment="Center"
	Style="{StaticResource MultiSelComboBoxStyle}" >
    <ToolTipService.ToolTip>
        <ToolTip>
            <ItemsControl ItemsSource="{Binding Data}" Margin="4" >
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding Name}"
			Visibility="{Binding IsSelected,
			Converter={StaticResource BoolToVisibilityConverter}}" />
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </ToolTip>
    </ToolTipService.ToolTip>
</ComboBox>

Conclusion

The ComboBox contains a Popup control for hosting the item selection control. You can replace the default one to customize the behavior, such as multiple selection. Technically, you can embed a UserControl (or almost any control) in the Popup control. This opens the door for creating more sophisticated User Interface. For detail. please read How to Popup Anything? 

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Frank W. Wu
Technical Lead
United States United States
No Biography provided

You may also be interested in...

Comments and Discussions

 
QuestionHow to display the first selected item? Pin
CristianDa4-Mar-15 3:53
memberCristianDa4-Mar-15 3:53 
QuestionAdd a "Title" to the closed ComboBox Pin
Nicolas Cordouan12-Mar-13 0:44
memberNicolas Cordouan12-Mar-13 0:44 
QuestionUnable to populate labels/text/ Pin
Ravichandran M. Kaushika3-Dec-12 12:03
memberRavichandran M. Kaushika3-Dec-12 12:03 
AnswerRe: Unable to populate labels/text/ Pin
Frank W. Wu3-Dec-12 14:21
memberFrank W. Wu3-Dec-12 14:21 
GeneralRe: Unable to populate labels/text/ Pin
Ravichandran M. Kaushika4-Dec-12 5:28
memberRavichandran M. Kaushika4-Dec-12 5:28 
GeneralMy vote of 3 Pin
Uday P.Singh11-Jun-12 6:45
memberUday P.Singh11-Jun-12 6:45 
GeneralRe: My vote of 3 Pin
nare s14-Mar-13 2:55
membernare s14-Mar-13 2:55 
QuestionHow to get the selected index changed event fired? Pin
Uday P.Singh8-Jun-12 23:25
memberUday P.Singh8-Jun-12 23:25 
AnswerRe: How to get the selected index changed event fired? Pin
Frank W. Wu11-Jun-12 3:26
memberFrank W. Wu11-Jun-12 3:26 
GeneralRe: How to get the selected index changed event fired? Pin
dbernhardt14-Jun-12 5:44
memberdbernhardt14-Jun-12 5:44 
SuggestionRe: How to get the selected index changed event fired? Pin
Frank W. Wu10-Jul-12 8:35
memberFrank W. Wu10-Jul-12 8:35 
GeneralRe: How to get the selected index changed event fired? Pin
dbernhardt18-Jul-12 4:08
memberdbernhardt18-Jul-12 4:08 
GeneralRe: How to get the selected index changed event fired? Pin
Frank W. Wu18-Jul-12 8:12
memberFrank W. Wu18-Jul-12 8:12 
QuestionCodeplex project Pin
Adriaan Davel29-Mar-12 20:27
memberAdriaan Davel29-Mar-12 20:27 
GeneralMy vote of 5 Pin
LR___1-Dec-11 7:36
memberLR___1-Dec-11 7:36 
QuestionCustomize your great control Pin
Mr. J.4-Aug-11 21:10
memberMr. J.4-Aug-11 21:10 
AnswerRe: Customize your great control Pin
Frank W. Wu7-Aug-11 3:43
memberFrank W. Wu7-Aug-11 3:43 
GeneralRe: Customize your great control Pin
Mr. J.6-Sep-11 20:44
memberMr. J.6-Sep-11 20:44 
GeneralRe: Customize your great control Pin
Frank W. Wu7-Sep-11 2:41
memberFrank W. Wu7-Sep-11 2:41 
GeneralMy vote of 3 Pin
Johnny J.2-May-11 3:28
memberJohnny J.2-May-11 3:28 
GeneralRe: My vote of 3 Pin
Shimmy Weitzhandler6-Mar-12 18:17
memberShimmy Weitzhandler6-Mar-12 18:17 
GeneralHow to display text on this multiselect combobox?? Pin
Piyush Nandanwar28-Apr-11 20:33
memberPiyush Nandanwar28-Apr-11 20:33 
GeneralRe: How to display text on this multiselect combobox?? Pin
Frank W. Wu29-Apr-11 4:28
memberFrank W. Wu29-Apr-11 4:28 
GeneralRe: How to display text on this multiselect combobox?? Pin
Johnny J.2-May-11 3:27
memberJohnny J.2-May-11 3:27 
GeneralRe: How to display text on this multiselect combobox?? Pin
Frank W. Wu2-May-11 6:47
memberFrank W. Wu2-May-11 6:47 
QuestionRe: How to display text on this multiselect combobox?? Pin
Shimmy Weitzhandler6-Mar-12 18:16
memberShimmy Weitzhandler6-Mar-12 18:16 
GeneralHelpful instruction, thanks you! Pin
mg80s11-Jan-11 3:11
membermg80s11-Jan-11 3:11 
QuestionHow to make this a control? Pin
rvk12-Feb-10 8:29
memberrvk12-Feb-10 8:29 
AnswerRe: How to make this a control? Pin
Frank W. Wu16-Feb-10 3:35
memberFrank W. Wu16-Feb-10 3:35 
GeneralRe: How to make this a control? Pin
rvk17-Feb-10 6:19
memberrvk17-Feb-10 6:19 
GeneralRe: How to make this a control? Pin
Frank W. Wu18-Feb-10 4:52
memberFrank W. Wu18-Feb-10 4:52 
GeneralRe: How to make this a control? Pin
rvk18-Feb-10 5:39
memberrvk18-Feb-10 5:39 
GeneralRe: How to make this a control? Pin
Frank W. Wu18-Feb-10 11:14
memberFrank W. Wu18-Feb-10 11:14 
QuestionRe: How to make this a control? Pin
Dave290930-May-11 16:46
memberDave290930-May-11 16:46 
AnswerRe: How to make this a control? Pin
Frank W. Wu31-May-11 7:03
memberFrank W. Wu31-May-11 7:03 
GeneralRe: How to make this a control? Pin
Dave290931-May-11 15:30
memberDave290931-May-11 15:30 
GeneralAdditional functionality for yours Multiple-Selection ComboBox Pin
Member 38063051-Feb-10 15:46
memberMember 38063051-Feb-10 15:46 
GeneralRe: Additional functionality for yours Multiple-Selection ComboBox [modified] Pin
Frank W. Wu3-Feb-10 6:48
memberFrank W. Wu3-Feb-10 6:48 
QuestionHow to access SelectionChanged event ? Pin
Member 388387417-Nov-09 19:44
memberMember 388387417-Nov-09 19:44 
This post was really helpful.

The SelectionChanged event of the combo box doesnt get called when any check box is selected.
Then how can i extract this SelectionChanged event for the check box??
AnswerRe: How to access SelectionChanged event ? Pin
Member 388387417-Nov-09 22:18
memberMember 388387417-Nov-09 22:18 
GeneralRe: How to access SelectionChanged event ? Pin
Frank W. Wu18-Nov-09 15:49
memberFrank W. Wu18-Nov-09 15:49 
GeneralRe: How to access SelectionChanged event ? Pin
jsnsoft1-Jun-11 0:11
memberjsnsoft1-Jun-11 0:11 
GeneralRe: How to access SelectionChanged event ? Pin
jsnsoft1-Jun-11 0:10
memberjsnsoft1-Jun-11 0:10 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.150819.1 | Last Updated 13 Mar 2013
Article Copyright 2009 by Frank W. Wu
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid