在微软的Silverlight 开源控件项目“ Silverlight Toolkit”中,提供了一个自动完成输入框控件:autocompletebox。
该控件的功能就是完成类似于google,或baidu中的搜索输入框的提示(选项)等功能,如下图所示:
下面是autocompletebox的运行效果图:
好的,下面就简要介绍一下这个控件的使用方法:
首先,我们要新创建一个Silverlight的Application项目,然后要准备一个数据源,也就是当我们输入内容时,弹出的下拉列表框(这里就暂且这么说吧)中显示的相似的提示信息,这里为了方便起见,我直接用其源码示例中的硬编码类来表示数据源,当然后面还会介绍如何使用WCF来加载数据源信息,这里先创建一个Employee(雇员信息)类,如下:
Code
我们从代码中看到,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" />
</ >
samples:SampleEmployeeCollection x:Key ="SampleEmployees" />
</ >
这时该轮到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} " />
Grid.Column ="1" Margin ="0+0,8+8" HorizontalAlignment ="Left" ItemsSource =" {StaticResource SampleEmployees} " />
我们运行一下,看看效果怎么样:
代码很简单,不是吗?下面接着介绍一下上面有关该控件的两个属性:
IsTextCompletionEnabled:该属性为True时,用于将当前被查询到的第一条记录的信息暂时放在控件的输入框中(text属性),上图中已看到。
ItemsSource:用于绑定相应的数据源信息({StaticResource SampleEmployees})
ItemsSource:用于绑定相应的数据源信息({StaticResource SampleEmployees})
当然如果将该属性设置为False时,则该控件在显示下拉列表时将不在输入框中设置第一条记录信息。这里为了提高一下难度,我们将会自定义一下“提示框”的样式,代码如下(注意其中的autocompletebox.ItemTemplate部分代码):
="autoComplete2"
="False"
Grid.Column
controls:autocompletebox.ItemTemplate
DataTemplate
Grid Width ="200"
Grid.ColumnDeFinitions
ColumnDeFinition ="100" TextBlock HorizontalAlignment Foreground ="Gray" Text {Binding FirstName} " Grid.Column {Binding LastName} Grid controls:autocompletebox
Grid.Column
controls:autocompletebox.ItemTemplate
DataTemplate
Grid Width ="200"
Grid.ColumnDeFinitions
ColumnDeFinition ="100" TextBlock HorizontalAlignment Foreground ="Gray" Text {Binding FirstName} " Grid.Column {Binding LastName} Grid controls:autocompletebox
该控件的运行效果如下图所示:
当然,该控件的模版方式还支持外部声明定义,并在控件内部进行引用(通过属性ItemTemplate绑定),下面首先是样式模版的定义:
StackPanel.Resources
DataTemplate ="EmployeeDataTemplate"
Grid.Background
SolidColorBrush Color ="Blue" TextBlock Foreground ="#22ffffff" Margin FontSize ="14" Text {Binding displayName} StackPanel ="Right" Foreground ="White"
Text Padding ="2"
FontSize ="12" StackPanel >
DataTemplate ="EmployeeDataTemplate"
Grid.Background
SolidColorBrush Color ="Blue" TextBlock Foreground ="#22ffffff" Margin FontSize ="14" Text {Binding displayName} StackPanel ="Right" Foreground ="White"
Text Padding ="2"
FontSize ="12" StackPanel >
下面是将上述模版绑定到当前autocompletebox挖件的声明代码(注意相应的ItemTemplate属性):
="ArrivalAirport"
MinimumPrefixLength SearchMode ="StartsWithCaseSensitive"
IsTextCompletionEnabled
Width ="228"
HorizontalAlignment
ItemsSource
ItemTemplate {StaticResource EmployeeDataTemplate} />
MinimumPrefixLength SearchMode ="StartsWithCaseSensitive"
IsTextCompletionEnabled
Width ="228"
HorizontalAlignment
ItemsSource
ItemTemplate {StaticResource EmployeeDataTemplate} />
其运行的效果如下图所示:
当然上面的控件声明代码中又引入了两个重要的属性,即:
SearchMode:查询方式,其提供了对当前已输入字符的查询方式,有如下几种枚举值:
StartsWithCaseSensitive:以大写已输入字符方式开始。
StartsWith:以已输入字符开始(不区别大小写)。
Contains:是否包含已输入字符
ContainsCaseSensitive:是否包含已输入大写字符.
Equals:是否字符相等
EqualsCaseSensitive:是否大写字符相等
.
MinimumPrefixLength:用于当输入的字符串达到该属性值时,才显示下拉列表框。
StartsWithCaseSensitive:以大写已输入字符方式开始。
StartsWith:以已输入字符开始(不区别大小写)。
Contains:是否包含已输入字符
ContainsCaseSensitive:是否包含已输入大写字符.
Equals:是否字符相等
EqualsCaseSensitive:是否大写字符相等
.
MinimumPrefixLength:用于当输入的字符串达到该属性值时,才显示下拉列表框。
上面所演示的三种情况基本上就可以满足我们的日常开发需要了。当然该控件还提供了不少事件,方法属性,来提供更高级的使用方式:
1.对已输入的数据信息进行下拉列表数据自定义的事件。比如该控件提供了Populating来进行相应处理,比如我们在XAML中定义如下代码:
然后在后台的CS代码中进行下面的事件绑定:
其相应的事件处理代码如下:
private
void
OnPopulatingSynchronous(
object
sender, PopulatingEventArgs e)
{
autocompletebox source = (autocompletebox)sender;
source.ItemsSource new string []
{
e.Parameter + " 后续内容1 " arameter 后续内容2 后续内容3 效果:
2.在其它控件(Datagrid)中嵌入该控件,代码如下(注意controls:autocompletebox部分):
其运行如下图所示:
最后,我们将话题深入一下,看看如何使用wcf来获取相应的下拉列表数据项。当然这里还是用到了之前讲过的事件“Populating”,不过之前我们还要先创建一个silverlight wcf,如下:
当然,我们在WCF端还是用到了之前创建的Employee类文件(当然为了避免冲突改名为:EmployeeInfo)。另外在服务方法上使用下面代码来实现数据访问:
通过添加WEB服务引用的方式,系统会为我们创建相应的代码类文件,这里就不多说了。下面是Silverlight端的程序代码:
相应的返回数据事件处理代码如下:
运行时的效果如下图所示:
当然这里会有一个问题,就是当我对上面的代码“acb.ItemsSource = employeeStrList;”换成:
“acb.ItemsSource = e.Result;”之后,会出现在下面列表中显示的数据是该类的类型type信息,我想这可能是该控件的一个BUG,即在异步情况下进行数据(源)绑定时信息类型不正确。当然如果您知道是什么问题并有解决方案的话,不妨通过我,这里表示感谢了。
好了,今天的内容就先到这里了,源码下载,请 点击这里。
原文链接: [url]http://www.cnblogs.com/daizhj/archive/2008/12/15/1355469.html[/url]
作者: daizhj,代震军
Tags: silverlight,autocompletebox,自动完成输入框
网址: [url]http://daizhj.cnblogs.com/[/url]
参考文档: AutoCompleteBox control: The missing guide
{
autocompletebox source = (autocompletebox)sender;
source.ItemsSource new string []
{
e.Parameter + " 后续内容1 " arameter 后续内容2 后续内容3 效果:
2.在其它控件(Datagrid)中嵌入该控件,代码如下(注意controls:autocompletebox部分):
data:DataGrid
="MyDataGrid"
AutoGenerateColumns
="290"
="5"
Margin ItemsSource data:DataGrid.Columns data:DataGridTemplateColumn Header ="displayName" data:DataGridTemplateColumn.CellEditingTemplate
="180" IsTabStop
ItemsSource
Text {Binding displayName, Mode=TwoWay} data:DataGridTemplateColumn data:DataGridTextColumn Binding Header ="FirstName" data:DataGrid >
Margin ItemsSource data:DataGrid.Columns data:DataGridTemplateColumn Header ="displayName" data:DataGridTemplateColumn.CellEditingTemplate
="180" IsTabStop
ItemsSource
Text {Binding displayName, Mode=TwoWay} data:DataGridTemplateColumn data:DataGridTextColumn Binding Header ="FirstName" data:DataGrid >
其运行如下图所示:
最后,我们将话题深入一下,看看如何使用wcf来获取相应的下拉列表数据项。当然这里还是用到了之前讲过的事件“Populating”,不过之前我们还要先创建一个silverlight wcf,如下:
当然,我们在WCF端还是用到了之前创建的Employee类文件(当然为了避免冲突改名为:EmployeeInfo)。另外在服务方法上使用下面代码来实现数据访问:
[ServiceContract(Namespace
""
)]
[AspNetCompatibilityRequirements(RequirementsMode AspNetCompatibilityRequirementsMode.Allowed)]
public class AutoCompletedService
{
[OperationContract]
List < EmployeeInfo > GetEmployeeCollection( name)
{
List EmpolyeeList ();
foreach (EmployeeInfo ei in (from employeeinfo EmployeeInfo.AllExecutives
where employeeinfo.displayName.StartsWith(name)
select employeeinfo))
{
EmpolyeeList.Add(ei);
}
return EmpolyeeList;
}
}
[AspNetCompatibilityRequirements(RequirementsMode AspNetCompatibilityRequirementsMode.Allowed)]
public class AutoCompletedService
{
[OperationContract]
List < EmployeeInfo > GetEmployeeCollection( name)
{
List EmpolyeeList ();
foreach (EmployeeInfo ei in (from employeeinfo EmployeeInfo.AllExecutives
where employeeinfo.displayName.StartsWith(name)
select employeeinfo))
{
EmpolyeeList.Add(ei);
}
return EmpolyeeList;
}
}
通过添加WEB服务引用的方式,系统会为我们创建相应的代码类文件,这里就不多说了。下面是Silverlight端的程序代码:
Page_Loaded(
false
;
WCFAutoComplete.SearchMode AutoCompleteSearchMode.None;
WCFAutoComplete.Populating (s, args) =>
{
args.Cancel true ;
AutoCompletedServiceClient acsc AutoCompletedServiceClient();
acsc.GetEmployeeCollectionCompleted EventHandler GetEmployeeCollectionCompletedEventArgs
(acsc_GetEmployeeCollectionCompleted);
acsc.GetEmployeeCollectionAsync(args.Parameter, s);
};
}
WCFAutoComplete.SearchMode AutoCompleteSearchMode.None;
WCFAutoComplete.Populating (s, args) =>
{
args.Cancel true ;
AutoCompletedServiceClient acsc AutoCompletedServiceClient();
acsc.GetEmployeeCollectionCompleted EventHandler GetEmployeeCollectionCompletedEventArgs
(acsc_GetEmployeeCollectionCompleted);
acsc.GetEmployeeCollectionAsync(args.Parameter, s);
};
}
相应的返回数据事件处理代码如下:
acsc_GetEmployeeCollectionCompleted(
autocompletebox acb
e.UserState
as
autocompletebox;
if (acb != null && e.Error == ! e.Cancelled)
{
(e.Result.Count 0 )
{
List employeeStrList ();
(EmployeeInfo employeeinfo e.Result)
{
employeeStrList.Add(employeeinfo.FirstName employeeinfo.LastName);
}
acb.ItemsSource employeeStrList;
acb.PopulateComplete();
}
}
}
if (acb != null && e.Error == ! e.Cancelled)
{
(e.Result.Count 0 )
{
List employeeStrList ();
(EmployeeInfo employeeinfo e.Result)
{
employeeStrList.Add(employeeinfo.FirstName employeeinfo.LastName);
}
acb.ItemsSource employeeStrList;
acb.PopulateComplete();
}
}
}
运行时的效果如下图所示:
当然这里会有一个问题,就是当我对上面的代码“acb.ItemsSource = employeeStrList;”换成:
“acb.ItemsSource = e.Result;”之后,会出现在下面列表中显示的数据是该类的类型type信息,我想这可能是该控件的一个BUG,即在异步情况下进行数据(源)绑定时信息类型不正确。当然如果您知道是什么问题并有解决方案的话,不妨通过我,这里表示感谢了。
好了,今天的内容就先到这里了,源码下载,请 点击这里。
原文链接: [url]http://www.cnblogs.com/daizhj/archive/2008/12/15/1355469.html[/url]
作者: daizhj,代震军
Tags: silverlight,autocompletebox,自动完成输入框
网址: [url]http://daizhj.cnblogs.com/[/url]
参考文档: AutoCompleteBox control: The missing guide