Silverlight AutoCompleteBox(自动完成输入框控件)使用方法

在微软的Silverlight 开源控件项目“Silverlight Toolkit”中，提供了一个自动完成输入框控件:AutoCompleteBox。

该控件的功能就是完成类似于google,或baidu中的搜索输入框的提示（选项）等功能，如下图所示：



下面是AutoCompleteBox的运行效果图：



好的，下面就简要介绍一下这个控件的使用方法：

首先，我们要新创建一个Silverlight的Application项目，然后要准备一个数据源，也就是当我们输入内容时，弹出的下拉列表框（这里就暂且这么说吧）中显示的相似的提示信息，这里为了方便起见，我直接用其源码示例中的硬编码类来表示数据源，当然后面还会介绍如何使用WCF来加载数据源信息，这里先创建一个Employee（雇员信息）类，如下:




Code


public sealed partial class Employee






{




public string FirstName

{ get; set; }






public string LastName

{ get; set; }




public string DisplayName






{


get






{


return FirstName + " " + LastName;


}


}




public Employee()






{


}




internal Employee(string firstName, string lastName)






{


FirstName = firstName;


LastName = lastName;


}




public override string ToString()






{


return DisplayName;


}






Sample data#region Sample data




public static IEnumerable<Employee> AllExecutives






{


get






{


yield return new Employee("Walid", "Abu-Hadba");


yield return new Employee("J", "Allard");


yield return new Employee("Klaus", "Holse Andersen");


yield return new Employee("Nancy", "Anderson");


yield return new Employee("Brian", "Arbogast");


yield return new Employee("Orlando", "Ayala");


yield return new Employee("Robert J.", "Bach");


yield return new Employee("Martha", "Béjar");


yield return new Employee("Joe", "Belfiore");


yield return new Employee("Sue", "Bevington");


yield return new Employee("Frank H.", "Brod");


yield return new Employee("Brad", "Brooks");


yield return new Employee("Lisa", "Brummel");


yield return new Employee("Tom", "Burt");


yield return new Employee("Chris", "Capossela");


yield return new Employee("Scott", "Charney");


yield return new Employee("Debra", "Chrapaty");


yield return new Employee("Jean-Philippe", "Courtois");


yield return new Employee("Alain", "Crozier");


yield return new Employee("Kurt", "DelBene");


yield return new Employee("Michael", "Delman");


yield return new Employee("Joe", "DeVaan");


yield return new Employee("Gerri", "Elliott");


yield return new Employee("Stephen", "Elop");


yield return new Employee("Ben", "Fathi");


yield return new Employee("Grant", "George");


yield return new Employee("Tom", "Gibbons");


yield return new Employee("L. Michael", "Golden");


yield return new Employee("Alexander", "Gounares");


yield return new Employee("Steve", "Guggenheimer");


yield return new Employee("Anoop", "Gupta");


yield return new Employee("Tony", "Hey");


yield return new Employee("Yasuyuki", "Higuchi");


yield return new Employee("Roz", "Ho");


yield return new Employee("Kathleen", "Hogan");


yield return new Employee("Frank", "Holland");


yield return new Employee("Todd", "Holmdahl");


yield return new Employee("Darren", "Huston");


yield return new Employee("Rajesh", "Jha");


yield return new Employee("Chris", "Jones");


yield return new Employee("Erik", "Jorgensen");


yield return new Employee("Rich", "Kaplan");


yield return new Employee("Bob", "Kelly");


yield return new Employee("Jawad", "Khaki");


yield return new Employee("Shane", "Kim");


yield return new Employee("Peter", "Klein");


yield return new Employee("Mitchell L.", "Koch");


yield return new Employee("Ted", "Kummert");


yield return new Employee("Julie", "Larson-Green");


yield return new Employee("Antoine", "Leblond");


yield return new Employee("Andrew", "Lees");


yield return new Employee("John M.", "Lervik");


yield return new Employee("Lewis", "Levin");


yield return new Employee("Dan'l", "Lewin");


yield return new Employee("Moshe", "Lichtman");


yield return new Employee("Christopher", "Liddell");


yield return new Employee("Steve", "Liffick");


yield return new Employee("Brian", "MacDonald");


yield return new Employee("Ron", "Markezich");


yield return new Employee("Maria", "Martinez");


yield return new Employee("Mich", "Mathews");


yield return new Employee("Don A.", "Mattrick");


yield return new Employee("Joe", "Matz");


yield return new Employee("Brian", "McAndrews");


yield return new Employee("Richard", "McAniff");


yield return new Employee("Yusuf", "Mehdi");


yield return new Employee("Jim", "Minervino");


yield return new Employee("William H.", "Mitchell");


yield return new Employee("Jens Winther", "Moberg");


yield return new Employee("Mindy", "Mount");


yield return new Employee("Bob", "Muglia");


yield return new Employee("Craig", "Mundie");


yield return new Employee("Terry", "Myerson");


yield return new Employee("Satya", "Nadella");


yield return new Employee("Mike", "Nash");


yield return new Employee("Peter", "Neupert");


yield return new Employee("Ray", "Ozzie");


yield return new Employee("Gurdeep", "Singh Pall");


yield return new Employee("Michael", "Park");


yield return new Employee("Umberto", "Paolucci");


yield return new Employee("Sanjay", "Parthasarathy");


yield return new Employee("Pamela", "Passman");


yield return new Employee("Alain", "Peracca");


yield return new Employee("Todd", "Peters");


yield return new Employee("Joe", "Peterson");


yield return new Employee("Marshall C.", "Phelps, Jr.");


yield return new Employee("Scott", "Pitasky");


yield return new Employee("Will", "Poole");


yield return new Employee("Rick", "Rashid");


yield return new Employee("Tami", "Reller");


yield return new Employee("J.", "Ritchie");


yield return new Employee("Enrique", "Rodriguez");


yield return new Employee("Eduardo", "Rosini");


yield return new Employee("Jon", "Roskill");


yield return new Employee("Eric", "Rudder");


yield return new Employee("John", "Schappert");


yield return new Employee("Tony", "Scott");


yield return new Employee("Jeanne", "Sheldon");


yield return new Employee("Harry", "Shum");


yield return new Employee("Steven", "Sinofsky");


yield return new Employee("Brad", "Smith");


yield return new Employee("Mary E.", "Snapp");


yield return new Employee("Amitabh", "Srivastava");


yield return new Employee("Kirill", "Tatarinov");


yield return new Employee("Jeff", "Teper");


yield return new Employee("David", "Thompson");


yield return new Employee("Rick", "Thompson");


yield return new Employee("Brian", "Tobey");


yield return new Employee("David", "Treadwell");


yield return new Employee("B. Kevin", "Turner");


yield return new Employee("David", "Vaskevitch");


yield return new Employee("Bill", "Veghte");


yield return new Employee("Henry P.", "Vigil");


yield return new Employee("Robert", "Wahbe");


yield return new Employee("Todd", "Warren");


yield return new Employee("Allison", "Watson");


yield return new Employee("Blair", "Westlake");


yield return new Employee("Simon", "Witts");


yield return new Employee("Robert", "Youngjohns");


yield return new Employee("Ya-Qin", "Zhang");


yield return new Employee("George", "Zinn");


}


}


#endregion


}




public class SampleEmployeeCollection : ObjectCollection






{


public SampleEmployeeCollection() : base(Employee.AllExecutives)






{}


}

我们从代码中看到，Employee类的静态属性“AllExecutives”最终被绑定在SampleEmployeeCollection构造方法中。
接着为了能够在XAML文件中使用AutoCompleteBox控件，还需要添加相应的DLL引用（请从下载源码包中获取相应的DLL文件并引用到项目中来），如下图所示：


完成了这一步之后，就是将相应的NameSpace添加到XAML的头部，以便于在XAML文件中进行控件定义，如下：

xmlns:controls="clr-namespace:Microsoft.Windows.Controls;assembly=Microsoft.Windows.Controls"

接下来就是引用相应的数据源信息了，如下（SampleEmployeeCollection就是上面CS代码中的雇员信息类）：

<UserControl.Resources>
<samples:SampleEmployeeCollection x:Key="SampleEmployees" />
</UserControl.Resources>
这时该轮到AutoCompleteBox“闪亮登场”了：

<controls:AutoCompleteBox x:Name="autoComplete1" IsTextCompletionEnabled="True" Width="200" Height="25" Grid.Row="0"
Grid.Column="1" Margin="0+0,8+8" HorizontalAlignment="Left" ItemsSource="{StaticResource SampleEmployees}"/>

我们运行一下，看看效果怎么样：



代码很简单，不是吗？下面接着介绍一下上面有关该控件的两个属性：

IsTextCompletionEnabled：该属性为True时，用于将当前被查询到的第一条记录的信息暂时放在控件的输入框中(text属性)，上图中已看到。

ItemsSource：用于绑定相应的数据源信息（{StaticResource SampleEmployees}）

当然如果将该属性设置为False时，则该控件在显示下拉列表时将不在输入框中设置第一条记录信息。这里为了提高一下难度，我们将会自定义一下“提示框”的样式，代码如下（注意其中的AutoCompleteBox.ItemTemplate部分代码）：

<controls:AutoCompleteBox x:Name="autoComplete2" IsTextCompletionEnabled="False" Width="200" Height="25" Grid.Row="1"
Grid.Column="1" Margin="0+0,8+8" HorizontalAlignment="Left" ItemsSource="{StaticResource SampleEmployees}">
<controls:AutoCompleteBox.ItemTemplate>
<DataTemplate>
<Grid Width="200">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
<TextBlock HorizontalAlignment="Left" Foreground="Gray" Text="{Binding FirstName}" Grid.Column="0" />
<TextBlock HorizontalAlignment="Left" Foreground="Gray" Text="{Binding LastName}" Grid.Column="1" />
</Grid>
</DataTemplate>
</controls:AutoCompleteBox.ItemTemplate>
</controls:AutoCompleteBox>

该控件的运行效果如下图所示：



当然，该控件的模版方式还支持外部声明定义，并在控件内部进行引用（通过属性ItemTemplate绑定），下面首先是样式模版的定义：

<StackPanel.Resources>
<DataTemplate x:Key="EmployeeDataTemplate">
<Grid Width="200">
<Grid.Background>
<SolidColorBrush Color="Blue" />
</Grid.Background>
<TextBlock Foreground="#22ffffff" Margin="0+0,8+8" FontSize="14" Text="{Binding DisplayName}" />
<StackPanel HorizontalAlignment="Right" Margin="0+0,8+8">
<TextBlock HorizontalAlignment="Right" Foreground="White"
Text="{Binding FirstName}" Padding="2" />
<TextBlock HorizontalAlignment="Right" Foreground="White"
FontSize="12" Text="{Binding LastName}" Padding="2" />
</StackPanel>
</Grid>
</DataTemplate>
</StackPanel.Resources>

下面是将上述模版绑定到当前AutoCompleteBox挖件的声明代码(注意相应的ItemTemplate属性)：

<controls:AutoCompleteBox x:Name="ArrivalAirport"
MinimumPrefixLength="1" SearchMode="StartsWithCaseSensitive"
IsTextCompletionEnabled="False"
Width="228" Height="25"
HorizontalAlignment="Left" Margin="0+0,8+8"
ItemsSource="{StaticResource SampleEmployees}"
ItemTemplate="{StaticResource EmployeeDataTemplate}" />

其运行的效果如下图所示：



当然上面的控件声明代码中又引入了两个重要的属性，即:

SearchMode：查询方式，其提供了对当前已输入字符的查询方式，有如下几种枚举值：

StartsWithCaseSensitive：以大写已输入字符方式开始。
StartsWith：以已输入字符开始(不区别大小写)。
Contains:是否包含已输入字符
ContainsCaseSensitive:是否包含已输入大写字符.
Equals:是否字符相等
EqualsCaseSensitive:是否大写字符相等


.

MinimumPrefixLength:用于当输入的字符串达到该属性值时，才显示下拉列表框。

上面所演示的三种情况基本上就可以满足我们的日常开发需要了。当然该控件还提供了不少事件，方法属性，来提供更高级的使用方式：

1.对已输入的数据信息进行下拉列表数据自定义的事件。比如该控件提供了Populating来进行相应处理，比如我们在XAML中定义如下代码：

<controls:AutoCompleteBox x:Name="NowAutoComplete" SearchMode="None" Width="200" Height="25" Grid.Column="1"
IsTextCompletionEnabled="True" Grid.Row="3" HorizontalAlignment="Left" Margin="0+0,0+12" />

然后在后台的CS代码中进行下面的事件绑定：

NowAutoComplete.Populating += OnPopulatingSynchronous;

其相应的事件处理代码如下：

private void OnPopulatingSynchronous(object sender, PopulatingEventArgs e)
{
AutoCompleteBox source = (AutoCompleteBox)sender;

source.ItemsSource = new string[]
{
e.Parameter + "后续内容1",
e.Parameter + "后续内容2",
e.Parameter + "后续内容3",
};
}

这时我们运行一下看看效果：



2.在其它控件（Datagrid）中嵌入该控件，代码如下（注意controls:AutoCompleteBox部分）：

<data:DataGrid x:Name="MyDataGrid" AutoGenerateColumns="False" Grid.Column="1" Width="290" Grid.Row="5"
Margin="0+0,0+8" ItemsSource="{StaticResource SampleEmployees}">
<data:DataGrid.Columns>
<data:DataGridTemplateColumn Header="DisplayName">
<data:DataGridTemplateColumn.CellEditingTemplate>
<DataTemplate>
<controls:AutoCompleteBox HorizontalAlignment="Left" Width="180" IsTabStop="True"
ItemsSource="{StaticResource SampleEmployees}"
Text="{Binding DisplayName, Mode=TwoWay}"/>
</DataTemplate>
</data:DataGridTemplateColumn.CellEditingTemplate>
</data:DataGridTemplateColumn>
<data:DataGridTextColumn Binding="{Binding FirstName}" Header="FirstName" />
</data:DataGrid.Columns>
</data:DataGrid>

其运行如下图所示：



最后，我们将话题深入一下，看看如何使用wcf来获取相应的下拉列表数据项。当然这里还是用到了之前讲过的事件“Populating”，不过之前我们还要先创建一个silverlight wcf,如下：



当然，我们在WCF端还是用到了之前创建的Employee类文件（当然为了避免冲突改名为：EmployeeInfo）。另外在服务方法上使用下面代码来实现数据访问：

[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class AutoCompletedService
{
[OperationContract]
public List<EmployeeInfo> GetEmployeeCollection(string name)
{
List<EmployeeInfo> EmpolyeeList = new List<EmployeeInfo>();
foreach (EmployeeInfo ei in (from employeeinfo in EmployeeInfo.AllExecutives
where employeeinfo.DisplayName.StartsWith(name)
select employeeinfo))
{
EmpolyeeList.Add(ei);
}
return EmpolyeeList;
}
}

通过添加WEB服务引用的方式，系统会为我们创建相应的代码类文件，这里就不多说了。下面是Silverlight端的程序代码：

void Page_Loaded(object sender, RoutedEventArgs e)
{
WCFAutoComplete.IsTextCompletionEnabled = false;

WCFAutoComplete.SearchMode = AutoCompleteSearchMode.None;
WCFAutoComplete.Populating += (s, args) =>
{
args.Cancel = true;
AutoCompletedServiceClient acsc = new AutoCompletedServiceClient();
acsc.GetEmployeeCollectionCompleted += new EventHandler<GetEmployeeCollectionCompletedEventArgs>
（acsc_GetEmployeeCollectionCompleted);
acsc.GetEmployeeCollectionAsync(args.Parameter, s);
};
}

相应的返回数据事件处理代码如下：

void acsc_GetEmployeeCollectionCompleted(object sender, GetEmployeeCollectionCompletedEventArgs e)
{
AutoCompleteBox acb = e.UserState as AutoCompleteBox;
if (acb != null && e.Error == null && !e.Cancelled)
{
if (e.Result.Count > 0)
{
List<string> employeeStrList = new List<string>();
foreach(EmployeeInfo employeeinfo in e.Result)
{
employeeStrList.Add(employeeinfo.FirstName + " " + employeeinfo.LastName);
}
acb.ItemsSource = employeeStrList;
acb.PopulateComplete();
}
}
}

运行时的效果如下图所示：



当然这里会有一个问题，就是当我对上面的代码“acb.ItemsSource = employeeStrList;”换成：
“acb.ItemsSource = e.Result;”之后，会出现在下面列表中显示的数据是该类的类型type信息，我想这可能是该控件的一个BUG，即在异步情况下进行数据（源）绑定时信息类型不正确。当然如果您知道是什么问题并有解决方案的话，不妨通过我，这里表示感谢了。

好了，今天的内容就先到这里了，源码下载，请点击这里。

原文链接:http://www.cnblogs.com/daizhj/archive/2008/12/15/1355469.html

作者: daizhj, 代震军

Tags: silverlight,autocompletebox,自动完成输入框

网址: http://daizhj.cnblogs.com/

参考文档：AutoCompleteBox control: The missing guide