转载

【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;

来，看看结果。

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

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控件的输入框上。

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

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