【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差很少。

 

因爲博客園的服務器不知道欠了誰的錢，沒法上傳文件，示例代碼我就不發了。大夥們有興趣的話，能夠自行玩耍。

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

博客園服務器今天恢復正常，能夠上傳文件了，下面補上示例代碼。

示例源代碼下載