如何在ComboBox中实现双列显示，选中后仍保留双列完整内容？

这个问题我之前帮不少开发者解决过——默认ComboBox选中后只会展示单一列的内容，要让它保持双列显示，得根据你用的UI框架来针对性处理，下面分WinForms和WPF两种最常见的场景给你方案：

WinForms 解决方案 #

WinForms默认的ComboBox选中后只会渲染DisplayMember指定的字段，要实现选中后仍显示双列，需要开启自定义绘制：

1. 配置ComboBox的绘制模式
   把ComboBox的DrawMode属性设置为OwnerDrawFixed（固定行高）或OwnerDrawVariable（可变行高），同时设置合适的ItemHeight来容纳双列内容。

2. 绑定包含双列数据的数据源
   不要直接绑定字符串，改用自定义类或匿名类型存储双列信息，比如：

   // 示例：用匿名类型添加双列数据
   comboBox1.Items.Add(new { 编号 = "001", 名称 = "产品A" });
   comboBox1.Items.Add(new { 编号 = "002", 名称 = "产品B" });
   

3. 处理DrawItem事件自定义绘制
   在这个事件里，不管是下拉列表的项还是选中的项，都手动绘制双列内容：

   private void comboBox1_DrawItem(object sender, DrawItemEventArgs e)
   {
       // 绘制背景和焦点框
       e.DrawBackground();
       e.DrawFocusRectangle();
   
       if (e.Index >= 0)
       {
           var item = comboBox1.Items[e.Index] as dynamic;
           // 绘制第一列（编号）
           e.Graphics.DrawString(item.编号, e.Font, Brushes.Black, e.Bounds.Left + 5, e.Bounds.Top + 2);
           // 绘制第二列（名称），偏移100像素避免重叠
           e.Graphics.DrawString(item.名称, e.Font, Brushes.Gray, e.Bounds.Left + 100, e.Bounds.Top + 2);
       }
   }
   

   如果用的是OwnerDrawVariable，还要额外处理MeasureItem事件来设置每行的高度。

WPF 解决方案 #

WPF的ComboBox默认会用SelectionBoxItemTemplate来渲染选中项，默认模板只显示单一字段，所以我们需要自定义选中项的模板：

1. 准备包含双列属性的数据源
   比如定义一个类：

   public class Product
   {
       public string Id { get; set; }
       public string Name { get; set; }
   }
   

   然后绑定到ComboBox的ItemsSource：

   myComboBox.ItemsSource = new List<Product>
   {
       new Product { Id = "001", Name = "产品A" },
       new Product { Id = "002", Name = "产品B" }
   };
   

2. 自定义ItemTemplate和SelectionBoxItemTemplate
   在XAML里同时定义下拉项和选中项的模板，确保两者都显示双列：

   <ComboBox x:Name="myComboBox" Width="220">
       <!-- 下拉列表的项模板 -->
       <ComboBox.ItemTemplate>
           <DataTemplate>
               <Grid>
                   <Grid.ColumnDefinitions>
                       <ColumnDefinition Width="80"/>
                       <ColumnDefinition Width="*"/>
                   </Grid.ColumnDefinitions>
                   <TextBlock Text="{Binding Id}" Grid.Column="0" Margin="5"/>
                   <TextBlock Text="{Binding Name}" Grid.Column="1" Margin="5" Foreground="#666"/>
               </Grid>
           </DataTemplate>
       </ComboBox.ItemTemplate>
       <!-- 选中后的显示模板（关键！必须显式定义） -->
       <ComboBox.SelectionBoxItemTemplate>
           <DataTemplate>
               <Grid>
                   <Grid.ColumnDefinitions>
                       <ColumnDefinition Width="80"/>
                       <ColumnDefinition Width="*"/>
                   </Grid.ColumnDefinitions>
                   <TextBlock Text="{Binding Id}" Grid.Column="0" Margin="5"/>
                   <TextBlock Text="{Binding Name}" Grid.Column="1" Margin="5" Foreground="#666"/>
               </Grid>
           </DataTemplate>
       </ComboBox.SelectionBoxItemTemplate>
   </ComboBox>
   

   这样不管是下拉时还是选中后，都会显示完整的双列内容。

通用注意事项 #

• 数据源必须包含双列的完整信息，不能只存储单一字符串；
• 绘制/布局时要注意列的宽度分配，避免内容重叠；
• 如果是其他UI框架（比如WinUI），思路类似：要么自定义绘制，要么自定义选中项的模板。

内容的提问来源于stack exchange，提问作者drav