背水一战 Windows 10 (30) - 控件（文本类）: AutoSuggestBox

原文:背水一战 Windows 10 (30) - 控件（文本类）: AutoSuggestBox[源码下载]

[align=center]背水一战 Windows 10 (30) - 控件（文本类）: AutoSuggestBox[/align]

作者：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
[源码下载]