syncfusion-wpf-combobox

实现 Syncfusion WPF ComboBox（ComboBoxAdv）

全面介绍如何实现 Syncfusion® WPF ComboBoxAdv 控件。这是一种功能强大的下拉组件，允许用户输入值或从列表中选择选项，并支持多选、编辑、自动完成、数据绑定和高级功能。

何时使用此技能

在以下情况下使用此技能：

• 在 WPF 应用程序中实现下拉选择
• 启用多选，并使用复选框或标记
• 添加可编辑下拉框，并支持自动完成
• 使用 MVVM 模式将数据绑定到下拉控件
• 使用模板自定义项的显示方式
• 配置水印（默认文本）作为用户提示
• 为多选显示设置自定义分隔符
• 集成 Expression Blend以便在设计时进行编辑
• 使用 SfSkinManager 或 ThemeStudio 应用主题

组件概览

ComboBoxAdv 控件（Syncfusion.Windows.Tools.Controls.ComboBoxAdv）扩展了标准 WPF 下拉功能，并提供：

主要功能：

• 多选，支持复选框、标记以及“确定/取消”按钮
• 可编辑模式，支持自动完成（建议模式）
• 通过 ItemsSource 进行数据绑定，并支持 DisplayMemberPath
• 标记显示，用于展示选中项并带有关闭图标
• 水印支持（DefaultText 属性）
• 用于多选显示的自定义分隔符
• 适用于复杂 UI 的项模板
• 主题支持，包含内置主题和自定义主题
• Expression Blend 集成，支持在设计时进行编辑

命名空间： Syncfusion.Windows.Tools.Controls
程序集： Syncfusion.Shared.WPF
架构： http://schemas.syncfusion.com/wpf

文档与导航指南

入门

📄 阅读： references/getting-started.md

• 安装和程序集部署
• 通过设计器、XAML 和 C# 添加控件
• 创建数据模型和 ViewModel
• 基本数据绑定模式
• 配置 DisplayMemberPath
• 自定义 ItemTemplate
• 设置和应用主题

选择与多选

📄 阅读： references/selection-multiselection.md

• 单选（SelectedItem、SelectedIndex、SelectedValue）
• 启用多选（AllowMultiSelect）
• 使用 SelectedItems 以编程方式选择
• SelectAll 功能
• 多选的“确定/取消”按钮
• 重写 OnItemChecked/OnItemUnchecked
• 标记支持（EnableToken），用于直观地表示项
• 标记编辑和键盘操作
• 处理 SelectionChanged 事件

编辑与自动完成

📄 阅读： references/editing-autocomplete.md

• 使用 IsEditable 属性输入文本
• 自动完成模式（Suggest、None）
• 动态筛选下拉项
• 支持标记的可编辑模式
• 文本搜索和项匹配

水印与分隔符

📄 阅读： references/watermark-delimiter.md

• 用于水印的 DefaultText 属性
• 自定义 SelectedValueDelimiter
• 使用模式和最佳实践

数据绑定

📄 阅读： references/data-binding.md

• ItemsSource 绑定基础
• 创建兼容 MVVM 的模型和 ViewModel
• DisplayMemberPath 与 ItemTemplate
• ObservableCollection 模式
• 使用 SelectedItems 进行双向绑定
• 实现 INotifyPropertyChanged

自定义与 Blend 支持

📄 阅读： references/customization-blendability.md

• Expression Blend 工作流
• 样式编辑和模板自定义
• 使用 SfSkinManager 应用主题
• 使用 ThemeStudio 创建自定义主题
• 自定义控件外观

快速入门

基本的静态项 ComboBoxAdv

<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">
    <Grid>
        <syncfusion:ComboBoxAdv Height="30" Width="200"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center">
            <syncfusion:ComboBoxItemAdv Content="Denmark" />
            <syncfusion:ComboBoxItemAdv Content="New Zealand" />
            <syncfusion:ComboBoxItemAdv Content="Canada" />
            <syncfusion:ComboBoxItemAdv Content="Russia" />
            <syncfusion:ComboBoxItemAdv Content="Japan" />
        </syncfusion:ComboBoxAdv>
    </Grid>
</Window>

使用 MVVM 的数据绑定 ComboBoxAdv

// Model
public class Country
{
    public string Name { get; set; }
    public string Code { get; set; }
}

// ViewModel
public class ViewModel : INotifyPropertyChanged
{
    private ObservableCollection<Country> countries;
    public ObservableCollection<Country> Countries
    {
        get { return countries; }
        set { countries = value; OnPropertyChanged(nameof(Countries)); }
    }

    public ViewModel()
    {
        Countries = new ObservableCollection<Country>
        {
            new Country { Name = "Denmark", Code = "DK" },
            new Country { Name = "New Zealand", Code = "NZ" },
            new Country { Name = "Canada", Code = "CA" }
        };
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged(string name) =>
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
}

<Window.DataContext>
    <local:ViewModel />
</Window.DataContext>
<syncfusion:ComboBoxAdv ItemsSource="{Binding Countries}"
                        DisplayMemberPath="Name"
                        Height="30" Width="200"/>

常见模式

模式 1：使用标记进行多选

<syncfusion:ComboBoxAdv AllowMultiSelect="True"
                        IsEditable="True"
                        EnableToken="True"
                        ItemsSource="{Binding Items}"
                        DisplayMemberPath="Name"
                        Height="Auto" Width="300"/>

模式 2：支持自动完成的可编辑模式

<syncfusion:ComboBoxAdv IsEditable="True"
                        AutoCompleteMode="Suggest"
                        ItemsSource="{Binding Items}"
                        DisplayMemberPath="Name"
                        Height="30" Width="200"/>

模式 3：带分隔符的水印

<syncfusion:ComboBoxAdv AllowMultiSelect="True"
                        DefaultText="Select items..."
                        SelectedValueDelimiter=" | "
                        ItemsSource="{Binding Items}"
                        DisplayMemberPath="Name"
                        Height="30" Width="300"/>

模式 4：带确定/取消的多选

<syncfusion:ComboBoxAdv AllowMultiSelect="True"
                        AllowSelectAll="True"
                        EnableOKCancel="True"
                        ItemsSource="{Binding Items}"
                        DisplayMemberPath="Name"
                        Height="30" Width="250"/>

关键属性

属性	类型	描述
AllowMultiSelect	bool	启用多项选择
IsEditable	bool	允许输入和编辑文本
EnableToken	bool	将选中项显示为令牌（多选）
AutoCompleteMode	AutoCompleModes	选择 Suggest 或 None 以设置自动完成
DefaultText	string	未选择任何项时显示的水印文本
SelectedValueDelimiter	string	选中项之间的分隔符
ItemsSource	IEnumerable	用于绑定的数据集合
DisplayMemberPath	string	用于显示项的属性路径
SelectedItem	object	当前选中的项
SelectedItems	ObservableCollection	选中项的集合（多选）
SelectedIndex	int	选中项的索引
EnableOKCancel	bool	在下拉列表中显示确定/取消按钮
AllowSelectAll	bool	添加“全选”选项

常见用例

1. 国家/地区选择器 - 使用数据绑定进行单选
2. 标签选择器 - 使用令牌进行多选，以提供视觉反馈
3. 可搜索下拉列表 - 对大型列表启用编辑和自动完成
4. 类别筛选器 - 使用分隔符进行多选
5. 带提示的表单输入 - 使用水印文本引导用户
6. 批量选择 - 使用“全选”和确定/取消进行确认

另请参阅

• Syncfusion WPF ComboBoxAdv 文档
• WPF ComboBoxAdv API 参考