5.WPF控件---ComboBox

C# WPF ComboBox 控件详解

ComboBox 是 WPF 中常用的下拉选择控件，允许用户从预定义选项中选择值（单选）或输入自定义文本（可编辑模式）。它结合了文本框和列表框的功能，适用于表单、配置界面等场景。

📌 核心属性

属性	说明	示例
`ItemsSource`	数据源绑定（集合对象）	`ItemsSource="{Binding Users}"`
`SelectedItem`	当前选中项（对象类型）	`SelectedItem="{Binding CurrentUser}"`
`SelectedValue`	当前选中项的值（需设置`SelectedValuePath`）	`SelectedValue="UserId"`
`DisplayMemberPath`	显示文本的属性名	`DisplayMemberPath="UserName"`
`IsEditable`	是否允许输入自定义文本	`IsEditable="True"`
`IsReadOnly`	编辑模式下是否禁止输入（仅选择）	`IsReadOnly="True"`
`Text`	可编辑模式下输入的文本	`Text="{Binding SearchText}"`
`DropDownOpened`	下拉框展开事件	见下方事件说明

🛠 基础用法示例

xml 复制代码

<!-- 绑定数据源的下拉框 -->
<ComboBox 
    ItemsSource="{Binding CountryList}"
    DisplayMemberPath="Name"
    SelectedValuePath="Id"
    SelectedValue="{Binding SelectedCountryId}"
    Width="200"
    Margin="10"/>

效果：

显示 CountryList 中每个对象的 Name 属性
选中项通过 SelectedCountryId 绑定到 ViewModel

⚡ 关键功能详解

数据绑定
- 支持绑定任意 IEnumerable 数据源（如 List<T>、ObservableCollection<T>）
- MVVM 模式 ：通过 SelectedItem 或 SelectedValue 实现双向绑定

自定义项模板 (ItemTemplate)

用 DataTemplate 定制选项的显示样式：

xml 复制代码

<ComboBox ItemsSource="{Binding Products}">
    <ComboBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <Image Source="{Binding IconPath}" Width="20"/>
                <TextBlock Text="{Binding Name}" Margin="5,0"/>
            </StackPanel>
        </DataTemplate>
    </ComboBox.ItemTemplate>
</ComboBox>

可编辑模式 (IsEditable="True)
- 允许用户输入非列表中的值
- 结合 Text 属性获取输入内容
- 示例：实现搜索+选择功能
  xml 复制代码
```
<ComboBox IsEditable="True" Text="{Binding SearchKeyword}"/>
```

分组显示 (GroupStyle)

按属性分组显示选项：

xml 复制代码

<ComboBox ItemsSource="{Binding Employees}">
    <ComboBox.GroupStyle>
        <GroupStyle>
            <GroupStyle.HeaderTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding DeptName}" FontWeight="Bold"/>
                </DataTemplate>
            </GroupStyle.HeaderTemplate>
        </GroupStyle>
    </ComboBox.GroupStyle>
</ComboBox>

🎯 重要事件

事件	触发时机	用途
`SelectionChanged`	选项改变时	处理选择逻辑
`DropDownOpened`	下拉框展开时	动态加载数据
`DropDownClosed`	下拉框关闭时	执行清理操作
`TextChanged`	编辑模式下文本变更时	实时搜索过滤

事件处理示例：

csharp 复制代码

// 动态加载数据（避免初始化卡顿）
private void ComboBox_DropDownOpened(object sender, EventArgs e)
{
    var comboBox = sender as ComboBox;
    if (comboBox.Items.Count == 0)
    {
        comboBox.ItemsSource = LoadDataFromDatabase(); 
    }
}

⚠️ 常见问题及解决方案

绑定失效问题
- 现象：选中项不更新 ViewModel
- 解决：确保绑定模式正确，检查 SelectedItem 或 SelectedValue 的绑定路径

虚拟化性能优化

当选项过多时（>1000条），启用虚拟化：

xml 复制代码

<ComboBox VirtualizingStackPanel.IsVirtualizing="True" 
          VirtualizingStackPanel.VirtualizationMode="Recycling"/>

自定义弹出框样式

通过修改 ControlTemplate 完全重写样式：

xml 复制代码

<ComboBox>
    <ComboBox.Template>
        <ControlTemplate TargetType="ComboBox">
            <!-- 自定义布局（可嵌套Border控件修饰） -->
            <Border x:Name="border" Background="#f0f0f0" CornerRadius="5">
                <!-- 内部结构省略 -->
            </Border>
        </ControlTemplate>
    </ComboBox.Template>
</ComboBox>

输入验证

结合 ValidationRule 实现输入校验：

xml 复制代码

<ComboBox SelectedValue="{Binding Age, ValidatesOnDataErrors=True}">
    <ComboBox.Items>
        <ComboBoxItem>18-25</ComboBoxItem>
        <ComboBoxItem>26-35</ComboBoxItem>
    </ComboBox.Items>
</ComboBox>

💡 进阶技巧

动态过滤选项

通过 CollectionViewSource 实现实时搜索过滤：

csharp 复制代码

var view = CollectionViewSource.GetDefaultView(ItemsSource);
view.Filter = item => ((string)item).Contains(SearchText);

多列下拉框

在 ItemTemplate 中使用 GridView：

xml 复制代码

<ComboBox>
    <ComboBox.ItemTemplate>
        <DataTemplate>
            <GridView>
                <GridViewColumn Header="ID" DisplayMemberBinding="{Binding Id}"/>
                <GridViewColumn Header="Name" DisplayMemberBinding="{Binding Name}"/>
            </GridView>
        </DataTemplate>
    </ComboBox.ItemTemplate>
</ComboBox>

空值处理

添加默认提示项：

csharp 复制代码

var list = new ObservableCollection<string> { "--请选择--" };
list.AddRange(dataList);
ComboBox.ItemsSource = list;

✅ 典型应用场景

国家/城市选择器
分类筛选（如商品分类）
配置选项（如主题切换）
搜索框 + 自动补全
动态加载的分级菜单

通过组合 ComboBox 与 Border 控件（如圆角边框、阴影效果），可快速构建现代化输入界面。例如：
xml 复制代码
<Border CornerRadius="8" BorderBrush="#3498db" Padding="5">
    <ComboBox .../>
</Border>

在 WPF 中，当 ComboBox 的选中项发生变化时，可以通过以下几种方式触发执行函数：

方法 1：使用 SelectionChanged 事件（最常用）

这是最直接的方式，适用于代码后置或简单场景。

XAML：

csharp 复制代码

<ComboBox x:Name="myComboBox" 
          SelectionChanged="ComboBox_SelectionChanged"
          ItemsSource="{Binding Items}"/>

C# 事件处理：

csharp 复制代码

private void ComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    if (myComboBox.SelectedItem != null)
    {
        // 获取选中的值
        var selectedValue = myComboBox.SelectedItem.ToString();
        
        // 调用你的函数
        HandleSelection(selectedValue);
    }
}

private void HandleSelection(string value)
{
    // 执行你的业务逻辑
    MessageBox.Show($"您选择了: {value}");
}