Click here to Skip to main content
11,714,345 members (87,960 online)
Click here to Skip to main content

MultiLevelMultiSelectCombo (Silverlight)

, 14 Aug 2013 CPOL 5.1K 217 4
Rate this:
Please Sign up or sign in to vote.
The MultiLevelMultiSelectCombo is an extension of the Silverlight combo box having capabilities to display hierarchical data and enable selection of multiple items.

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"/>

License

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

Share

About the Author

PhD, BSc(Eng), MCP (Web Development)

You may also be interested in...

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.150819.1 | Last Updated 14 Aug 2013
Article Copyright 2013 by Tharindu Nishad Patikirikorala
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid