热门:网页模板.net视频教程JQueryMVCjsonExtJs源码示例三级联动JQuery菜单
您现在的位置:.Net中文社区>> Silverlight>>正文内容

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

发布时间:2008年12月24日点击数: 代震军

此实例的源码下载,希望能对你有所帮助!

在微软的Silverlight 开源控件项目“Silverlight Toolkit”中,提供了一个自动完成输入框控件:AutoCompleteBox。 
     
     该控件的功能就是完成类似于google,或baidu中的搜索输入框的提示(选项)等功能,如下图所示:
     
    
     
     
     下面是AutoCompleteBox的运行效果图:
     
    
     
     
     好的,下面就简要介绍一下这个控件的使用方法:
     
     首先,我们要新创建一个Silverlight的Application项目,然后要准备一个数据源,也就是当我们输入内容时,弹出的下拉列
表框(这里就暂且这么说吧)中显示的相似的提示信息,这里为了方便起见,我直接用其源码示例中的硬编码类来表示数据源,当
然后面还会介绍如何使用WCF来加载数据源信息,这里先创建一个Employee(雇员信息)类,如下:

点击展开示例

我们从代码中看到,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部分代码):
点击展开示例
该控件的运行效果如下图所示:
    
   
    
    
      当然,该控件的模版方式还支持外部声明定义,并在控件内部进行引用(通过属性ItemTemplate绑定),下面首先
是样式模版的定义:    
点击展开示例
下面是将上述模版绑定到当前AutoCompleteBox挖件的声明代码(注意相应的ItemTemplate属性):
点击展开示例
其运行的效果如下图所示:
    
   
    
    
    当然上面的控件声明代码中又引入了两个重要的属性,即:
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;
其相应的事件处理代码如下:
点击展开示例

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

   2.在其它控件(Datagrid)中嵌入该控件,代码如下(注意controls:AutoCompleteBox部分):
点击展开示例
其运行如下图所示:
    
   
    
    
    
    最后,我们将话题深入一下,看看如何使用wcf来获取相应的下拉列表数据项。当然这里还是用到了之前
讲过的事件“Populating”,不过之前我们还要先创建一个silverlight wcf,如下:

  
    
    当然,我们在WCF端还是用到了之前创建的Employee类文件(当然为了避免冲突改名为:EmployeeInfo)。
另外在服务方法上使用下面代码来实现数据访问:
点击展开示例

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

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

本站热点业务

更多模板/案例展示

关于我们 | 联系我们 | 团队日志 | 网站地图 | 网站合作