实例代码下载

效果图如下：

 介绍：

在WPF中缺少一个支持自动完成的控件，最接近的控件是ComboBox ，它也是实现本篇文章的一个基础控件。

背景：

一个自动完成控件允许用户输入文本的时候，控件会尽可能的去查询出一个用户已经输入的文本选择项。最流行的自动完成处理是通过查询这个控件当前文本的开头部分。

它是如何运作：

下面是我们关心的一些ComboBox中的属性：
IsEditable- 这个允许用户在这个控件上输入文本。
StaysOpenOnEdit - 这个将强制ComboBox在输入时保持打开。
IsTextSearchEnabled - 这将使用ComboBox默认的自动完成的行为。

我们通过使用上面的属性结合一个控制延迟查询的时间，和允许用户附加新的数据源的事件，以及一些风格样式，来实现自动完成控件。（AutoComplete.xaml.cs文件中）

 使用这个控件

1. <Window x:Class="Gui.TestWindow" 
2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
4.     xmlns:ctr="clr-namespace:Gui.Controls" 
5.       Title="Auto Complete Test"   
6.       Height="200" Width="300"   
7.       Loaded="Window_Loaded"> 
8.     <StackPanel> 
9.         <StackPanel.Resources> 
10.             <ResourceDictionary   
11.               Source="/Gui.Controls;component/Styles/AutoComplete.Styles.xaml" /> 
12.         </StackPanel.Resources> 
13.           
14.         <Label>Cities:</Label> 
15.         <ctr:AutoComplete x:Name="autoCities"   
16.            SelectedValuePath="CityID" DisplayMemberPath="Name"   
17.            PatternChanged="autoCities_PatternChanged"   
18.            Style="{StaticResource AutoCompleteComboBox}" 
19.            Delay="500"/>   
20.         <!-- can also do binding on selected value --> 
21.     </StackPanel> 
22. </Window> 

 类似一个combobox，自动完成控件利用DisplayMemberPath 和SelectValuePath 属性来绑定具体的数据源

1. /// <summary>  
2. /// occurs when the user stops typing after a delayed timespan  
3. /// </summary>  
4. /// <param name="sender"></param>  
5. /// <param name="args"></param>  
6. protected void autoCities_PatternChanged(object sender,   
7.           Gui.Controls.AutoComplete.AutoCompleteArgs args)  
8. {  
9.     //check  
10.     if (string.IsNullOrEmpty(args.Pattern))  
11.         args.CancelBinding = true;  
12.     else 
13.         args.DataSource = TestWindow.GetCities(args.Pattern);  
14. } 

 我们能利用PatternChanged事件来监听控件上当前输入数据的改变。

有趣的地方：

利用MVVM模式能创建一个任何实体的视图模型，并将其绑定到具有突显属性的数据源上。通过使用样式，这突显的部分将显示在下拉框中。

说明：

代码很简单，很容易看懂。