【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差不多。

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

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

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

示例源代码下载

原文地址:https://www.cnblogs.com/tcjiaan/p/4967031.html