当前位置：首页 > news >正文

.Net4.0 WPF中实现下拉框搜索效果

news 2025/8/15 6:04:58

SearchableComboBox.xaml 前端页面代码如下：

<Grid x:Name="SearchableComboBox2" Width="250" Height="30">

<TextBox x:Name="mySelectedItemTextBox" IsReadOnly="True" Padding="5,0,30,0" Background="White" BorderBrush="Silver" BorderThickness="1"/>

<ToggleButton x:Name="myDropDownButton" Width="30" Height="30" HorizontalAlignment="Right" Click="myDropDownButton_Click">
<Path Fill="Black" Data="M 0 0 L 4 4 L 8 0 Z" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</ToggleButton>

<Popup x:Name="myDropDownPopup" Placement="Bottom" PlacementTarget="{Binding ElementName=SearchableComboBox}" AllowsTransparency="True" StaysOpen="False" Width="{Binding ActualWidth, ElementName=SearchableComboBox}">
<Border BorderBrush="Silver" BorderThickness="1" Background="White">
<StackPanel>

<TextBox x:Name="mySearchTextBox" Margin="5" Padding="3" BorderBrush="Silver" BorderThickness="1" TextChanged="mySearchTextBox_TextChanged" KeyDown="mySearchTextBox_KeyDown" />

<ListBox x:Name="myItemsListBox" Height="150" Margin="0,0,0,5" SelectionChanged="myItemsListBox_SelectionChanged" MouseDoubleClick="myItemsListBox_MouseDoubleClick"/>
</StackPanel>
</Border>
</Popup>
</Grid>

</UserControl>

SearchableComboBox.xaml.cs 后端代码如下：

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;

using System.Windows.Media;

namespace Test.Complexs
{
/// <summary>
/// SearchableComboBox.xaml 的交互逻辑
/// </summary>
public partial class SearchableComboBox : UserControl
{
// 原始数据源（实体类集合）
private List<City> _allCities;
// 过滤后的数据源
private ObservableCollection<City> _filteredCities;
// 当前选中的实体
private City _selectedCity;

public SearchableComboBox()
{
InitializeComponent();

// 初始化实体类数据
InitializeData();

// 初始化过滤后的集合
_filteredCities = new ObservableCollection<City>(_allCities);
myItemsListBox.ItemsSource = _filteredCities;
}

/// <summary>
/// 初始化实体类假数据
/// </summary>
private void InitializeData()
{
_allCities = new List<City>
{
new City(1, "北京"),
new City(2, "上海"),
new City(3, "广州"),
new City(4, "深圳"),
new City(5, "杭州"),
new City(6, "南京"),
new City(7, "成都"),
new City(8, "重庆"),
new City(9, "武汉"),
new City(10, "西安"),
new City(11, "苏州"),
new City(12, "郑州"),
new City(13, "青岛"),
new City(14, "长沙"),
new City(15, "天津")
};
}

/// <summary>
/// 下拉按钮点击事件
/// </summary>
private void myDropDownButton_Click(object sender, RoutedEventArgs e)
{
// 切换下拉面板显示状态
myDropDownPopup.IsOpen = !myDropDownPopup.IsOpen;

// 如果打开下拉面板，聚焦到搜索框
if (myDropDownPopup.IsOpen)
{
mySearchTextBox.Focus();
mySearchTextBox.Text = string.Empty;
}
}

/// <summary>
/// 搜索框文本变化事件 - 实时过滤
/// </summary>
private void mySearchTextBox_TextChanged(object sender, TextChangedEventArgs e)
{
FilterItems(mySearchTextBox.Text);
}

/// <summary>
/// 根据搜索文本过滤实体类项目
/// </summary>
private void FilterItems(string searchText)
{
if (string.IsNullOrWhiteSpace(searchText))
{
// 搜索文本为空时显示所有项目
UpdateFilteredItems(_allCities);
}
else
{
// 过滤名称包含搜索文本的实体（不区分大小写）
var filtered = _allCities.Where(city =>
city.Name.IndexOf(searchText, StringComparison.OrdinalIgnoreCase) >= 0).ToList();
UpdateFilteredItems(filtered);
}
}

/// <summary>
/// 更新过滤后的列表
/// </summary>
private void UpdateFilteredItems(List<City> items)
{
_filteredCities.Clear();
foreach (var item in items)
{
_filteredCities.Add(item);
}
}

/// <summary>
/// 列表项选择变化事件
/// </summary>
private void myItemsListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (myItemsListBox.SelectedItem is City selectedCity)
{
// 保存选中的实体
_selectedCity = selectedCity;
// 回显选中项的名称
mySelectedItemTextBox.Text = selectedCity.Name;
// 可以在这里获取选中项的ID
// int selectedId = selectedCity.Id;
// 关闭下拉面板
myDropDownPopup.IsOpen = false;
// 清空选择，以便下次可以选择相同项
myItemsListBox.SelectedItem = null;
}
}

/// <summary>
/// 列表项双击事件
/// </summary>
private void myItemsListBox_MouseDoubleClick(object sender, MouseButtonEventArgs e)
{
if (myItemsListBox.SelectedItem is City selectedCity)
{
_selectedCity = selectedCity;
mySelectedItemTextBox.Text = selectedCity.Name;
myDropDownPopup.IsOpen = false;
myItemsListBox.SelectedItem = null;
}
}

/// <summary>
/// 搜索框按键事件
/// </summary>
private void mySearchTextBox_KeyDown(object sender, KeyEventArgs e)
{
// 按Enter键选择第一个项目
if (e.Key == Key.Enter && _filteredCities.Count > 0)
{
_selectedCity = _filteredCities[0];
mySelectedItemTextBox.Text = _filteredCities[0].Name;
myDropDownPopup.IsOpen = false;
e.Handled = true;
}
// 按Esc键关闭下拉面板
else if (e.Key == Key.Escape)
{
myDropDownPopup.IsOpen = false;
e.Handled = true;
}
// 按向下箭头键聚焦到列表
else if (e.Key == Key.Down && _filteredCities.Count > 0)
{
myItemsListBox.Focus();
myItemsListBox.SelectedIndex = 0;
e.Handled = true;
}
}
}
/// <summary>
/// 城市实体类
/// </summary>
public class City
{
public int Id { get; set; }
public string Name { get; set; }