AutoSuggestBox控件与TextBox控件相似,但,AutoSuggestBox控件可以提供一个下拉列表,用户可以从弹出的下拉列表中选择一个项,并把被选项的内容显示在输入框上。就类似于搜索引擎的输入页面。

在使用AutoSuggestBox控件时,要注意它有几个重要事件。

a、当下拉列表中的项被选择后,会发生SuggestionChosen事件。

b、当在QuerySubmitted的下拉列表中做出选择后,或者单击输入框右边的查找图标(如果有,需自行设置)会提交输入的文本,这时候会发生QuerySubmitted事件,从事件参数的QueryText属性可以获得输入框中要提交的查询文本。

当输入框中的文本发生变化后,会发生TextChanged事件,但是要注意,这个事件比较危险,很容易引发死循环。如果你在处理该事件时修改了控件的Text属性,那么又会再次引发该事件;如果再次引发时又对Text属性进行修改,那么,TextChanged事件就会再引发……这样就很容易进入无限循环。

下面看个例子,XAML如下:

            <AutoSuggestBox Name="ab1" QueryIcon="Find" PlaceholderText="请输入一个单词"
QuerySubmitted="ab1_QuerySubmitted"
SuggestionChosen="ab1_SuggestionChosen"/>

QueryIcon属性指定一个图标,这个图标显示在输入框的右侧。我这里用的“查找”图标。

以下代码处理上述事件:

        private void ab1_QuerySubmitted(AutoSuggestBox sender, AutoSuggestBoxQuerySubmittedEventArgs args)
{
tbmsgForAb1.Text = $"你要查询的内空:{args.QueryText}。";
} private void ab1_SuggestionChosen(AutoSuggestBox sender, AutoSuggestBoxSuggestionChosenEventArgs args)
{
string s = args.SelectedItem as string;
// 将从下拉列表中选择的项放入输入框
sender.Text += s ?? string.Empty;
}

那么,如何为AutoSuggestBox控件设置下拉列表呢。

其实AutoSuggestBox控件是从ItemsControl派生出来的,所以你懂的,就把它当成普通的列表控件对待就行了,既可以手动添加子项,也可以用ItemsSource属性来指定数据源。

比如这样:

        string[] arrsrc = new string[]
{
"as", "at","above","cat","come","flag","girl","good","tool","too","look","book","socket","yellow","you","window","wave"
}; ……
ab1.ItemsSource = arrsrc;

来,看看结果。

AutoSuggestBox类还公开了一个名为TextMemberPath的属性,这个属性又有啥用呢。

刚才说过,AutoSuggestBox控件是从ItemsControl类派生出来的,也就是说,放进AutoSuggestBox的下拉列表中的项不一定是字符串,很有可能是复杂类型的实例,但,文本框中要显示的内容必须是字符串。所以,有了TextMemberPath属性,就可以指定一个属性的名字,这个值就是要从数据源对象的某个属性中去取值。

老周举个例子,比如我定义一个类,用来封装一家快递公司的信息。ExpName属性表示快递公司的名字,PhoneNo属性表示快递公司的电话,ExpIcon表示快递公司的Logo图标。于是就有了这个类定义:

    public class ExpInfo
{
public string ExpName { get; set; }
public string PhoneNo { get; set; }
public ImageSource ExpIcon { get; set; }
}

然后,用XAML声明一个AutoSuggestBox实例。

            <AutoSuggestBox Name="ab2" PlaceholderText="请输入快递公司名字"
QuerySubmitted="ab2_QuerySubmitted"
TextMemberPath="ExpName">
<AutoSuggestBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Image Width="50" Source="{Binding ExpIcon}" />
<StackPanel Grid.Column="1" Margin="7,3,4,3">
<TextBlock FontSize="15" FontWeight="Bold" Text="{Binding ExpName}"/>
<TextBlock>
<Run>电话:</Run>
<Run Text="{Binding PhoneNo}" />
</TextBlock>
</StackPanel>
</Grid>
</DataTemplate>
</AutoSuggestBox.ItemTemplate>
</AutoSuggestBox>

因为下拉列表中要显示的是复杂对象,所以自定义一下ItemTemplate的布局。TextMemberPath="ExpName"表明,当用户从弹出的下拉列表中选择一个项后,AutoSuggestBox控件会从被选项(实为ExpInfo实例)对象的ExpName属性上获取字符串对象,然后显示在AutoSuggestBox控件的输入框上。

当程序运行后,就能看到以下效果。

OK,AutoSuggestBox控件的事,老周就介绍完了。哦,还有,UWP平台其实还沿用了8.1中的一个叫SearchBox的控件,功能也和AutoSuggestBox差不多。

由于博客园的服务器不知道欠了谁的钱,无法上传文件,示例代码我就不发了。大伙们有兴趣的话,可以自行玩耍。

===================================================

博客园服务器今天恢复正常,可以上传文件了,下面补上示例代码。

示例源代码下载

【Win 10应用开发】提供建议列表的输入控件(AutoSuggestBox)的更多相关文章

  1. 【Win 10 应用开发】Toast通知激活应用——前台&后台

    老周最近热衷于讲故事,接下来还是讲故事时间. 有人问我:你上大学的时候,有加入过学生会吗?读大学有没有必要加入学生会? 哎哟,这怎么回答呢,从短期来说,加入学生会有点用,至少可以娱乐一下,运气好的话, ...

  2. 【Win 10应用开发】使用RichEditBox控件应注意的问题

    RichEditBox控件支持对多格式文本进行编辑,一般的文本输入控件可以使用TextBox,不过,如果希望编辑格式较为复杂的文本,就可以考虚使用RichEditBox控件. RichEditBox控 ...

  3. 使用Duilib开发Windows软件(2)——控件的基本介绍

    XML 先学习xml https://www.w3cschool.cn/xml/xml-xml-tutorialhc4o1t5m.html 控件 上图是我们下载的NIM_Duilib_Framewor ...

  4. VS2010/MFC编程入门之五十三(Ribbon界面开发:为Ribbon Bar添加控件)

    前面一节中鸡啄米为大家简单介绍了如何创建Ribbon样式的应用程序框架,本节教程就来初步讲讲怎样为Ribbon Bar添加Ribbon控件. VS2010为Ribbon界面开发提供了Ribbon De ...

  5. iOS 9应用开发教程之使用开关滑块控件以及滚动部署视图

    iOS 9应用开发教程之使用开关滑块控件以及滚动部署视图 使用ios9中的开关.滑块控件 开关和滑块也是用于和用户进行交互的控件.本节将主要讲解这两种控件. ios9开关 开关控件常用来控制某个功能的 ...

  6. VS2010-MFC(Ribbon界面开发:为Ribbon Bar添加控件)

    转自:http://www.jizhuomi.com/software/253.html 前面一节为大家简单介绍了如何创建Ribbon样式的应用程序框架,本节教程就来初步讲讲怎样为Ribbon Bar ...

  7. 使用前端开发工具包WijmoJS - 创建自定义DropDownTree控件(包含源代码)

    概述 最近,有客户向我们请求开发一个前端下拉控件,需求是显示了一个列表,其中包含可由用户单独选择的项目控件,该控件将在下拉列表中显示多选TreeView(树形图). 如今WijmoJS已经实现了该控件 ...

  8. winform快速开发平台 -> 快速绑定ComboBox数据控件

    通常我们在处理编辑窗体时.往往会遇到数据绑定.例如combobox控件绑定数据字典可能是我们经常用到的.然而在我的winform快速开发平台中我是如何处理这个频繁的操作呢? 首先,我们要绑定combo ...

  9. winform快速开发平台 -> 基础组件之分页控件

    一个项目控件主要由及部分的常用组件,当然本次介绍的是通用分页控件. 处理思想:我们在处理分页过程中主要是针对数据库操作. 一般情况主要是传递一些开始位置,当前页数,和数据总页数以及相关关联的业务逻辑. ...

随机推荐

  1. react-router 组件式配置与对象式配置小区别

    1. react-router 对象式配置 和 组件式配置    组件式配置(Redirect) ----对应---- 对象式配置(onEnter钩子) IndexRedirect -----对应-- ...

  2. LINUX篇,设置MYSQL远程访问实用版

    每次设置root和远程访问都容易出现问题, 总结了个通用方法, 关键在于实用 step1: # mysql -u root mysql mysql> Grant all privileges o ...

  3. 关于面试题 Array.indexof() 方法的实现及思考

    这是我在面试大公司时碰到的一个笔试题,当时自己云里雾里的胡写了一番,回头也曾思考过,最终没实现也就不了了之了. 昨天看到有网友说面试中也碰到过这个问题,我就重新思考了这个问题的实现方法. 对于想进大公 ...

  4. 协议森林17 我和你的悄悄话 (SSL/TLS协议)

    作者:Vamei 出处:http://www.cnblogs.com/vamei 转载请先与我联系. TLS名为传输层安全协议(Transport Layer Protocol),这个协议是一套加密的 ...

  5. Angular企业级开发(1)-AngularJS简介

    AngularJS介绍 AngularJS是一个功能完善的JavaScript前端框架,同时是基于MVC(Model-View-Controller理念的框架,使用它能够高效的开发桌面web app和 ...

  6. iOS开发之Alamofire源码深度解析

    今天博客中的Alamofire源码的版本是以现在最新的3.4版本为例.上篇博客系统的对NSURLSession相关的东西进行了详细的解析,详情请看<详解NSURLSession>,为了就是 ...

  7. iOS架构一个中型普通App的一些经验总结

    这一版比较完善的的App终于提交审核了.有时间写写自己的一些经验的总结了.自己主导的从0到比较成型的app到目前来说也只有两个,但是其中的很多东西都是大同小异.基本上是想到了什么就写什么,感觉写的不到 ...

  8. 基于Composer Player 模型加载和相关属性设置

    主要是基于达索软件Composer Player.的基础上做些二次开发. public class ComposerToolBarSetting { public bool AntiAliasingO ...

  9. spring的BeanFactory加载过程

    ApplicationContext spring = new ClassPathXmlApplicationContext("classpath*:spring/applicationCo ...

  10. Raspberry Pi(树莓派)上安装Raspbian(无路由器,无显示器)

    一. 准备工作 1. 树莓派主板 型号:树莓派3 B型 处理器:四核64位ARM Cortex-A53 CPU 内核架构:ARMv8 2. 一张大于8G的TF卡(本人用的是32G的,也作为PiLFS用 ...