Multi-level drop-down menu ZZ

Multilevelmultiselectcombo (Silverlight)

Tharindu Nishad Patikirikorala, Cpol

5.00 (1 vote)

Rate:

Vote 1vote 2vote 3vote 4vote 5

The Multilevelmultiselectcombo is an extension of the Silverlight combo box has capabilities to display hierarchical DA Ta and enable selection of multiple items.

is your email address OK? Signed up for our newsletters but your email address is either unconfirmed, or have not been reconfirmed in a long Time. Confirmation email sent so we can confirm your e-mail address and start sending you newsletters Again. Alternatively, you can update your subscriptions.

• Download Source code-39.1 KB

Introduction

The default combo box control, comes with Silverlight enables us to show a A, and there is no-to-select Multiple items from the list. This article presents a ComboBox control the can is used to display a set of selections based on hierarchal data and Sele CT multiple items from it, hence called as MultiLevelMultiSelectCombo .

Features and Settings

Let us look at the features 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 was a control designed to the enable multiple selections, but still operate as a combo box control. In this implementation, the user control was designed with a combination of a combo box has a a of the ComboBox.ItemTemplate tree view. Tree view is suitable to display hierarchical data. A is HierarchicalDataTemplate used to display the required data and check boxes be used to enable the selection of multiple items form that h Ierarchy as follows:

Collapse | Copy Code

<sdk:hierarchicaldatatemplate x:key= "Treeviewtemplate" itemssource= "{Binding path=childitemlist}" > <grid h Orizontalalignment= "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 Ische cked, Mode=twoway} "verticalalignment=" Center "margin=" 3,0,0,0 "> <stackpanel or ientation= "Horizontal" >  <textblock horizontalalignment= "Stretch" text= "{Binding Display}" Mar           Gin= "3,0,0,0"        Verticalalignment= "Center" > </textblock></stackpanel> </checkbox> </grid> </sdk:hierarchicaldatatemplate><combobox height= "name=" Itemlistcombo "> <combo box.itemcontainerstyle> <style targettype= "ComboBoxItem" > <setter property= "HorizontalConten Talignment "value=" Stretch "/> </style> </combobox.itemcontainerstyle> <combobox.itemtemplat e> <datatemplate> <sdk:treeview itemssource= "{Binding path=tag,elementname=ite Mlistcombo} "itemtemplate=" {StaticResource treeviewtemplate} "horizontalalignment=" Stretch " Horizontalcontentalignment= "Stretch" > </sdk:treeview></datatemplate> &LT;/COMBOBOX.ITEMTEMPLATE&G T;</combobox>

Note that the combo box data source is only have one item, which becomes the source to the tree view on that item.

Now, in order to expose the custom properties for the control such as hierarchical data list and other configuration Properti ES, Dependencyproperties has been declared for each.

Collapse | Copy Code

public static readonly DependencyProperty Itemlistproperty = Dependencyproperty.register ("ItemList",      typeof (List <MultiSelectComboItem>), typeof (Multilevelmultiselectcombobox),     new PropertyMetadata ((S, e) = (( Multilevelmultiselectcombobox) s). Setitemssource ()));p ublic list<multiselectcomboitem> itemlist{    get {return (List<multiselectcomboitem >) GetValue (itemlistproperty); }    set {SetValue (Itemlistproperty, value);}}

Among the properties are:

• ItemList: The desired hierarchical data to be displayed. Each item of the This list should is of typeMultiSelectComboItem. It is a important to note, a item is a checked, to trigger selections up and down the hierarchy, theParentandChildItemListProperties has the to being assigned properly in eachMultiSelectComboItemIncluded in theItemList. At the top more level, leaveParentAs null and at the lowest level, leave theItemListAs null (see the Sample project).

  In the case of the binding Enums, the user does not has to prepare a MultiSelectComboItem list. Instead, the EnumToMultiItemListConverter can be used as follows, which would convert an enum to a MultiSelectComboItem list as follows. was an EnumCountry enum country Exposed as a binding property in the DataContext.

  Collapse | Copy Code

  Itemlist= "{Binding path=enumcountry, Converter={staticresource Enumtomultiitemlistconverter}}"  

• SetSelectAll: If True, the 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 the This section, a XAML code snippet are presented in order to explain.

Collapse | Copy Code

Xmlns:control= "Clr-namespace:multilevelmultiselectcombo" <control:multilevelmultiselectcombobox Selecteditemlist= "{Binding selectedlist, Mode=twoway}"   itemlist= "{Binding path=comboarealist,mode=onetime}"   width= "setselectall=" "True"/>

Http://www.codeproject.com/Tips/612864/MultiLevelMultiSelectCombo-Silverlight

Multi-level drop-down menu ZZ