控件(文本类): 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; } } }