Skip to main content الرئيسية المنشئون syncfusion wpf-ui-components-skills syncfusion-wpf-multi-column-dropdown
syncfusion-wpf-multi-column-dropdown Implements Syncfusion WPF Multi Column Dropdown (SfMultiColumnDropDownControl) for displaying searchable dropdown lists with grid view. Use this when creating dropdowns with multiple columns, autocomplete functionality, or filterable data grids in combo boxes. Supports data binding, column configuration, multi-row selection, and popup customization.
الانتقال إلى التثبيت سوق المهارات اكتشف واستكشف مهارات الذكاء الاصطناعي التي بناها المجتمع.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
عرض تفاصيل Prompt يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/syncfusion/wpf-ui-components-skills --skill syncfusion-wpf-multi-column-dropdownيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
تحميل Zip جاري التحميل... المهن ذات الصلة SOC
استنادا إلى تصنيف SOC المهني
name syncfusion-wpf-multi-column-dropdown description Implements Syncfusion WPF Multi Column Dropdown (SfMultiColumnDropDownControl) for displaying searchable dropdown lists with grid view. Use this when creating dropdowns with multiple columns, autocomplete functionality, or filterable data grids in combo boxes. Supports data binding, column configuration, multi-row selection, and popup customization. metadata {"author":"Syncfusion Inc","version":"34.1.29"}
Implementing Syncfusion WPF Multi Column Dropdown
The SfMultiColumnDropDownControl combines a TextBox editor with a powerful SfDataGrid to provide a searchable, filterable dropdown control that displays multiple columns. It supports autocomplete, incremental filtering, single and multi-selection modes, and extensive customization options.
Component Overview
SfMultiColumnDropDownControl is a composite control that embeds a SfDataGrid within a dropdown popup, enabling users to:
Search and filter items by typing in the editorView multiple columns of data in the dropdownSelect single or multiple items from the gridAutocomplete text based on DisplayMemberCustomize popup appearance, columns, and behavior
Key capabilities:
Data binding to any IEnumerable source
Automatic or manual column generation
Case-sensitive and diacritic-sensitive filtering
Complex and indexer property binding
Keyboard navigation and accessibility support
Resizable popup with customizable appearance
When to Use This Skill
Use this skill when you need to:
Create a WPF dropdown that displays multiple columns of data
Implement searchable/filterable dropdown lists with grid view
Build dropdown controls with autocomplete and incremental filtering
Allow users to select items from a multi-column data grid
Create editable dropdowns with complex data binding
Implement dropdowns with single or multi-selection support
Customize dropdown popup appearance and behavior
Add keyboard navigation to dropdown controls
Documentation and Navigation Guide
Getting Started
Setting up the control for the first time
Understanding assembly requirements
Adding control via Designer, XAML, or C#
Creating basic data models
Binding initial ItemsSource
Defining DisplayMember and ValueMember
Assembly deployment (Syncfusion.Data.WPF, Syncfusion.SfGrid.WPF)
Creating WPF application with SfMultiColumnDropDownControl
Adding control via Designer, XAML, and code-behind
Basic ItemsSource binding
DisplayMember and ValueMember configuration
Theme support
Data Binding
Binding data to the dropdown control
Understanding DisplayMember vs ValueMember
Working with complex properties
Using indexer properties
Accessing SelectedItem and SelectedValue
ItemsSource property usage
DisplayMember (visual presentation in editor)
ValueMember (value for SelectedValue property)
Binding collections in XAML and code-behind
Complex property binding (e.g., customerDetails.Name)
Indexer property binding (e.g., Country[0])
Columns Configuration
Configuring dropdown grid columns
Auto-generating or manually defining columns
Customizing column types and templates
Handling AutoGeneratingColumn event
Setting column sizing and width
AutoGenerateColumns property
AutoGenerateColumnMode (Reset, RetainOld, ResetAll, None)
Manually defining columns collection
Column types (GridTextColumn, GridCurrencyColumn, etc.)
AutoGeneratingColumn event for customization
Column templates (HeaderTemplate, CellTemplate)
GridColumnSizer for width management
Editing and Filtering
Enabling autocomplete functionality
Implementing incremental filtering
Configuring search conditions
Filtering based on multiple columns
Customizing editor behavior
AllowAutoComplete for text suggestions
AllowIncrementalFiltering for live filtering
SearchCondition (StartsWith, Contains, Equals)
AllowCaseSensitiveFiltering option
AllowDiacriticSensitiveFiltering option
Editor properties (ReadOnly, AllowNullInput, AllowSpinOnMouseWheel)
FilterRecord method override for custom filtering
SearchText property for multi-column filtering
Selection
Implementing single or multi-selection
Accessing selected items programmatically
Handling selection changes
Customizing multi-select separator
Working with selection events
SelectionMode (Single, Multiple)
SelectedItem, SelectedIndex, SelectedValue properties
SelectedItems collection for multi-select
SelectionChanged event
SeparatorString for multi-select display
TextSelectionOnFocus property
Programmatic selection
Selector column with checkboxes
Popup Customization
Customizing popup appearance
Configuring popup size and resizing
Setting popup background and borders
Handling popup events
Adding custom headers to dropdown
Popup appearance (Background, BorderBrush, BorderThickness)
Popup sizing (PopupHeight, PopupWidth, Min/Max values)
IsAutoPopupSize for automatic sizing
Resizing with resize thumb
PopupContentTemplate and HeaderTemplate
Popup events (Opening, Opened, Closing, Closed)
StaysOpen property
Custom control in dropdown header
Keyboard and Accessibility
Implementing keyboard navigation
Ensuring accessibility compliance
Setting up UI automation
Configuring coded UI tests
Understanding keyboard shortcuts
Keyboard shortcuts (Enter, Esc, F4, Alt+Arrows, Up/Down)
Keyboard navigation patterns
UI Automation support
Coded UI Test properties and methods
QTP (Quick Test Professional) support
Accessibility features
Quick Start
Basic Implementation <Window xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:syncfusion ="http://schemas.syncfusion.com/wpf"
xmlns:local ="clr-namespace:YourNamespace" >
<Window.DataContext >
<local:ViewModel />
</Window.DataContext >
<Grid >
<syncfusion:SfMultiColumnDropDownControl
x:Name ="sfMultiColumn"
Width ="200"
Height ="30"
ItemsSource ="{Binding Orders}"
DisplayMember ="CustomerName"
ValueMember ="OrderID"
SelectedIndex ="0" />
</Grid >
</Window >
Code-Behind Setup using Syncfusion.UI.Xaml.Grid;
using System.Collections.ObjectModel;
namespace YourNamespace
{
public partial class MainWindow : Window
{
public MainWindow ()new SfMultiColumnDropDownControl();
sfMultiColumn.Width = 200 ;
sfMultiColumn.Height = 30 ;
sfMultiColumn.ItemsSource = viewModel.Orders;
sfMultiColumn.DisplayMember = "CustomerName" ;
sfMultiColumn.ValueMember = "OrderID" ;
Root_Grid.Children.Add(sfMultiColumn);
}
}
public class OrderInfo
{
public int OrderID { get ; set ; }
public string CustomerName { get ; set ; }
public string CustomerID { get ; set ; }
public string Country { get ; set ; }
public OrderInfo (int orderId, string customerName, string customerId, string countrypublic class ViewModel
{
public ObservableCollection<OrderInfo> Orders { get ; set ; }
public ViewModel ()new ObservableCollection<OrderInfo>
{
new OrderInfo(1001 , "Maria Anders" , "ALFKI" , "Germany" ),
new OrderInfo(1002 , "Ana Trujilo" , "ANATR" , "Mexico" ),
new OrderInfo(1003 , "Thomas Hardy" , "AROUT" , "UK" )
};
}
}
}
Common Patterns
Pattern 1: Filterable Dropdown with Autocomplete <syncfusion:SfMultiColumnDropDownControl
x:Name ="sfMultiColumn"
ItemsSource ="{Binding Orders}"
DisplayMember ="CustomerName"
ValueMember ="OrderID"
AllowAutoComplete ="True"
AllowIncrementalFiltering ="True"
SearchCondition ="Contains"
SelectedIndex ="0" />
Pattern 2: Multi-Selection Dropdown <syncfusion:SfMultiColumnDropDownControl
x:Name ="sfMultiColumn"
ItemsSource ="{Binding Orders}"
DisplayMember ="CustomerName"
ValueMember ="OrderID"
SelectionMode ="Multiple"
SeparatorString =", " />
var selectedItems = sfMultiColumn.SelectedItems;
sfMultiColumn.SelectedItems.Add(orderItem);
Pattern 3: Custom Columns with Manual Definition <syncfusion:SfMultiColumnDropDownControl
x:Name ="sfMultiColumn"
ItemsSource ="{Binding Orders}"
DisplayMember ="OrderID"
ValueMember ="OrderID"
AutoGenerateColumns ="False" >
<syncfusion:SfMultiColumnDropDownControl.Columns >
<syncfusion:GridTextColumn MappingName ="OrderID" HeaderText ="Order ID" Width ="100" />
<syncfusion:GridTextColumn MappingName ="CustomerName" HeaderText ="Customer" Width ="150" />
<syncfusion:GridCurrencyColumn MappingName ="Amount" HeaderText ="Amount" Width ="120" />
<syncfusion:GridTextColumn MappingName ="Country" Width ="100" />
</syncfusion:SfMultiColumnDropDownControl.Columns >
</syncfusion:SfMultiColumnDropDownControl >
Pattern 4: Customized Popup Appearance <syncfusion:SfMultiColumnDropDownControl
x:Name ="sfMultiColumn"
ItemsSource ="{Binding Orders}"
DisplayMember ="CustomerName"
ValueMember ="OrderID"
PopupHeight ="300"
PopupWidth ="500"
PopupBackground ="WhiteSmoke"
PopupBorderBrush ="SteelBlue"
PopupBorderThickness ="2"
PopupDropDownGridBackground ="White"
IsAutoPopupSize ="False" />
Key Properties
Core Data Properties
ItemsSource : Data source for the dropdown (IEnumerable)DisplayMember : Property path displayed in the editorValueMember : Property path for SelectedValueSelectedItem : Currently selected data objectSelectedIndex : Index of selected item (-1 if none)SelectedValue : Value from SelectedItem based on ValueMemberSelectedItems : Collection of selected items (multi-select mode)
Filtering & Editing
AllowAutoComplete : Enable text auto-completion (default: false)AllowIncrementalFiltering : Filter items based on typed text (default: false)SearchCondition : Filter condition (StartsWith, Contains, Equals)AllowCaseSensitiveFiltering : Case-sensitive filtering (default: false)AllowDiacriticSensitiveFiltering : Diacritic-sensitive filtering (default: true)ReadOnly : Make editor read-only (default: false)AllowNullInput : Allow null values (default: false)SearchText : Current text in editor (read-only)
Column Configuration
AutoGenerateColumns : Auto-generate columns from data (default: true)AutoGenerateColumnMode : Column generation mode (Reset, RetainOld, ResetAll, None)Columns : Collection of manually defined columnsGridColumnSizer : Column width sizing strategy (Auto, Star, None)
Selection
SelectionMode : Single or Multiple selectionSeparatorString : Separator for multi-select display (default: ";")TextSelectionOnFocus : Auto-select text on focus (default: false)
Popup
IsDropDownOpen : Popup open/closed statePopupHeight/PopupWidth : Popup dimensionsPopupMinHeight/PopupMaxHeight : Size constraintsPopupMinWidth/PopupMaxWidth : Size constraintsIsAutoPopupSize : Auto-size based on grid (default: false)PopupBackground : Popup background brushPopupBorderBrush : Popup border brushPopupBorderThickness : Popup border thickness
Behavior
AllowImmediatePopup : Open popup when match found during editingAllowSpinOnMouseWheel : Change selection with mouse wheel (default: true)
Common Use Cases
1. Product Selection with Search Display product catalog with multiple columns (ID, Name, Category, Price), allow users to search by product name with autocomplete.
2. Customer Lookup Show customer information in dropdown (Name, Email, Phone, City), filter incrementally as user types, display selected customer name in editor.
3. Multi-Project Assignment Allow users to select multiple projects from a list showing project code, name, status, and deadline with checkboxes.
4. Invoice Item Selection Dropdown showing items with columns for item code, description, unit price, and stock level, with filtering by item code or description.
5. Employee Directory Searchable employee list with columns for name, department, email, and phone number, with autocomplete on employee name.
6. Report Parameter Selection Display available reports with name, category, and description columns, allow filtering and selection for report generation.
Related Skills
Best Practices
Use ValueMember appropriately : Set ValueMember to a unique identifier property for reliable selection trackingEnable filtering for large datasets : Use AllowIncrementalFiltering to improve usability with many itemsDefine columns manually for control : Set AutoGenerateColumns="False" and define columns for predictable layoutHandle SelectionChanged event : Respond to selection changes for dependent UI updatesSet reasonable popup sizes : Configure PopupHeight/PopupWidth or use IsAutoPopupSize for optimal displayConsider performance : For very large datasets (>1000 items), implement virtualization or server-side filteringTest keyboard navigation : Ensure users can navigate efficiently with keyboard shortcutsProvide clear DisplayMember : Choose a property that clearly identifies items to users
Troubleshooting
Columns not showing : Verify ItemsSource is bound and contains data; check AutoGenerateColumns settingFiltering not working : Ensure AllowIncrementalFiltering="True" and DisplayMember is set correctlyAutocomplete not appearing : Set AllowAutoComplete="True" and verify DisplayMember property exists in dataMulti-select not visible : Set SelectionMode="Multiple" and check SelectedItems collectionPopup not sizing correctly : Adjust PopupHeight/PopupWidth or enable IsAutoPopupSizePerformance issues with large data : Consider data virtualization or limit displayed columns 