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

概述         在微软的Silverlight 开源控件项目“ Silverlight Toolkit”中，提供了一个自动完成输入框控件:AutoCompleteBox。             该控件的功能就是完成类似于google,或baidu中的搜索输入框的提示（选项）等功能，如下图所示：                             下面是AutoCompleteBox的运行效    
     在微软的Silverlight 开源控件项目“ Silverlight Toolkit”中，提供了一个自动完成输入框控件:autocompletebox。 
     
     该控件的功能就是完成类似于Google,或baIDu中的搜索输入框的提示（选项）等功能，如下图所示：
     
    

     
     
     下面是autocompletebox的运行效果图：
     
    

     
     
     好的，下面就简要介绍一下这个控件的使用方法：
     
     首先，我们要新创建一个Silverlight的Application项目，然后要准备一个数据源，也就是当我们输入内容时，d出的下拉列
表框（这里就暂且这么说吧）中显示的相似的提示信息，这里为了方便起见，我直接用其源码示例中的硬编码类来表示数据源，当
然后面还会介绍如何使用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    总结

以上是内存溢出为你收集整理的Silverlight AutoCompleteBox(自动完成输入框控件)使用方法全部内容，希望文章能够帮你解决Silverlight AutoCompleteBox(自动完成输入框控件)使用方法所遇到的程序开发问题。

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