Silverlight 3 Toolkit 之 AutoCompleteBox

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

       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

总结

以上是内存溢出为你收集整理的Silverlight 3 Toolkit 之 AutoCompleteBox全部内容，希望文章能够帮你解决Silverlight 3 Toolkit 之 AutoCompleteBox所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。