控件(文本类): 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; }
}
}
控件(文本类): AutoSuggestBox的更多相关文章
- Web控件文本框Reset的功能
在前一篇中<怎样实现Web控件文本框Reset的功能>http://www.cnblogs.com/insus/p/4120889.html Insus.NET只实现了文本框的功能.单个或 ...
- IOS 学习笔记(5) 控件 文本视图(UITextView)的使用方法
相对于UILabell所支持的较短文本内容,UITextView对于长文本的支持更好.UITextView能够以滚动的方式全部浏览到长文本,并且就像UILabel那样,从ISO6,他也提供了对NSAt ...
- 背水一战 Windows 10 (76) - 控件(控件基类): Control - 基础知识, 焦点相关, 运行时获取 ControlTemplate 和 DataTemplate 中的元素
[源码下载] 背水一战 Windows 10 (76) - 控件(控件基类): Control - 基础知识, 焦点相关, 运行时获取 ControlTemplate 和 DataTemplate 中 ...
- 背水一战 Windows 10 (74) - 控件(控件基类): UIElement - 与 CanDrag 相关的事件, 与 AllowDrop 相关的事件
[源码下载] 背水一战 Windows 10 (74) - 控件(控件基类): UIElement - 与 CanDrag 相关的事件, 与 AllowDrop 相关的事件 作者:webabcd 介绍 ...
- 背水一战 Windows 10 (73) - 控件(控件基类): UIElement - 拖放的基本应用, 手动开启 UIElement 的拖放操作
[源码下载] 背水一战 Windows 10 (73) - 控件(控件基类): UIElement - 拖放的基本应用, 手动开启 UIElement 的拖放操作 作者:webabcd 介绍背水一战 ...
- 背水一战 Windows 10 (77) - 控件(控件基类): ContentControl, UserControl, Page
[源码下载] 背水一战 Windows 10 (77) - 控件(控件基类): ContentControl, UserControl, Page 作者:webabcd 介绍背水一战 Windows ...
- 背水一战 Windows 10 (75) - 控件(控件基类): FrameworkElement - 基础知识, 相关事件, HorizontalAlignment, VerticalAlignment
[源码下载] 背水一战 Windows 10 (75) - 控件(控件基类): FrameworkElement - 基础知识, 相关事件, HorizontalAlignment, Vertical ...
- 背水一战 Windows 10 (72) - 控件(控件基类): UIElement - UIElement 的位置, UIElement 的布局, UIElement 的其他特性
[源码下载] 背水一战 Windows 10 (72) - 控件(控件基类): UIElement - UIElement 的位置, UIElement 的布局, UIElement 的其他特性 作者 ...
- 背水一战 Windows 10 (71) - 控件(控件基类): UIElement - RenderTransform(2D变换), Clip(剪裁)
[源码下载] 背水一战 Windows 10 (71) - 控件(控件基类): UIElement - RenderTransform(2D变换), Clip(剪裁) 作者:webabcd 介绍背水一 ...
- 背水一战 Windows 10 (70) - 控件(控件基类): UIElement - Transform3D(3D变换), Projection(3D投影)
[源码下载] 背水一战 Windows 10 (70) - 控件(控件基类): UIElement - Transform3D(3D变换), Projection(3D投影) 作者:webabcd 介 ...
随机推荐
- 添加事件及Event对象的兼容写法
一.事件流 事件流描述的是从页面中接受事件的顺序. IE的事件流是事件冒泡流,而Netscape的事件流是事件捕获流 1.事件冒泡 事件冒泡,即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点) ...
- Eclipse启动时选择workspace设置
由于一直习惯eclipse中只使用一个工作空间,所以一般在eclipse刚刚安装好后第一次启动时,我就钩上了弹出的工作空间选择的对话框中以后不再提示的钩选. 结果这次突然需要用到它的工作空间提示功能了 ...
- window10 安装出现the error code is 2503错误的解决方法
window10 安装出现the error code is 2503错误的解决方法: 设置 C:\WINDOWS\TEMP的权限
- 在Java代码中使用pdfBox将PDF转换为图片
生成图片 // 生成图片 PDDocument pd = PDDocument.load(new File(filePath)); PDFRenderer pdfRenderer = new PDFR ...
- matlab FDR校正
http://home.52brain.com/forum.php?mod=viewthread&tid=27066&page=1#pid170857 http://www.mathw ...
- .net 动态代理的泛型方法支持问题
最近一直在做.net平台下的高速服务框架.其中有一个问题一直困扰着我:通过动态代理RealProxy创建的服务代理,不支持泛型方法调用.比如: 接口声明: public interface IMete ...
- 我的开发框架之ORM框架
今天我想分享一下我自己的ORM框架,虽然谈不是很好,但我个人认为还是蛮好用的,跟大家分享交流一下. 首先说说我对现在主流的ORM框架的一些看法: 优点: 让程序员不再关注数据库细节,专心在业务逻辑上, ...
- .Net Core 自定义序列化格式
序列化对大家来说应该都不陌生,特别是现在大量使用WEBAPI,JSON满天飞,序列化操作应该经常出现在我们的代码上. 而我们最常用的序列化工具应该就是Newtonsoft.Json,当然你用其它工具类 ...
- 拦截PHP各种异常和错误,发生致命错误时进行报警,万事防患于未然
在日常开发中,大多数人的做法是在开发环境时开启调试模式,在产品环境关闭调试模式.在开发的时候可以查看各种错误.异常,但是在线上就把错误显示的关闭. 上面的情形看似很科学,有人解释为这样很安全,别人看不 ...
- express-partials与express4.x不兼容问题
在express中设置view engine为html,express-partials会导致语法不正确,其实只要做一行代码的改动就可以 function renderer(ext){ if(ext[ ...