在微软的Silverlight 开源控件项目“
Silverlight Toolkit”中,提供了
一个@L_
772_2@完成输入框控件:AutoComplete
Box。
该控件的
功能就是完成类似于google,或baidu中的
搜索输入框的
提示(选项)等
功能,如下图所示:
@H_
404_13@
下面是AutoComplete
Box的运行
效果图:
@H_
404_13@
好的,下面就简要介绍一下这个控件的使用
方法:
首先,我们要新创建
一个Silverlight的Application项目,然后要准备
一个数据源,也就是当我们输入
内容时,弹出的下拉列
表框(这里就暂且这么说吧)中
显示的相似的
提示信息,这里为了方
便起见,我直接用其源码示例中的硬编码类来表示数据源,当
然后面还会介绍如何使用WCF来加载数据源信息,这里先创建
一个employee(雇员信息)类,如下:
@H_
404_13@
@H_
404_13@
Code
@H_404_13@public sealed partial class employee
@H_404_13@@H_404_13@@H_404_13@{
@H_404_13@@H_404_13@ public String FirstName @H_404_13@{ get; set; }
@H_404_13@
@H_404_13@@H_404_13@ public String LastName @H_404_13@{ get; set; }
@H_404_13@
@H_404_13@ public String DisplayName
@H_404_13@@H_404_13@ @H_404_13@{
@H_404_13@ get
@H_404_13@@H_404_13@ @H_404_13@{
@H_404_13@ return FirstName + " " + LastName;
@H_404_13@ }
@H_404_13@ }
@H_404_13@
@H_404_13@ public employee()
@H_404_13@@H_404_13@ @H_404_13@{
@H_404_13@ }
@H_404_13@
@H_404_13@ internal employee(String firstName, String lastName)
@H_404_13@@H_404_13@ @H_404_13@{
@H_404_13@ FirstName = firstName;
@H_404_13@ LastName = lastName;
@H_404_13@ }
@H_404_13@
@H_404_13@ public override String ToString()
@H_404_13@@H_404_13@ @H_404_13@{
@H_404_13@ return DisplayName;
@H_404_13@ }
@H_404_13@
@H_404_13@@H_404_13@ Sample data#region Sample data
@H_404_13@
@H_404_13@ public static IEnumerable<employee> AllExecutives
@H_404_432@@H_404_13@
@H_404_13@ @H_404_13@{
@H_404_13@ get
@H_404_13@@H_404_13@ @H_404_13@{
@H_404_13@ yield return new employee("Walid", "Abu-Hadba");
@H_404_13@ yield return new employee("J", "Allard");
@H_404_13@ yield return new employee("Klaus", "Holse Andersen");
@H_404_13@ yield return new employee("Nancy", "Anderson");
@H_404_13@ yield return new employee("Brian", "Arbogast");
@H_404_13@ yield return new employee("Orlando", "Ayala");
@H_404_13@ yield return new employee("Robert J.", "BACh");
@H_404_13@ yield return new employee("@H_736_256@martha", "Béjar");
@H_404_13@ yield return new employee("Joe", "Belfiore");
@H_404_13@ yield return new employee("Sue", "Bevington");
@H_404_13@ yield return new employee("Frank H.", "Brod");
@H_404_13@ yield return new employee("Brad", "Brooks");
@H_404_13@ yield return new employee("Lisa", "Brummel");
@H_404_13@ yield return new employee("Tom", "Burt");
@H_404_13@ yield return new employee("Chris", "Capossela");
@H_404_13@ yield return new employee("Scott", "Charney");
@H_404_13@ yield return new employee("Debra", "Chrapaty");
@H_404_13@ yield return new employee("jean-Philippe", "Courtois");
@H_404_13@ yield return new employee("Alain", "Crozier");
@H_404_13@ yield return new employee("Kurt", "DelBene");
@H_404_13@ yield return new employee("@H_736_256@michael", "Delman");
@H_404_13@ yield return new employee("Joe", "DeVaan");
@H_404_13@ yield return new employee("Gerri", "Elliott");
@H_404_13@ yield return new employee("Stephen", "Elop");
@H_404_13@ yield return new employee("Ben", "Fathi");
@H_404_13@ yield return new employee("Grant", "George");
@H_404_13@ yield return new employee("Tom", "Gibbons");
@H_404_13@ yield return new employee("l. Michael", "Golden");
@H_404_13@ yield return new employee("Alexander", "Gounares");
@H_404_13@ yield return new employee("Steve", "Guggenheimer");
@H_404_13@ yield return new employee("Anoop", "Gupta");
@H_404_13@ yield return new employee("Tony", "Hey");
@H_404_13@ yield return new employee("Yasuyuki", "Higuchi");
@H_404_13@ yield return new employee("Roz", "Ho");
@H_404_13@ yield return new employee("Kathleen", "Hogan");
@H_404_13@ yield return new employee("Frank", "Holland");
@H_404_13@ yield return new employee("Todd", "Holmdahl");
@H_404_13@ yield return new employee("Darren", "Huston");
@H_404_13@ yield return new employee("Rajesh", "Jha");
@H_404_13@ yield return new employee("Chris", "Jones");
@H_404_13@ yield return new employee("Erik", "Jorgensen");
@H_404_13@ yield return new employee("Rich", "Kaplan");
@H_404_13@ yield return new employee("Bob", "Kelly");
@H_404_13@ yield return new employee("Jawad", "Khaki");
@H_404_13@ yield return new employee("Shane", "Kim");
@H_404_13@ yield return new employee("Peter", "Klein");
@H_404_13@ yield return new employee("@H_736_256@mitcHell l.", "Koch");
@H_404_13@ yield return new employee("Ted", "Kummert");
@H_404_13@ yield return new employee("Julie", "Larson-Green");
@H_404_13@ yield return new employee("Antoine", "Leblond");
@H_404_13@ yield return new employee("Andrew", "Lees");
@H_404_13@ yield return new employee("John m.", "Lervik");
@H_404_13@ yield return new employee("Lewis", "Levin");
@H_404_13@ yield return new employee("Dan'l", "Lewin");
@H_404_13@ yield return new employee("@H_736_256@moshe", "Lichtman");
@H_404_13@ yield return new employee("Christopher", "Liddell");
@H_404_13@ yield return new employee("Steve", "Liffick");
@H_404_13@ yield return new employee("Brian", "@H_736_256@macDonald");
@H_404_13@ yield return new employee("Ron", "@H_736_256
@markezich
");
@H_404_13@ yield return new employee("@H_736_256
@maria
", "@H_736_256
@mar
Tinez
");
@H_404_13@ yield return new employee("@H_736_256
@mich
", "@H_736_256
@mathews
");
@H_404_13@ yield return new employee("Don A.", "@H_736_256
@mattrick
");
@H_404_13@ yield return new employee("Joe", "@H_736_256
@matz
");
@H_404_13@ yield return new employee("Brian", "@H_736_256
@mcAndrews
");
@H_404_13@ yield return new employee("Richard", "@H_736_256
@mcAniff
");
@H_404_13@ yield return new employee("Yusuf", "@H_736_256
@mehdi
");
@H_404_13@ yield return new employee("Jim", "minervino");
@H_404_13@ yield return new employee("William H.", "@H_736_256
@mitc
Hell
");
@H_404_13@ yield return new employee("jens Winther", "@H_736_256
@moberg
");
@H_404_13@ yield return new employee("@H_736_256
@mindy
", "@H_736_256
@mount
");
@H_404_13@ yield return new employee("Bob", "@H_736_256
@muglia
");
@H_404_13@ yield return new employee("Craig", "@H_736_256
@mundie
");
@H_404_13@ yield return new employee("Terry", "@H_736_256
@myerson
");
@H_404_13@ yield return new employee("Satya", "Nadella");
@H_404_13@ yield return new employee("@H_736_256
@mike
", "Nash");
@H_404_13@ yield return new employee("Peter", "Neupert");
@H_404_13@ yield return new employee("Ray", "Ozzie");
@H_404_13@ yield return new employee("Gurdeep", "Singh Pall");
@H_404_13@ yield return new employee("@H_736_256
@michael
", "Park");
@H_404_13@ yield return new employee("Umberto", "Paolucci");
@H_404_13@ yield return new employee("Sanjay", "ParthaSarathy");
@H_404_13@ yield return new employee("Pamela", "Passman");
@H_404_13@ yield return new employee("Alain", "Peracca");
@H_404_13@ yield return new employee("Todd", "Peters");
@H_404_13@ yield return new employee("Joe", "Peterson");
@H_404_13@ yield return new employee("@H_736_256
@marshall C.
", "PHelps, Jr.");
@H_404_13@ yield return new employee("Scott", "Pitasky");
@H_404_13@ yield return new employee("Will", "Poole");
@H_404_13@ yield return new employee("Rick", "Rashid");
@H_404_13@ yield return new employee("Tami", "Reller");
@H_404_13@ yield return new employee("J.", "Ritchie");
@H_404_13@ yield return new employee("Enrique", "Rodriguez");
@H_404_13@ yield return new employee("Eduardo", "Rosini");
@H_404_13@ yield return new employee("Jon", "Roskill");
@H_404_13@ yield return new employee("Eric", "Rudder");
@H_404_13@ yield return new employee("John", "Schappert");
@H_404_13@ yield return new employee("Tony", "Scott");
@H_404_13@ yield return new employee("jeAnne", "SHeldon");
@H_404_13@ yield return new employee("Harry", "Shum");
@H_404_13@ yield return new employee("Steven", "Sinofsky");
@H_404_13@ yield return new employee("Brad", "Smith");
@H_404_13@ yield return new employee("@R_944_11035@ E.", "Snapp");
@H_404_13@ yield return new employee("Amitabh", "Srivastava");
@H_404_13@ yield return new employee("Kirill", "Tatarinov");
@H_404_13@ yield return new employee("jeff", "Teper");
@H_404_13@ yield return new employee("David", "Thompson");
@H_404_13@ yield return new employee("Rick", "Thompson");
@H_404_13@ yield return new employee("Brian", "Tobey");
@H_404_13@ yield return new employee("David", "Treadwell");
@H_404_13@ yield return new employee("B. Kevin", "Turner");
@H_404_13@ yield return new employee("David", "Vaskevitch");
@H_404_13@ yield return new employee("Bill", "Veghte");
@H_404_13@ yield return new employee("Henry P.", "Vigil");
@H_404_13@ yield return new employee("Robert", "Wahbe");
@H_404_13@ yield return new employee("Todd", "Warren");
@H_404_13@ yield return new employee("Allison", "Watson");
@H_404_13@ yield return new employee("Blair", "Westlake");
@H_404_13@ yield return new employee("Simon", "Witts");
@H_404_13@ yield return new employee("Robert", "Youngjohns");
@H_404_13@ yield return new employee("Ya-Qin", "Zhang");
@H_404_13@ yield return new employee("George", "Zinn");
@H_404_13@ }
@H_404_13@ }
@H_404_13@ #endregion
@H_404_13@}
@H_404_13@
@H_404_13@public class SampleemployeeCollection : ObjectCollection
@H_404_13@@H_404_13@@H_404_13@{
@H_404_13@ public SampleemployeeCollection() : base(employee.AllExecutives)
@H_403_4415@@H_404_13@
@H_404_13@ @H_404_13@{}
@H_404_13@}
我们从
代码中看到,
employee类的静态
属性“AllExecutives”最终被绑定在Sample
employeeCollection构造
方法中。
接着为了能够在XAML
文件中使用AutoComplete
Box控件,还需要
添加相应的DLL引用(请从下载源码包中
获取相应的DLL文
件并引用到项目中来),如下图所示:@H_404_13@
@H_
404_13@
完成了这一步之后,就是将
相应的NameSpace
添加到XAML的头部,以
便于在XAML
文件中进行控件定义,如下:
xmlns:controls="clr-namespace:Microsoft.Windows.Controls;assembly=Microsoft.Windows.Controls"
接下来就是引用
相应的数据源信息了,如下(Sample
employeeCollection就是上面CS
代码中的雇员信息类):
<
UserControl.resources
>
<
samples:SampleemployeeCollection
@H_57_
4687@x:Key
="Sampleemployees"
@H_57_
4687@
/>
</
UserControl.resources
>
这时该轮到AutoComplete
Box“闪亮登场”了:
<
controls:AutoCompleteBox
@H_57_
4687@x:Name
="autoComplete1"
@H_57_
4687@ IsTextCompletionEnabled
="True"
@H_57_
4687@ Width
="200"
@H_57_
4687@ Height
="25"
@H_57_
4687@ Grid.Row
="0"
@H_57_
4687@
Grid.
column
="1"
@H_57_
4687@ Margin
="0+0,8+8"
@H_57_
4687@ HorizontalAlignment
="Left"
@H_57_
4687@ Items
source
="
{Staticresource Sampleemployees}
"
/>
我们运行一下,看看
效果怎么样:
@H_
404_13@
代码很简单,不是吗?下面接着介绍一下
上面有关该控件的两个
属性:
IsTextCompletionEnabled:该属性为True时,用于将当前被查询到的第一条记录的信息暂时放在控件的输入框中
(text属性),上图中已看到。
Itemssource:用于绑定相应的数据源信息({Staticresource Sampleemployees})
当然如果将该
属性设置为
false时,则该控件在
显示下拉列表时将不在输入框中设置第一条记录信息。这里为了提
高一下难度,我们将会
自定义一下“
提示框”的样式,
代码如下(注意其中的AutoComplete
Box.ItemTemplate部分
代码):
<
controls:AutoCompleteBox
@H_57_
4687@x:Name
="autoComplete2"
@H_57_
4687@ IsTextCompletionEnabled
="false"
@H_57_
4687@ Width
="200"
@H_57_
4687@ Height
="25"
@H_57_
4687@ Grid.Row
="1"
@H_57_
4687@
Grid.
column
="1"
@H_57_
4687@ Margin
="0+0,8+8"
@H_57_
4687@ HorizontalAlignment
="Left"
@H_57_
4687@ Items
source
="
{Staticresource Sampleemployees}
"
>
<
controls:AutoCompleteBox.ItemTemplate
>
<
DataTemplate
>
<
Grid
@H_57_
4687@Width
="200"
>
<
Grid.columnDeFinitions
>
<
columnDeFinition
@H_57_
4687@Width
="100"
@H_57_
4687@
/>
<
columnDeFinition
@H_57_
4687@Width
="100"
@H_57_
4687@
/>
</
Grid.columnDeFinitions
>
<
TextBlock
@H_57_
4687@HorizontalAlignment
="Left"
@H_57_
4687@ Foreground
="Gray"
@H_57_
4687@
text
="
{Binding FirstNamE}
"
@H_57_
4687@ Grid.
column
="0"
@H_57_
4687@
/>
<
TextBlock
@H_57_
4687@HorizontalAlignment
="Left"
@H_57_
4687@ Foreground
="Gray"
@H_57_
4687@
text
="
{Binding LastNamE}
"
@H_57_
4687@ Grid.
column
="1"
@H_57_
4687@
/>
</
Grid
>
</
DataTemplate
>
</
controls:AutoCompleteBox.ItemTemplate
>
</
controls:AutoCompleteBox
>
该控件的运行
效果如下图所示:
@H_
404_13@
当然,该控件的模版方式还
支持外部声明定义,并在控件内部进行引用(通过
属性ItemTemplate绑定),下面首先
是样式模版的定义:
<
StackPanel.resources
>
<
DataTemplate
@H_57_
4687@x:Key
="employeeDataTemplate"
>
<
Grid
@H_57_
4687@Width
="200"
>
<
Grid.BACkground
>
<
SolidColorBrush
@H_57_
4687@Color
="Blue"
@H_57_
4687@
/>
</
Grid.BACkground
>
<
TextBlock
@H_57_
4687@Foreground
="#22ffffff"
@H_57_
4687@ Margin
="0+0,8+8"
@H_57_
4687@ FontSize
="14"
@H_57_
4687@
text
="
{Binding DisplayNamE}
"
@H_57_
4687@
/>
<
StackPanel
@H_57_
4687@HorizontalAlignment
="Right"
@H_57_
4687@ Margin
="0+0,8+8"
>
<
TextBlock
@H_57_
4687@HorizontalAlignment
="Right"
@H_57_
4687@ Foreground
="White"
@H_57_
4687@
text
="
{Binding FirstNamE}
"
@H_57_
4687@ Padding
="2"
@H_57_
4687@
/>
<
TextBlock
@H_57_
4687@HorizontalAlignment
="Right"
@H_57_
4687@ Foreground
="White"
@H_57_
4687@
FontSize
="12"
@H_57_
4687@
text
="
{Binding LastNamE}
"
@H_57_
4687@ Padding
="2"
@H_57_
4687@
/>
</
StackPanel
>
</
Grid
>
</
DataTemplate
>
</
StackPanel.resources
>
下面是将上述模版绑定到当前AutoComplete
Box挖件的声明
代码(注意
相应的ItemTemplate
属性):
<
controls:AutoCompleteBox
@H_57_
4687@x:Name
="ArrivalAirport"
@H_57_
4687@
MinimumPrefixLength
="1"
@H_57_
4687@ SearchMode
="StartsWithCaseSensitive"
@H_57_
4687@
IsTextCompletionEnabled
="false"
@H_57_
4687@
Width
="228"
@H_57_
4687@ Height
="25"
@H_57_
4687@
HorizontalAlignment
="Left"
@H_57_
4687@ Margin
="0+0,8+8"
@H_57_
4687@
Items
source
="
{Staticresource Sampleemployees}
"
@H_57_
4687@
ItemTemplate
="
{Staticresource employeeDataTemplatE}
"
@H_57_
4687@
/>
其运行的
效果如下图所示:
@H_749_5343@
@H_
404_13@
当然上面的控件声明
代码中又引入了两个重要的
属性,即:
SearchMode:查询方式,其提供了对当前已输入字符的查询方式,有如下几种枚举值:
StartsWithCaseSensitive:以大写已输入字符方式开始。
StartsWith:以已输入字符开始(不区别大小写)。
Contains:是否包含已输入字符
ContainsCaseSensitive:是否包含已输入大写字符.
Equals:是否字符相等
EqualsCaseSensitive:是否大写字符相等
@H_404_13@.
MinimumPrefixLength:用于当输入的字符串达到该属性值时,才显示下拉列表框。
上面所演示的三种情况基本上就可
以满足我们的日常开发需要了。当然该控件还提供了不少事件,
方法
属性,来提供更高级的使用方式:
1.对已输入的数据信息进行下拉列表数据
自定义的事件。比如该控件提供了Popula
Ting来进行相应处理,比
如我们在XAML中定义如下
代码:
<
controls:AutoCompleteBox
@H_57_
4687@x:Name
="NowAutoComplete"
@H_57_
4687@ SearchMode
="None"
@H_57_
4687@ Width
="200"
@H_57_
4687@ Height
="25"
@H_57_
4687@ Grid.
column
="1"
@H_57_
4687@
IsTextCompletionEnabled
="True"
@H_57_
4687@ Grid.Row
="3"
@H_57_
4687@ HorizontalAlignment
="Left"
@H_57_
4687@ Margin
="0+0,0+12"
@H_57_
4687@
/>
然后在
后台的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
"
,
};
}
这时我们运行一下看看
效果:
@H_
404_13@
2.在其它控件(Datagrid)中嵌入该控件,
代码如下(注意controls:AutoComplete
Box部分):
<
data:DataGrid
@H_57_
4687@x:Name
="MyDataGrid"
@H_57_
4687@ AutoGenerate
columns
="false"
@H_57_
4687@ Grid.
column
="1"
@H_57_
4687@ Width
="290"
@H_57_
4687@ Grid.Row
="5"
@H_57_
4687@
Margin
="0+0,0+8"
@H_57_
4687@ Items
source
="
{Staticresource Sampleemployees}
"
>
<
data:DataGrid.columns
>
<
data:DataGridTemplatecolumn
@H_57_
4687@Header
="DisplayName"
>
<
data:DataGridTemplatecolumn.CellEdiTingTemplate
>
<
DataTemplate
>
<
controls:AutoCompleteBox
@H_57_
4687@HorizontalAlignment
="Left"
@H_57_
4687@ Width
="180"
@H_57_
4687@ IsTabStop
="True"
@H_57_
4687@
Items
source
="
{Staticresource Sampleemployees}
"
@H_57_
4687@
Text
="
{Binding DisplayName, Mode=TwoWay}
"
/>
</
DataTemplate
>
</
data:DataGridTemplatecolumn.CellEdiTingTemplate
>
</
data:DataGridTemplatecolumn
>
<
data:DataGridTextcolumn
@H_57_
4687@Binding
="
{Binding FirstNamE}
"
@H_57_
4687@ Header
="FirstName"
@H_57_
4687@
/>
</
data:DataGrid.columns
>
</
data:DataGrid
>
其运行如下图所示:
@H_
404_13@
最后,我们将话题深入一下,看看如何使用wcf来
获取相应的下拉列表数据项。当然这里还是用到了之前
讲过的事件“Popula
Ting”,不过之前我们还要先创建
一个silverlight wcf,如下:
@H_
404_13@
当然,我们在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();
}
}
}
运行时的
效果如下图所示:
@H_
404_13@
当然这里会有
一个问题,就是当我对上面的
代码“
ACB.Items
source =
employeeStrList;”换成:
“
ACB.Items
source = e.Result;”之后,
会出现在下面列表中
显示的数据是该类的类型type信息,我
想这可能是该控件的
一个BUG,即在异步情况下进行数据(源)绑定时信息类型不正确。当然如果您知
道是什么问题并有
解决方案的话,不妨通过我,这里表示感谢了。
好了,今天的
内容就先到这里了,源码下载,请
点击这里。
原文
链接:
http://www.cnblogs.com/daizhj/archive/2008/12/15/1355469.html
作者: daizhj,代震军
Tags: silverlight,autocomplete
Box,@L_
772_2@完成输入框
网址:
http://daizhj.cnblog
s.com/
参
考文档:
AutoCompleteBox control: The missing guide