How to Use MultiSelect Input Control for WinForms and WPF
Quick Start Guide | |
---|---|
What You Will Need |
Visual Studio |
Controls Referenced | |
Tutorial Concept | Configure the MultiSelect ComboBox control to enable data binding, tag editing, autocomplete, and more for WinForms and WPF. |
The ComponentOne MultiSelect input control takes the familiar ComboBox experience to the next level by allowing users to select multiple items from a single drop-down list. Instead of being limited to one choice, users can quickly pick several options, with selections displayed as comma-separated text or visually distinct tags in the editor area, making data entry clearer and more intuitive.
Check out the video below to get started with the Windows MultiSelect control for WinForms or WPF applications:
In this blog, we will showcase:
- Data Binding with MultiSelect
- Displaying Selected Items as Tags
- Search and AutoComplete in the Dropdown
- Flexible Selection Modes
- How to Get Started with MultiSelect
Ready to get started? Download ComponentOne Today!
Data Binding with MultiSelect
The MultiSelect control makes data binding straightforward and flexible. It supports binding to ADO.NET data sources as well as .NET collections, allowing you to populate the dropdown with minimal effort.
- In WinForms, simply assign your data source to the BindingInfo.DataSource property.
- In WPF, set the ItemsSource property to your collection or data set.
For fine-grained control over the display, use the DisplayMemberPath property to specify which field or property should appear in the dropdown list. This ensures a clean, user-friendly representation of your bound data.
Using MultiSelect in Unbound Mode
The MultiSelect control also works seamlessly in unbound mode, giving you full control over the items it displays. You can use the Items.Add method to add a new C1CheckListItem directly, and even assign a custom object to each C1CheckListItem for greater flexibility.
To insert an item at a specific position in the list, simply call the Items.Insert method. This approach is ideal when you need to dynamically manage items without relying on a data source.
Display Selected Items as Tags
The MultiSelect control lets you display selected items as interactive tags in the editor area, providing a clean and modern look. Users can easily remove any selection by clicking the “×” on the tag. You can switch between displaying items as text or tags by setting the DisplayMode property.
Search and AutoComplete in the Dropdown
The MultiSelect control includes built-in search and autocomplete functionality to enhance usability and speed. As users type one or more letters, the control automatically scans the list, scrolls the matching item into view, and highlights it for quick selection. This intuitive behavior helps users efficiently navigate large data sets without manually scrolling through every option.
Flexible Selection Modes
The MultiSelect control offers versatile selection options to suit different scenarios. You can configure it to allow single selection or enable multiple selections, giving users complete flexibility. With the Extended mode, users can select multiple items by holding down the CTRL key, providing a familiar and efficient selection experience.
Simply use the SelectionMode property to switch between Single, Multiple, or Extended modes based on your application’s needs. The control also exposes the ShowSelectAll Boolean property to display a checkbox to select or deselect all items.
How to Get Started with MultiSelect
To get started with ComponentOne MultiSelect for WPF, look for the C1.WPF.Input nuget package. Then, add the C1MultiSelect control to your page. Observe additional API, such as the MaxDropDownHeight property, SelectionChanged event, and Placeholder text, which give you further capabilities.
<c1:C1MultiSelect x:Name="MultiSelect" DisplayMemberPath="Country" SelectedValuePath="Country"
MaxDropDownHeight="300" ItemsSource="{Binding Customers}"
SelectionChanged="OnSelectionChanged" Placeholder="Country" />
Similarly, in WinForms, look for the C1.Win.Input.MultiSelect nuget package and add the C1MultiSelect control from the toolbox.
For more, check out our samples on GitHub.
Ready to check it out? Download ComponentOne Today!