Silverlight 3 Toolkit 之 AutoCompleteBox

       autocompletebox（下文简称ACB）控件就像谷歌的搜索框，可以帮助使用者找到相似的查询项（图1），本篇将介绍下面Demo 演示中涉及到一些属性和实例。如果使用Blend 在安装好Toolkit 后会在Assets 菜单中出现ACB 控件（图2），在VS 中需要增加Reference：Microsoft.Windows.Controls.dll 和 System.Windows.Controls 命名空间，即可使用该控件。

图1     

图2

 

Demo 演示：

 

MinimumPopulateDelay 该属性以毫秒为计时单位（默认值为0），用于延迟ACB 响应时间，在输入文字后n秒才会显示匹配信息。

MinimumPrefixLength 用于调整最少录入字符数（默认值为1），在输入n个字符后ACB 开始对数据进行匹配。

IsTextCompletionEnabled 该属性设为True后会对输入的信息进行匹配，并将“第一个”最符合项自动填入输入框中（如下对比图）。

False           

True

FilterMode 用于调整搜索的匹配模式（默认为StartsWith），相关模式如下：

ItemsSource 是一个IEnumerable 用于为控件填充数据，Demo 中第一个ACB 的数据：

autocompletebox.ItemsSource = new string[]  {     "Microsoft Windows 7","Microsoft Expression Blend","Microsoft Silverlight","Silverlight Toolkit","Silverlight SDK"  };

 

ItemTemplate 可为ACB 自定义显示样式（Demo 中第二个ACB 效果），用于这次为ACB 同时填充了3组数据：ID、产品名称、公司名称，所以需要通过ValueMemberPath 告知ACB 以那组数据进行匹配：

<input:autocompletebox x:Name="autocompleteboxWithStyle" FilterMode="Contains" 
ValueMemberPath="ProductName">    <input:autocompletebox.ItemTemplate>       <DataTemplate>          <Grid Width="260" Background="#FF281F1F">             <Grid.ColumnDeFinitions>                <ColumnDeFinition Width="60" />                <ColumnDeFinition Width="200" />             </Grid.ColumnDeFinitions>             <Grid.RowDeFinitions>                <RowDeFinition />                <RowDeFinition />             </Grid.RowDeFinitions>             <TextBlock HorizontalAlignment="Left" Foreground="Gray"  
Text="{Binding ID}" Grid.Column="0" Grid.Row="0"/>             <TextBlock HorizontalAlignment="Center" Foreground="White" 
Text="{Binding ProductName}" Grid.Column="1" Grid.Row="0" FontSize="12"/>             <TextBlock HorizontalAlignment="Right" Foreground="Gray" 
Text="Microsoft" Grid.Column="1" Grid.Row="1"/>          </Grid>       </DataTemplate>    </input:autocompletebox.ItemTemplate>  </input:autocompletebox>

 

通过List<T> 为ACB 填充数据，需使用MicrosoftProducts.cs 类：

List<MicrosoftProducts> productList = new List<MicrosoftProducts>();  productList.Add(new MicrosoftProducts() { ID = 1,ProductName = "Windows XP" });  productList.Add(new MicrosoftProducts() { ID = 2,ProductName = "Windows 7" });  productList.Add(new MicrosoftProducts() { ID = 3,ProductName = "sql Server 2008" });  productList.Add(new MicrosoftProducts() { ID = 4,ProductName = "Visual Studio 2010" });  productList.Add(new MicrosoftProducts() { ID = 5,ProductName = "Silverlight 3" });  productList.Add(new MicrosoftProducts() { ID = 6,ProductName = "Expression Blend 3" });  productList.Add(new MicrosoftProducts() { ID = 7,ProductName = "Silverlight 4" });  productList.Add(new MicrosoftProducts() { ID = 8,ProductName = "Windows Vista" });    autocompleteboxWithStyle.ItemsSource = productList;

 

第三个ACB 使用了DataGrid 显示效果，添加DataGridSelectionAdapter.cs 类，在XAML 中加入程序命名空间 xmlns:samples="clr-namespace:SilverlightToolkit"，为ACB 编写Style 代码（见源程序）：

<input:autocompletebox x:Name="autocompleteboxWithDataGrid" VerticalAlignment="Bottom" 
FilterMode="Contains" ValueMemberPath="ProductName"                          Style="{StaticResource autocompleteboxDataGridTemplate}" />

 

通过ObjectCollection 填充数据（需要添加System.Windows.Controls.Toolkit.dll）：

ObjectCollection productDataGrid = new ObjectCollection();  productDataGrid.Add(new MicrosoftProducts() { ID = 1,ProductName = "Windows XP" });  productDataGrid.Add(new MicrosoftProducts() { ID = 2,ProductName = "Windows 7" });  productDataGrid.Add(new MicrosoftProducts() { ID = 3,ProductName = "sql Server 2008" });  productDataGrid.Add(new MicrosoftProducts() { ID = 4,ProductName = "Visual Studio 2010" });  productDataGrid.Add(new MicrosoftProducts() { ID = 5,ProductName = "Silverlight 3" });  productDataGrid.Add(new MicrosoftProducts() { ID = 6,ProductName = "Expression Blend 3" });  productDataGrid.Add(new MicrosoftProducts() { ID = 7,ProductName = "Silverlight 4" });  productDataGrid.Add(new MicrosoftProducts() { ID = 8,ProductName = "Windows Vista" });    autocompleteboxWithDataGrid.ItemsSource = productDataGrid;

 

源代码下载：

 

参考资料：

AutoCompleteBox control: The missing guide

Introducing the AutoCompleteBox