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

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

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

     下面是autocompletebox的运行效果图：

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

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

Code

public sealedpartialclass Employee

{

string FirstName

{ get; set; }

LastName

displayName

{

return FirstName + "" LastName;

}

} Employee()

{

}

internal Employee( firstName, lastName)

{

FirstName = firstName;

LastName lastName;

}override ToString()

displayName;

}

Sample data

SampleEmployeeCollection : ObjectCollection

{

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" />
</ >

    这时该轮到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部分代码）：

="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

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

      当然，该控件的模版方式还支持外部声明定义，并在控件内部进行引用（通过属性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 >

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

      ="ArrivalAirport"
                        MinimumPrefixLength    SearchMode ="StartsWithCaseSensitive"
                        IsTextCompletionEnabled
                        Width ="228"
                        HorizontalAlignment
                        ItemsSource
                        ItemTemplate {StaticResource EmployeeDataTemplate} />

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

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

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

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

.

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

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

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

="NowAutoComplete" SearchMode ="None" Grid.Column
IsTextCompletionEnabled ="3" />

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

NowAutoComplete.Populating += OnPopulatingSynchronous;

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

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部分）：

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 >

    其运行如下图所示：

    最后，我们将话题深入一下，看看如何使用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;
     }
}

    通过添加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);
    };
}

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

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();
        }
    }
}

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

    当然这里会有一个问题，就是当我对上面的代码“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

上一篇：【翻译】SILVERLIGHT设计时扩展(注下一篇：silverlight

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

相关推荐