控件(文本类): 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 介 ...
随机推荐
- Visio连接数据表实体外键[快捷记录]
打开数据库模型图. 单击“常用”工具栏上的“连接线”工具. 将“连接线”工具放在父表的中心上,使表的四周出现轮廓线,然后拖到子表的中心.当子表出现轮廓线时,松开鼠标按钮. 两个连接点均变为红色,同时父 ...
- [No000064]python 变量命名规范
python源码和其他一些书籍,命名各种个性,没有一个比较统一的命名规范.于是总结了一些,供参考. 模块名: 模块应该使用尽可能短的.全小写命名,可以在模块命名时使用下划线以增强可读性.同样包的命名也 ...
- poj 2528
Mayor's posters Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 56958 Accepted: 16464 ...
- C# 内存信息
Process proc = Process.GetCurrentProcess(); Console.Write("专用工作集内存:"); ...
- Windows7 64位压缩包安装MySQL5.7.9
官网下载64bit MySQL5.7.9压缩包, 解压至安装位置 1. 创建my.ini文件, 内容如下 [mysqld] # Remove leading # and set to the amou ...
- http://www.cnblogs.com/figure9/p/developer-reading-list.html
http://www.cnblogs.com/figure9/p/developer-reading-list.html
- SPM - data analysis
来源: SPM基本原理与使用PPT, 北师大,朱朝喆研究员,http://www.cnblogs.com/haore147/p/3633515.html ❤ First-level analysis: ...
- php中创建和调用webservice接口示例
php中创建和调用webservice接口示例 这篇文章主要介绍了php中创建和调用webservice接口示例,包括webservice基本知识.webservice服务端例子.webservi ...
- centos6下安装dedecms
几经波折,终于安装成功!!! 一.centos6下安装WDCP 1.连接linux 在百度直接搜索下载xshell,通过ssh连接 2.安装wdcp 下载安装wget http://dl.wdlinu ...
- C#开发中Windows域认证登录2(扩展吉日嘎拉GPM系统)
原文地址:http://www.cuiwenyuan.com/shanghai/post/Windows-AD-Logon-Intergrated-into-Jirigala-GPM-DotNet-B ...