MultiLevelMultiSelectCombo (Silverlight)

• Download source code - 39.1 KB

Introduction

The default combo box control that comes with Silverlight enables us to show a single level and there is no way to select multiple items from that list. This article presents a ComboBox control that can be used to display a set of selections based on hierarchal data and select multiple items from it, hence called as MultiLevelMultiSelectCombo.

Features and Settings 

Let us look at the features of MultiLevelMultiSelectCombo.

• Multilevel mode: the multiple selection capability with multiple levels.
• SelectAll mode: the multiple selection capability with multiple levels including select all option.
• Image mode: the multiple selection capability with multiple levels including images for each item.
• Enum mode: given an enum type, displays multi selection capabilities.  

Implementation  

This is a control designed to enable multiple selections, but still operate as a combo box control. In this implementation, the user control is designed with a combination of a combo box having a ComboBox.ItemTemplate of the tree view. Tree view is suitable to display hierarchical data. A HierarchicalDataTemplate is used to display the required data and check boxes are used to enable the selection of multiple items form that hierarchy as follows:  

<sdk:hierarchicaldatatemplate x:key="TreeViewTemplate" itemssource="{Binding Path=ChildItemList}">
        <grid horizontalalignment="Stretch">
            <grid.columndefinitions>
                <columndefinition width="Auto">
                <columndefinition width="Auto">
                <columndefinition width="Auto">
            </columndefinition></columndefinition>
            </columndefinition></grid.columndefinitions>

            <checkbox grid.column="1" horizontalcontentalignment="Stretch" 
                      ischecked="{Binding IsChecked, Mode=TwoWay}" 
                      verticalalignment="Center" margin="3,0,0,0">
                <stackpanel orientation="Horizontal">
                <img source="{Binding Image}" 
                  horizontalalignment="Center" margin="0" />
                <textblock horizontalalignment="Stretch" 
                  text="{Binding Display}" margin="3,0,0,0" 
                  verticalalignment="Center">
                </textblock></stackpanel>
            </checkbox>
        </grid>
    </sdk:hierarchicaldatatemplate>

<combobox height="25" name="ItemListCombo">
    <combobox.itemcontainerstyle>
        <style targettype="ComboBoxItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        </style>
    </combobox.itemcontainerstyle>
    <combobox.itemtemplate>
        <datatemplate>              
            <sdk:treeview itemssource="{Binding Path=Tag,ElementName=ItemListCombo}" 
               itemtemplate="{StaticResource TreeViewTemplate}" 
               horizontalalignment="Stretch" horizontalcontentalignment="Stretch">
        </sdk:treeview></datatemplate>
    </combobox.itemtemplate>
</combobox>

Note that the combo box data source only has one item, which becomes the source to the tree view in that item. 

Now, in order to expose custom properties for this control such as hierarchical data list and other configuration properties, DependencyProperties have been declared for each. 

public static readonly DependencyProperty ItemListProperty = DependencyProperty.Register("ItemList", 
     typeof(List<MultiSelectComboItem>), typeof(MultiLevelMultiSelectComboBox),
     new PropertyMetadata((s, e) => ((MultiLevelMultiSelectComboBox)s).SetItemsSource()));

public List<MultiSelectComboItem> ItemList
{
    get { return (List<MultiSelectComboItem>)GetValue(ItemListProperty); }
    set { SetValue(ItemListProperty, value); }
}

Among the properties are:

• ItemList: This is the desired hierarchical data to be displayed. Each item of this list should be of type MultiSelectComboItem. It is important to note that when an item is checked, to trigger selections up and down the hierarchy, the Parent and ChildItemList properties have to be assigned properly in each MultiSelectComboItem included in the ItemList. At the top most level, leave Parent as null and at the lowest level, leave the ItemList as null (see the sample project). 

In the case of binding Enums, the user does not have to prepare a MultiSelectComboItem list. Instead, the EnumToMultiItemListConverter can be used as follows, which will convert an Enum to a MultiSelectComboItem list as follows. EnumCountry is an Enum Country exposed as a binding property in the DataContext.  

ItemList="{Binding Path=EnumCountry, Converter={StaticResource EnumToMultiItemListConverter}}"  

• SetSelectAll: If true, this property includes the Select All item in the list.
• SelectedList: Returns the MultiSelectComboItem list with the selected items and their hierarchy. Use a LINQ query to list all selected items at different levels.

Use Cases 

In this section, a XAML code snippet is presented in order to explain how to use this control.

 xmlns:control="clr-namespace:MultiLevelMultiSelectCombo" 
<control:MultiLevelMultiSelectComboBox SelectedItemList="{Binding SelectedList, Mode=TwoWay}" 
  ItemList="{Binding Path=ComboAreaList,Mode=OneTime}" 
  Width="400" SetSelectAll="True"/>