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	下拉框展开事件	见下方事件说明

---

🛠 基础用法示例

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

效果：

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

---

⚡ 关键功能详解

1. 数据绑定

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

2. 自定义项模板 (ItemTemplate)

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

   <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>

3. 可编辑模式 (IsEditable="True)

   • 允许用户输入非列表中的值

   • 结合 Text 属性获取输入内容

   • 示例：实现搜索+选择功能

     <ComboBox IsEditable="True" Text="{Binding SearchKeyword}"/>

4. 分组显示 (GroupStyle)

   按属性分组显示选项：

   <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	编辑模式下文本变更时	实时搜索过滤

事件处理示例：

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

---

⚠️ 常见问题及解决方案

1. 绑定失效问题

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

2. 虚拟化性能优化

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

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

3. 自定义弹出框样式

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

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

4. 输入验证

   结合 ValidationRule 实现输入校验：

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

---

💡 进阶技巧

• 动态过滤选项

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

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

• 多列下拉框

  在 ItemTemplate 中使用 GridView：

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

• 空值处理

  添加默认提示项：

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

---

✅ 典型应用场景

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

通过组合 ComboBox 与 Border 控件（如圆角边框、阴影效果），可快速构建现代化输入界面。例如：

<Border CornerRadius="8" BorderBrush="#3498db" Padding="5">
    <ComboBox .../>
</Border>

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

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

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

XAML：

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

C# 事件处理：

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}");
}