背水一戰 Windows 10 (30) - 控制項（文本類）: AutoSuggestBox

[源碼下載]

作者：webabcd


介紹
背水一戰 Windows 10 之 控制項（文本類）

• AutoSuggestBox

示例
Controls/TextControl/AutoSuggestBoxDemo.xaml

<Page
    x:Class="Windows10.Controls.TextControl.AutoSuggestBoxDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows10.Controls.TextControl"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="Transparent">
        <StackPanel Margin="10 0 10 10">

            <TextBlock Margin="5" Text="{x:Bind autoSuggestBox.Text,Mode=OneWay}" />
            <TextBlock Name="lblMsg1" Margin="5" />
            <TextBlock Name="lblMsg2" Margin="5" />
            
            <!--
                AutoSuggestBox - 自動建議文本框（繼承自 Windows.UI.Xaml.Controls.ItemsControl）
                    Header - 可以設置一個純文本，不能命中測試，空 Header 的話不會占用任何空間
                    PlaceholderText - 占位符水印
                    Text - 文本框內顯示的文本
                    AutoMaximizeSuggestionArea - 建議框（即下拉部分）的區域是否最大化
                    MaxSuggestionListHeight - 建議框（即下拉部分）的最大高度
                    IsSuggestionListOpen -  建議框（即下拉部分）是否是打開狀態
                    QueryIcon - 文本框右側顯示的 icon（IconElement 類型），關於 IconElement 請參見 /Controls/IconControl/IconElementDemo.xaml
                        本例中指定為 Find，也就是說設置的是 SymbolIcon 類型（當然也可以指定為 IconElement 的其他派生類型）
            -->
            <AutoSuggestBox Name="autoSuggestBox" Margin="5" ItemsSource="{x:Bind Suggestions}"
                            Header="AutoSuggestBox" PlaceholderText="AutoSuggestBox" QueryIcon="Find">
                <AutoSuggestBox.ItemTemplate>
                    <DataTemplate x:DataType="local:SuggestionModel">
                        <StackPanel Orientation="Horizontal">
                            <Image Source="{x:Bind ImageUrl}" Width="20" Height="20" />
                            <TextBlock Text="{x:Bind Title}" FontSize="20" />
                        </StackPanel>
                    </DataTemplate>
                </AutoSuggestBox.ItemTemplate>
            </AutoSuggestBox>


            <!--
            可以將 QueryIcon 設置為 SymbolIcon 或 FontIcon 或 PathIcon 或 BitmapIcon
            <AutoSuggestBox>
                <AutoSuggestBox.QueryIcon>
                    <BitmapIcon UriSource="" />
                </AutoSuggestBox.QueryIcon>
            </AutoSuggestBox>
            -->
            
        </StackPanel>
    </Grid>
</Page>

Controls/TextControl/AutoSuggestBoxDemo.xaml.cs

/*
 * AutoSuggestBox - 自動建議文本框（繼承自 ItemsControl, 請參見 /Controls/CollectionControl/ItemsControlDemo/）
 *     TextMemberPath - 建議框中的對象映射到文本框中時的欄位名（如果建議框中顯示的只是字元串，就不用設置這個了）
 *     UpdateTextOnSelect - 單擊建議框中的項時，是否將其中的 TextMemberPath 指定的值賦值給文本框
 *     SuggestionChosen - 在建議框（即下拉部分）中選擇了某一項後觸發的事件
 *     TextChanged - 文本框中的輸入文本發生變化時觸發的事件
 *     QuerySubmitted - 用戶提交查詢時觸發的事件（可以通過回車提交，可以通過點擊文本框右側的圖標提交，可以通過在下拉框中選擇某一項提交）
 *
 * 註：SearchBox 棄用了
 */

using System;
using System.Collections.ObjectModel;
using Windows.UI.Xaml.Controls;

namespace Windows10.Controls.TextControl
{
    public sealed partial class AutoSuggestBoxDemo : Page
    {
        public ObservableCollection<SuggestionModel> Suggestions { get; set; } = new ObservableCollection<SuggestionModel>();
     
        public AutoSuggestBoxDemo()
        {
            this.InitializeComponent();
            
            // 數據源有 Title 欄位和 ImageUrl 欄位，當用戶在建議框中選中某一個對象時，會將 Title 欄位指定的值賦值給文本框
            autoSuggestBox.TextMemberPath = "Title";
            // 用戶選中建議框中的對象時，是否將 TextMemberPath 指定的值賦值給文本框
            autoSuggestBox.UpdateTextOnSelect = true;

            autoSuggestBox.TextChanged += autoSuggestBox_TextChanged;
            autoSuggestBox.SuggestionChosen += autoSuggestBox_SuggestionChosen;
            autoSuggestBox.QuerySubmitted += AutoSuggestBox_QuerySubmitted;
        }

        void autoSuggestBox_TextChanged(AutoSuggestBox sender, AutoSuggestBoxTextChangedEventArgs args)
        {
            // 因為用戶的輸入而使得 Text 發生變化
            if (args.Reason == AutoSuggestionBoxTextChangeReason.UserInput)
            {
                Suggestions.Clear();

                // 根據用戶的輸入，修改 AutoSuggestBox 的數據源
                for (int i = 0; i < 10; i++)
                {
                    Suggestions.Add(new SuggestionModel()
                    {
                        Title = (sender.Text + "_" + i.ToString()),
                        ImageUrl = "/Assets/StoreLogo.png"
                    });
                }
            }
            // 通過代碼使 Text 發生變化
            else if (args.Reason == AutoSuggestionBoxTextChangeReason.ProgrammaticChange)
            {

            }
            // 因為用戶在建議框（即下拉部分）選擇了某一項而使得 Text 發生變化
            else if (args.Reason == AutoSuggestionBoxTextChangeReason.SuggestionChosen)
            {

            }
        }

        void autoSuggestBox_SuggestionChosen(AutoSuggestBox sender, AutoSuggestBoxSuggestionChosenEventArgs args)
        {
            // AutoSuggestBoxSuggestionChosenEventArgs
            //     SelectedItem - 在建議框（即下拉部分）中選擇的對象
            lblMsg1.Text = "選中的是：" + ((SuggestionModel)args.SelectedItem).Title;
        }

        private void AutoSuggestBox_QuerySubmitted(AutoSuggestBox sender, AutoSuggestBoxQuerySubmittedEventArgs args)
        {
            lblMsg2.Text = $"用戶提交了查詢, 查詢內容: {args.QueryText}";
            if (args.ChosenSuggestion != null)
            {
                lblMsg2.Text += Environment.NewLine;
                lblMsg2.Text += $"用戶提交了查詢（通過在下拉框中選擇某一項的方式提交）, 查詢內容: {((SuggestionModel)args.ChosenSuggestion).Title}";
            }
        }
    }

    public class SuggestionModel
    {
        public string Title { get; set; }
        public string ImageUrl { get; set; }
    }
}

OK
[源碼下載]