Windows Phone 7 自动完成输入框控件AutoCompleteBox

自动完成输入框控件AutoCompleteBox是一种很常用的控件，它实现了文本框的输入的自动搜索的功能，可以加快用户的输入效率。该控件在微软的Silverlight 开源控件项目“Silverlight Toolkit”中提供了，所以要在Windows Phone 7的应用程序里面要使用这样的一个控件就需要需要引入Toolkit组件，即要加载Microsoft.Phone.Controls.Toolkit.dll的引用。

下面通过两种方式来在Windows Phone 7应用程序上实现AutoCompleteBox控件：

第一种方式：直接的code-behind用List<T>绑定控件

第二种方式：使用MVVM模式用面向对象的方式绑定控件

 

 

模糊查询功能使用了第一种方式

前缀查询功能使用的是第二种方式

 

<phone:PhoneApplicationPage    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"     x:Class="TestingAutoComplete.MainPage"    xmlns:My="clr-namespace:TestingAutoComplete"     mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"    FontFamily="{StaticResource PhoneFontFamilyNormal}"    FontSize="{StaticResource PhoneFontSizeNormal}"    Foreground="{StaticResource PhoneForegroundBrush}"    SupportedOrientations="PortraitOrLandscape" Orientation="Portrait"    shell:SystemTray.IsVisible="True">    <phone:PhoneApplicationPage.Resources>        <My:Names x:Key="Names"></My:Names>    </phone:PhoneApplicationPage.Resources>    <!--LayoutRoot is the root grid where all page content is placed-->    <Grid x:Name="LayoutRoot" Background="Transparent">        <Grid.RowDefinitions>            <RowDefinition Height="Auto"/>            <RowDefinition Height="*"/>        </Grid.RowDefinitions>        <controls:Pivot Title="AutoCompleteBox控件">            <controls:PivotItem Header="模糊" Margin="0">                <Grid>                    <toolkit:AutoCompleteBox Grid.Row="0"    x:Name="people1" Height="70"/>                </Grid>            </controls:PivotItem>            <controls:PivotItem Header="前缀" Margin="0">                <Grid DataContext="{StaticResource Names}">                    <toolkit:AutoCompleteBox                                      Name="people2"                                      ValueMemberBinding="{Binding MyName}"                                     ItemsSource="{ Binding ListOfNames}" >                        <toolkit:AutoCompleteBox.ItemTemplate>                            <DataTemplate>                                <TextBlock Text="{Binding MyName}"></TextBlock>                            </DataTemplate>                        </toolkit:AutoCompleteBox.ItemTemplate>                    </toolkit:AutoCompleteBox>                </Grid>            </controls:PivotItem>        </controls:Pivot>    </Grid></phone:PhoneApplicationPage>

 

注意：

第二种方式的实现添加了下面的引用和绑定

    xmlns:My="clr-namespace:TestingAutoComplete"

    <phone:PhoneApplicationPage.Resources>
        <My:Names x:Key="Names"></My:Names>
    </phone:PhoneApplicationPage.Resources>

                <Grid DataContext="{StaticResource Names}">
                    <toolkit:AutoCompleteBox
                                     Name="people2"
                                     ValueMemberBinding="{Binding MyName}"
                                     ItemsSource="{ Binding ListOfNames}" >
                        <toolkit:AutoCompleteBox.ItemTemplate>
                            <DataTemplate>
                                <TextBlock Text="{Binding MyName}"></TextBlock>
                            </DataTemplate>
                        </toolkit:AutoCompleteBox.ItemTemplate>
                    </toolkit:AutoCompleteBox>
                </Grid>

下面的MainPage.xaml.cs代码是给第一种方式使用的

 

using System;using System.Collections.Generic;using System.Linq;using System.Net;using System.Windows;using System.Windows.Controls;using System.Windows.Documents;using System.Windows.Input;using System.Windows.Media;using System.Windows.Media.Animation;using System.Windows.Shapes;using Microsoft.Phone.Controls;using System.ComponentModel;namespace TestingAutoComplete{    public partial class MainPage : PhoneApplicationPage    {        // Constructor        public MainPage()        {            InitializeComponent();            List<string> names = new List<string>();            string namesString = "Fernando Sucre,Scofield,Alexander Mahone,Theodore Bagwell,Sara Tancredi ,Lincoln Burrows,John Abruzzi,Fluorine";            foreach (var name in namesString.Split(','))                names.Add(name);            this.people1.ItemsSource = names;            this.people1.ItemFilter += SearchCountry;        }        //全局模糊搜索        bool SearchCountry(string search, object value)        {            if (value != null)            {                //如果包含了搜索的字符串则返回true                if (value.ToString().ToLower().IndexOf(search) >= 0)                    return true;            }            // 如果不匹配 返回false            return false;        }    }}

第二种方式使用的类

Name.cs

 

using System;using System.Net;using System.Windows;using System.Windows.Controls;using System.Windows.Documents;using System.Windows.Ink;using System.Windows.Input;using System.Windows.Media;using System.Windows.Media.Animation;using System.Windows.Shapes;namespace TestingAutoComplete{    public class Name    {        public string MyName { get; set; }        public override string ToString()        {            return MyName;        }    }}

Names.cs

 

using System;using System.Net;using System.Windows;using System.Windows.Controls;using System.Windows.Documents;using System.Windows.Ink;using System.Windows.Input;using System.Windows.Media;using System.Windows.Media.Animation;using System.Windows.Shapes;using System.ComponentModel;using System.Collections.ObjectModel;namespace TestingAutoComplete{    public class Names : INotifyPropertyChanged    {        public event PropertyChangedEventHandler PropertyChanged;        private ObservableCollection<Name> _listOfnames;        public ObservableCollection<Name> ListOfNames        {            get { return _listOfnames; }            set            {                _listOfnames = value;                if (PropertyChanged != null)                    PropertyChanged(this, new PropertyChangedEventArgs("ListOfNames"));            }        }        public Names()        {            ListOfNames = new ObservableCollection<Name>();            string namesString = "Fernando Sucre,Scofield,Alexander Mahone,Theodore Bagwell,Sara Tancredi ,Lincoln Burrows,John Abruzzi,Fluorine";            foreach (var name in namesString.Split(','))                ListOfNames.Add(new Name() { MyName = name });         }    }}

AutoCompleteBox控件常用方法：

PopulateComplete：通知AutoCompleteBox，ItemsSource属性已经确定，数据可以被过滤用以在下拉框中提供可能合适的匹配选项

。

组件常用属性：

FilterMode：获取或设置文本框中的文本怎样被用来过滤具体由为下拉内容准备的ItemsSource属性的项。

IsDropDownOpen：获取或设置一个值用以确定该组件的下拉部分是否已打开。

IsTextCompletionEnabled：该属性的作用是获取或设置一个值用以确定在过滤过程中第一个可能的匹配结果是否自动地被填充至

AutoCompleteBox组件中。有时我们需要第一个匹配的预选对象自动填充至AutoCompleteBox的文本框中，这时就需要通过设置该属

性以达到所需效果。

ItemFilter：获取或设置自定义方法用来使用用户输入的文本来过滤在下拉框中显示的具体由ItemsSource属性所决定的items。

MaxDropDownHeight：获取或设置该组件的下拉部分高度的最大值。

MinimumPopulateDelay：获取或设置第一个匹配结果出现的最小延迟时间。

MinimumPrefixLength：获取或设置需要被键入该组件文本框中的最小字符数量，在该组件显示可能的匹配之前。

SearchText：获取在itemsSource项目集合中被用作过滤项目的文本。

SelectionAdapter：获取或设置用以生成下拉选项部分的选择适配器，通过一个可选择的项目列表。

Text：获取或设置该组件文本框中的值。

TextBoxStyle：获取或设置该组件的文本框的样式。

TextFilter：获取或设置自定义方法用来使用用户输入的文本以基于文本的方式过滤在下拉框中显示的具体由ItemsSource属性所决

定的items。

ValueMemberBinding：获取或设置用于获取对在AutoCompleteBox控制文本框部分显示的值的绑定，为显示在下拉过滤项目。

ValueMemberPath：获取或设置用来获取为在AutoCompleteBox控制文本框部分显示的值的属性的路径，为显示在下拉筛选项目。

组件常用事件：

DropDownClosed：发生于IsDropDownOpen属性由true转为false。

DropDownClosing：发生于IsDropDownOpen属性正在由true转为false。

DropDownOpened：发生于IsDropDownOpen属性由false转为true。

DropDownOpening：发生于IsDropDownOpen属性正在由false转为true。

Populated：发生于当该组件已经生成匹配Text属性的下拉部分时。

Populating：发生于当该组件正在生成匹配Text属性的下拉部分时。

SelectionChanged：发生于当该组件的下拉部分的选项改变时。

TextChanged：发生于当该组件文本框中的值改变时。