【Win 10应用开发】提供建议列表的输入控件（AutoSuggestBox）

 

AutoSuggestBox控件与TextBox控件相似，但，AutoSuggestBox控件可以提供一个下拉列表，用户可以从弹出的下拉列表中选择一个项，并把被选项的内容显示在输入框上。就类似于搜索引擎的输入页面。

在使用AutoSuggestBox控件时，要注意它有几个重要事件。

a、当下拉列表中的项被选择后，会发生SuggestionChosen事件。

b、当在QuerySubmitted的下拉列表中做出选择后，或者单击输入框右边的查找图标（如果有，需自行设置）会提交输入的文本，这时候会发生QuerySubmitted事件，从事件参数的QueryText属性可以获得输入框中要提交的查询文本。

 

当输入框中的文本发生变化后，会发生TextChanged事件，但是要注意，这个事件比较危险，很容易引发死循环。如果你在处理该事件时修改了控件的Text属性，那么又会再次引发该事件；如果再次引发时又对Text属性进行修改，那么，TextChanged事件就会再引发……这样就很容易进入无限循环。

 

下面看个例子，XAML如下：

            <AutoSuggestBox Name="ab1" QueryIcon="Find" PlaceholderText="请输入一个单词"
                            QuerySubmitted="ab1_QuerySubmitted"
                            SuggestionChosen="ab1_SuggestionChosen"/>

QueryIcon属性指定一个图标，这个图标显示在输入框的右侧。我这里用的“查找”图标。

 

以下代码处理上述事件：

        private void ab1_QuerySubmitted(AutoSuggestBox sender, AutoSuggestBoxQuerySubmittedEventArgs args)
        {
            tbmsgForAb1.Text = $"你要查询的内空：{args.QueryText}。";
        }

        private void ab1_SuggestionChosen(AutoSuggestBox sender, AutoSuggestBoxSuggestionChosenEventArgs args)
        {
            string s = args.SelectedItem as string;
            // 将从下拉列表中选择的项放入输入框
            sender.Text += s ?? string.Empty;
        }

 

那么，如何为AutoSuggestBox控件设置下拉列表呢。

其实AutoSuggestBox控件是从ItemsControl派生出来的，所以你懂的，就把它当成普通的列表控件对待就行了，既可以手动添加子项，也可以用ItemsSource属性来指定数据源。

比如这样：

        string[] arrsrc = new string[]
        {
            "as", "at","above","cat","come","flag","girl","good","tool","too","look","book","socket","yellow","you","window","wave"
        };

……
          ab1.ItemsSource = arrsrc;

 

来，看看结果。

 

AutoSuggestBox类还公开了一个名为TextMemberPath的属性，这个属性又有啥用呢。

刚才说过，AutoSuggestBox控件是从ItemsControl类派生出来的，也就是说，放进AutoSuggestBox的下拉列表中的项不一定是字符串，很有可能是复杂类型的实例，但，文本框中要显示的内容必须是字符串。所以，有了TextMemberPath属性，就可以指定一个属性的名字，这个值就是要从数据源对象的某个属性中去取值。

 

老周举个例子，比如我定义一个类，用来封装一家快递公司的信息。ExpName属性表示快递公司的名字，PhoneNo属性表示快递公司的电话，ExpIcon表示快递公司的Logo图标。于是就有了这个类定义：

    public class ExpInfo
    {
        public string ExpName { get; set; }
        public string PhoneNo { get; set; }
        public ImageSource ExpIcon { get; set; }
    }

 

然后，用XAML声明一个AutoSuggestBox实例。

            <AutoSuggestBox Name="ab2" PlaceholderText="请输入快递公司名字"
                            QuerySubmitted="ab2_QuerySubmitted"
                            TextMemberPath="ExpName">
                <AutoSuggestBox.ItemTemplate>
                    <DataTemplate>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="auto"/>
                                <ColumnDefinition />
                            </Grid.ColumnDefinitions>
                            <Image Width="50" Source="{Binding ExpIcon}" />
                            <StackPanel Grid.Column="1" Margin="7,3,4,3">
                                <TextBlock FontSize="15" FontWeight="Bold" Text="{Binding ExpName}"/>
                                <TextBlock>
                                    <Run>电话：</Run>
                                    <Run Text="{Binding PhoneNo}" />
                                </TextBlock>
                            </StackPanel>
                        </Grid>
                    </DataTemplate>
                </AutoSuggestBox.ItemTemplate>
            </AutoSuggestBox>

因为下拉列表中要显示的是复杂对象，所以自定义一下ItemTemplate的布局。TextMemberPath="ExpName"表明，当用户从弹出的下拉列表中选择一个项后，AutoSuggestBox控件会从被选项（实为ExpInfo实例）对象的ExpName属性上获取字符串对象，然后显示在AutoSuggestBox控件的输入框上。

 

当程序运行后，就能看到以下效果。

 

OK，AutoSuggestBox控件的事，老周就介绍完了。哦，还有，UWP平台其实还沿用了8.1中的一个叫SearchBox的控件，功能也和AutoSuggestBox差不多。

 

由于博客园的服务器不知道欠了谁的钱，无法上传文件，示例代码我就不发了。大伙们有兴趣的话，可以自行玩耍。

===================================================

博客园服务器今天恢复正常，可以上传文件了，下面补上示例代码。

示例源代码下载