WPF：下拉列表的简单实现

最近在一个WPF项目中用到一个下拉列表，随着用户输入字符而进行显示，使用了绑定等知识，虽然实现比较简单，可是在性能上也是想了很多办法终于才勉强可以用，与大家分享下。

用于页面绑定的模型类：

public class MainWindowModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;

private ObservableCollection<Content> names = new ObservableCollection<Content>();

private bool popupIsOpen = false;

public bool PopupIsOpen
{
get
{
return popupIsOpen;
}

set
{
popupIsOpen = value;

this.PropertyChanged(this, new PropertyChangedEventArgs("PopupIsOpen"));
}
}

public ObservableCollection<Content> Names
{
get
{
return this.names;
}

set
{
this.names = value;

this.PropertyChanged(this, new PropertyChangedEventArgs("Names"));
}
}
}

public class Content
{
private string name=string.Empty;

public string Name
{
get
{
return this.name;
}

set
{
name = value;
}
}
}

后台代码：

/// <summary>
/// MainWindow.xaml 的交互逻辑
/// </summary>
public partial class MainWindow : Window
{
private MainWindowModel model = new MainWindowModel();

private List<BackgroundWorker> threadPool = new List<BackgroundWorker>();

public MainWindow()
{
InitializeComponent();

this.DataContext = model;
}

/// <summary>
/// 在此增加内容
/// </summary>
private void InitialSetValue()
{
this.Dispatcher.BeginInvoke(new Action(() =>
{
this.model.Names.Clear();

for (int i = 0; i < 100; i++)
{
Content content = new Content();

content.Name = i.ToString() + i.ToString() +
i.ToString() + i.ToString() + i.ToString();

this.model.Names.Add(content);
}
}));
}

/// <summary>
/// 下拉菜单消失要清空内容
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void popupContent_Closed(object sender, EventArgs e)
{
this.model.Names.Clear();
}

/// <summary>
/// 文本框失去焦点，下拉列表隐藏
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void textBox1_LostFocus(object sender, RoutedEventArgs e)
{
this.model.PopupIsOpen = false;
}

/// <summary>
/// 文字内容改变，下拉类表出现
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void textBox1_TextChanged(object sender, TextChangedEventArgs e)
{
this.model.PopupIsOpen = true;

if (threadPool.Count > 0)
{
threadPool[0].CancelAsync();
}

threadPool.Clear();

string key = this.textBox1.Text.Trim();

if (string.IsNullOrEmpty(key))
{
this.model.PopupIsOpen = false;

return;
}

BackgroundWorker worker = new BackgroundWorker();

worker.WorkerReportsProgress = true;

worker.WorkerSupportsCancellation = true;

worker.DoWork += (o, p) =>
{
InitialSetValue();

p.Result = this.model.Names;
};

worker.RunWorkerCompleted += (o, p) =>
{
this.model.Names = p.Result as ObservableCollection<Content>;

if (this.model.Names.Count <= 0)
{
this.model.PopupIsOpen = false;
}
};

threadPool.Add(worker);

Thread.Sleep(100);

if (threadPool.Count > 0)
{
threadPool[0].RunWorkerAsync();
}
}

/// <summary>
/// 子项被选中，下拉列表消失
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void item_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
var data = (sender as ListBox).SelectedItem as Content;

if (data == null)
{
this.model.PopupIsOpen = false;

return;
}

try
{
this.textBox1.TextChanged -= new TextChangedEventHandler(textBox1_TextChanged);

var searchtext = data.Name;

this.model.PopupIsOpen = false;
}
catch
{
}
finally
{
this.textBox1.TextChanged += new TextChangedEventHandler(textBox1_TextChanged);
}
}
}

页面代码：

<Window x:Class="TestPopup.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<TextBox Height="38" HorizontalAlignment="Left" Margin="71,89,0,0" LostFocus="textBox1_LostFocus" TextChanged="textBox1_TextChanged"
Name="textBox1" VerticalAlignment="Top" Width="236" />

<Popup Name="popupContent" StaysOpen="False" IsOpen="{Binding PopupIsOpen}" Closed="popupContent_Closed"
Placement="Bottom"  PlacementTarget="{Binding ElementName=textBox1}"  >

<ListBox Name="contentItems" SelectionChanged="item_SelectionChanged"   ItemsSource="{Binding Names}"
MinWidth="{Binding ElementName=textBox1, Path=ActualWidth}">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Margin="5,5" FontSize="15" Text="{Binding Name}" Foreground="Gray"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Popup>
</Grid>
</Window>

效果：



主要注意的有一点，下拉列表消失时一定要清除数据，不然下次显示的时候会很慢。在用的时候找了好久才发现这个问题。 详细工程：http://download.csdn.net/detail/yysyangyangyangshan/4762184