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的更多相关文章

  1. Web控件文本框Reset的功能

    在前一篇中<怎样实现Web控件文本框Reset的功能>http://www.cnblogs.com/insus/p/4120889.html Insus.NET只实现了文本框的功能.单个或 ...

  2. IOS 学习笔记(5) 控件 文本视图(UITextView)的使用方法

    相对于UILabell所支持的较短文本内容,UITextView对于长文本的支持更好.UITextView能够以滚动的方式全部浏览到长文本,并且就像UILabel那样,从ISO6,他也提供了对NSAt ...

  3. 背水一战 Windows 10 (76) - 控件(控件基类): Control - 基础知识, 焦点相关, 运行时获取 ControlTemplate 和 DataTemplate 中的元素

    [源码下载] 背水一战 Windows 10 (76) - 控件(控件基类): Control - 基础知识, 焦点相关, 运行时获取 ControlTemplate 和 DataTemplate 中 ...

  4. 背水一战 Windows 10 (74) - 控件(控件基类): UIElement - 与 CanDrag 相关的事件, 与 AllowDrop 相关的事件

    [源码下载] 背水一战 Windows 10 (74) - 控件(控件基类): UIElement - 与 CanDrag 相关的事件, 与 AllowDrop 相关的事件 作者:webabcd 介绍 ...

  5. 背水一战 Windows 10 (73) - 控件(控件基类): UIElement - 拖放的基本应用, 手动开启 UIElement 的拖放操作

    [源码下载] 背水一战 Windows 10 (73) - 控件(控件基类): UIElement - 拖放的基本应用, 手动开启 UIElement 的拖放操作 作者:webabcd 介绍背水一战 ...

  6. 背水一战 Windows 10 (77) - 控件(控件基类): ContentControl, UserControl, Page

    [源码下载] 背水一战 Windows 10 (77) - 控件(控件基类): ContentControl, UserControl, Page 作者:webabcd 介绍背水一战 Windows ...

  7. 背水一战 Windows 10 (75) - 控件(控件基类): FrameworkElement - 基础知识, 相关事件, HorizontalAlignment, VerticalAlignment

    [源码下载] 背水一战 Windows 10 (75) - 控件(控件基类): FrameworkElement - 基础知识, 相关事件, HorizontalAlignment, Vertical ...

  8. 背水一战 Windows 10 (72) - 控件(控件基类): UIElement - UIElement 的位置, UIElement 的布局, UIElement 的其他特性

    [源码下载] 背水一战 Windows 10 (72) - 控件(控件基类): UIElement - UIElement 的位置, UIElement 的布局, UIElement 的其他特性 作者 ...

  9. 背水一战 Windows 10 (71) - 控件(控件基类): UIElement - RenderTransform(2D变换), Clip(剪裁)

    [源码下载] 背水一战 Windows 10 (71) - 控件(控件基类): UIElement - RenderTransform(2D变换), Clip(剪裁) 作者:webabcd 介绍背水一 ...

  10. 背水一战 Windows 10 (70) - 控件(控件基类): UIElement - Transform3D(3D变换), Projection(3D投影)

    [源码下载] 背水一战 Windows 10 (70) - 控件(控件基类): UIElement - Transform3D(3D变换), Projection(3D投影) 作者:webabcd 介 ...

随机推荐

  1. Java中的四套读写方案

    一.字节流读写方案 FileInputStream:字节流方式读取文本文件 FileoutputStream:字节流写入硬盘 二.字符流读写方案 FileReader:字符流读取文本 FileWrit ...

  2. jmeter的压力测试

    Apache JMeter是Apache组织开发的基于Java的压力测试工具.用于对软件做压力测试. 以下为压力测试的简单介绍 1.在测试计划下增加一个线程组 2.线程组的内容需要进行编辑,根据压力测 ...

  3. 转:设置Eclipse中的tab键为4个空格的完整方法

    from: https://my.oschina.net/xunxun10/blog/110074   设置Eclipse中的tab键为4个空格的完整方法 收藏 XunXun10 发表于 4年前 阅读 ...

  4. uva131 The Psychic Poker Player

    The Psychic Poker Player Time Limit: 3000MS     64bit IO Format: %lld & %llu Description In 5-ca ...

  5. 学习cocos code ide 的lua编程

    装上了cocos code ide,配了路径之后,建立一个默认lua工程,发现无法调试,报错. 问了别人,在cocos2dconstants.lua的613行插入cc.AsyncTaskPool  = ...

  6. Web APP开发技巧总结

    http://www.admin10000.com/document/6304.html 1. 当网站添加到主屏幕后再点击进行启动时,可隐藏地址栏(从浏览器跳转或输入链接进入并没有此效果) <m ...

  7. Apache Rewrite 拟静态配置

    1.mod_rewrite 简介和配置 Rewirte主要的功能就是实现URL的跳转和隐藏真实地址,基于Perl语言的正则表达式规范.平时帮助我们实现拟静态,拟目录,域名跳转,防止盗链等 2.mod_ ...

  8. git 保存本地更改而不需要推到远程

    git commit 修改到本地分支 repo sync . 更新分支 git checkout local 切换到本地分支 git rebase 远程 更新远程分支到本地并且将本地分支节点推到最顶

  9. 自己的兼容IE系列的console.log

    console.log.apply 在某些浏览器下无法通过if进行验证,只能通过try catch进行验证: window.zlogs = function(){ try{ window.consol ...

  10. jQuery使用.on()无法绑定hover

    发现好像没有hover这个事件,jQuery的hover事件是一个封装,hover算不得一个事件.他只是将mouseover和mouseout合并了用mouseover和mouseout两个配合效果好 ...