UWP自动填充控件AutoSuggestBox小优化
UWP提供的AutoSuggestBox本身非常好用,在项目中经常用到,但是当我们使用时发现一下不人性化的设置,例子1如下:
<Page
x:Class="SelfInkCanvas.AutoBoxTest"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:SelfInkCanvas"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"> <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<AutoSuggestBox x:Name="autoSuggestBox"
PlaceholderText="输入一个字符"
TextChanged="autoSuggestBox_TextChanged"
SuggestionChosen="autoSuggestBox_SuggestionChosen"
QuerySubmitted="autoSuggestBox_QuerySubmitted"
></AutoSuggestBox>
</Grid>
</Page>
AutoBoxTest.xaml
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation; // “空白页”项模板在 http://go.microsoft.com/fwlink/?LinkId=234238 上有介绍 namespace SelfInkCanvas
{
/// <summary>
/// 可用于自身或导航至 Frame 内部的空白页。
/// </summary>
public sealed partial class AutoBoxTest : Page
{
private ObservableCollection<String> suggestions;
public AutoBoxTest()
{
suggestions = new ObservableCollection<string>();
this.InitializeComponent();
} private void autoSuggestBox_TextChanged(AutoSuggestBox sender, AutoSuggestBoxTextChangedEventArgs args)
{
suggestions.Clear();
suggestions.Add(sender.Text + "");
suggestions.Add(sender.Text + "");
suggestions.Add(sender.Text + "");
suggestions.Add(sender.Text + "");
suggestions.Add(sender.Text + "");
sender.ItemsSource = suggestions; } private void autoSuggestBox_QuerySubmitted(AutoSuggestBox sender, AutoSuggestBoxQuerySubmittedEventArgs args)
{ } private void autoSuggestBox_SuggestionChosen(AutoSuggestBox sender, AutoSuggestBoxSuggestionChosenEventArgs args)
{
}
}
}
AutoBoxTest.xaml.cs
当我们输入字符,查找后在输入框会有相应的补充的选项在下面,当我们使用键盘的”↑“和“↓”去选择选项的时候,会发现我们选不了第3项的选项,应为当我们在选择第一个选项的时候,我们发现在我们的输入框中的字符已经变化为选项的内容,这时又会触发autoSuggestBox_TextChanged事件,重新渲染下拉选项,这对于我们使用键盘操作来说是一个不正确的选项。
所以要求我们的AutoSuggestBox控件在我们选择的时候不会在触发autoSuggestBox_TextChanged事件,只有当我们完成后在使用,因此我们需要对autoSuggestBox_TextChanged事件做一下相应的控制处理。需要明白,当我们选中选项的时候会触发autoSuggestBox_SuggestionChosen事件,而且是每一行多会触发。
因此我们优化后台代码如下:
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation; // “空白页”项模板在 http://go.microsoft.com/fwlink/?LinkId=234238 上有介绍 namespace SelfInkCanvas
{
/// <summary>
/// 可用于自身或导航至 Frame 内部的空白页。
/// </summary>
public sealed partial class AutoBoxTest : Page
{
private ObservableCollection<String> suggestions;
bool isChoose = false;
public AutoBoxTest()
{
suggestions = new ObservableCollection<string>();
this.InitializeComponent();
} private void autoSuggestBox_TextChanged(AutoSuggestBox sender, AutoSuggestBoxTextChangedEventArgs args)
{
if (!isChoose)
{
suggestions.Clear();
suggestions.Add(sender.Text + "");
suggestions.Add(sender.Text + "");
suggestions.Add(sender.Text + "");
suggestions.Add(sender.Text + "");
suggestions.Add(sender.Text + "");
sender.ItemsSource = suggestions;
}
isChoose = false;
} private void autoSuggestBox_QuerySubmitted(AutoSuggestBox sender, AutoSuggestBoxQuerySubmittedEventArgs args)
{ } private void autoSuggestBox_SuggestionChosen(AutoSuggestBox sender, AutoSuggestBoxSuggestionChosenEventArgs args)
{
isChoose = true;
}
}
}
AutoBoxTest.xaml.cs
UWP自动填充控件AutoSuggestBox小优化的更多相关文章
- JQuery自动填充控件:autocomplete(自己稍作了修改)
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 与众不同 windows phone (52) - 8.1 新增控件: AutoSuggestBox, ListView, GridView, SemanticZoom
[源码下载] 与众不同 windows phone (52) - 8.1 新增控件: AutoSuggestBox, ListView, GridView, SemanticZoom 作者:webab ...
- UWP 用Thumb 控件仿制一个可拖动悬浮 Button
参考了 http://www.cnblogs.com/zhanggaoxing/p/6403430.html,并加以改进. 最终效果::: Thumb 的原生事件 DragStarted,DragDe ...
- Android 开源组件 ----- Android LoopView无限自动轮转控件
Android 开源组件 ----- Android LoopView无限自动轮转控件 2015-12-28 15:26 by 杰瑞教育, 32 阅读, 0 评论, 收藏, 编辑 一.组件介绍 App ...
- js进阶 9-10 html控件如何实现点击自动选择控件内容
js进阶 9-10 html控件如何实现点击自动选择控件内容 一.总结 一句话总结: 1.在click事件中,如果focus,那就select 2.blur 1.html中控件添加两种方式? 在表单 ...
- QRowTable表格控件(三)-效率优化之-合理使用QStandardItem
目录 一.开心一刻 二.概述 三.效果展示 四.QStandardItem 1.QStandardItem是什么鬼 2.性能分析 3.QStandardItem使用上的坑 五.相关文章 原文链接:QR ...
- QRowTable表格控件(四)-效率优化之-优化数据源
目录 一.开心一刻 二.问题分析 三.重写数据源 1.自己存储数据 2.重写data接口 四.比较 五.相关文章 原文链接:QRowTable表格控件(四)-效率优化之-优化数据源 一.开心一刻 一程 ...
- CStatic中保持图形比例不变,尽量填充控件空间的代码
CStatic中保持图形比例不变,尽量填充控件空间的代码 先获取控件的高.宽,然后获取图像的高.宽,测试需要调整高还是调整宽 void CImagePreviewStatic::DrawItem(LP ...
- UWP 播放媒体控件
最近我的uwp需要有一个有声朗读的功能,like this 点击声音按钮就可以有声朗读了.这里主要是用了媒体播放的控件. 一般我们把需求分为两种: 一种是不需要呈现播放器的样子,只需要用户点击一下别的 ...
随机推荐
- c程序对于文件的处理
C 文件读写 上一章我们讲解了 C 语言处理的标准输入和输出设备.本章我们将介绍 C 程序员如何创建.打开.关闭文本文件或二进制文件. 一个文件,无论它是文本文件还是二进制文件,都是代表了一系列的字节 ...
- 20145223《信息安全系统设计基础》 GDB调试汇编堆栈过程分析
20145223<信息安全系统设计基础> GDB调试汇编堆栈过程分析 分析的c语言源码 生成汇编代码--命令:gcc -g example.c -o example -m32 进入gdb调 ...
- 蜻蜓FM笔试题目,求两个点的最近父节点
这个博客写的特别好. http://blog.csdn.net/kangroger/article/details/40392925
- SOAPUI使用教程-REST Service Mocking
REST服务模拟 REST服务模拟功能允许您创建一个REST服务模拟器-MockService . 好处 RESTMockServices可用于例如: Web服务的原型 ——几秒内从请求生成一个完整的 ...
- 身份证验证JS代码
身份证验证JS程序function checkidcardfun(code) { var city = {11: "北京", 12: "天津", 13: &qu ...
- Java数据结构——栈的应用(以数制转换为例子)
看一万遍,不如自己动手实践,请不要直接copy代码,先自己去理解例子实现的原理,然后试着自己动手去实践. 用Java去实现栈操作,会用到stack这个类,这类中有几个方法需要知道他们的用法 bool ...
- Android与H5交互
1.初始化WebView控件 webView = (WebView) findViewById(R.id.webview); 2.设置WebView属性 WebSettings webSettings ...
- css3 filter的十种特效
filter默认值是none,他不具备继承性,其中filter-function具有一下属性: grayscale灰度 sepia褐色(求专业指点翻译) saturate饱和度 hue-rotate色 ...
- css单位:em,rem解释
em:所有浏览器都符合:1em=16px;1.具有继承性2.em的根元素是body,当设置了根元素的大小时,大小是定义的数字乘以根元素定义的大小值 rem:1rem=16pxrem不具有继承性,其根元 ...
- Markdown Blog Testing
# 测试一下markdown写法 貌似之前的文章不能再重新套用markdown语法了? 1 2 3