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

  1. JQuery自动填充控件:autocomplete(自己稍作了修改)

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 与众不同 windows phone (52) - 8.1 新增控件: AutoSuggestBox, ListView, GridView, SemanticZoom

    [源码下载] 与众不同 windows phone (52) - 8.1 新增控件: AutoSuggestBox, ListView, GridView, SemanticZoom 作者:webab ...

  3. UWP 用Thumb 控件仿制一个可拖动悬浮 Button

    参考了 http://www.cnblogs.com/zhanggaoxing/p/6403430.html,并加以改进. 最终效果::: Thumb 的原生事件 DragStarted,DragDe ...

  4. Android 开源组件 ----- Android LoopView无限自动轮转控件

    Android 开源组件 ----- Android LoopView无限自动轮转控件 2015-12-28 15:26 by 杰瑞教育, 32 阅读, 0 评论, 收藏, 编辑 一.组件介绍 App ...

  5. js进阶 9-10 html控件如何实现点击自动选择控件内容

    js进阶 9-10  html控件如何实现点击自动选择控件内容 一.总结 一句话总结: 1.在click事件中,如果focus,那就select 2.blur 1.html中控件添加两种方式? 在表单 ...

  6. QRowTable表格控件(三)-效率优化之-合理使用QStandardItem

    目录 一.开心一刻 二.概述 三.效果展示 四.QStandardItem 1.QStandardItem是什么鬼 2.性能分析 3.QStandardItem使用上的坑 五.相关文章 原文链接:QR ...

  7. QRowTable表格控件(四)-效率优化之-优化数据源

    目录 一.开心一刻 二.问题分析 三.重写数据源 1.自己存储数据 2.重写data接口 四.比较 五.相关文章 原文链接:QRowTable表格控件(四)-效率优化之-优化数据源 一.开心一刻 一程 ...

  8. CStatic中保持图形比例不变,尽量填充控件空间的代码

    CStatic中保持图形比例不变,尽量填充控件空间的代码 先获取控件的高.宽,然后获取图像的高.宽,测试需要调整高还是调整宽 void CImagePreviewStatic::DrawItem(LP ...

  9. UWP 播放媒体控件

    最近我的uwp需要有一个有声朗读的功能,like this 点击声音按钮就可以有声朗读了.这里主要是用了媒体播放的控件. 一般我们把需求分为两种: 一种是不需要呈现播放器的样子,只需要用户点击一下别的 ...

随机推荐

  1. ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock' (2)

    有时候,当我们使用"mysql"."mysqladmin"."mysqldump"等命令管理数据库时,服务器抛出类似如下错误: 一.错误现场 ...

  2. MIT 6.828 JOS学习笔记13 Exercise 1.10

    Lab 1 Exercise 10 为了能够更好的了解在x86上的C程序调用过程的细节,我们首先找到在obj/kern/kern.asm中test_backtrace子程序的地址, 设置断点,并且探讨 ...

  3. RumTime实践之--UITableView和UICollectionView缺省页的实现

    有关RunTime的知识点已经看过很久了,但是一直苦于在项目中没有好的机会进行实际运用,俗话说"光说不练假把式",正好最近在项目中碰到一个UITableView和UICollect ...

  4. input=text数字问题

    其实老干部也会犯错,今天朋友在银行卡账号时候要求输入数字,它的正则竟然排除中文.其实正则是很重要的.废话少说.如果禁止中文呢 ime-mode 但是这个方法兼容性并不是很好,首先我们得知道. css ...

  5. http tcp udp ip 间的关系

    首先,我自己梳理一下,其实除了应对以后的笔试,还有需要应对的是自己在编程中对于api的选择,我在满足需求时采取哪种方案更好. 首先,我需要了解的是tcp/ip是一个协议组,有三大层: ip 对应于网络 ...

  6. 通过url传参

    简介: 通过url传单个和多个参数 你得配Route; 你得使用ui-sref传参数; 在你相关Route的Controller里面Inject $stateParams,然后取参数就OK. 实例: ...

  7. gradle下载地址

    gradle下载:http://services.gradle.org/distributions

  8. bzoj 3202: [Sdoi2013]项链

    Description 项链是人体的装饰品之一,是最早出现的首饰.项链除了具有装饰功能之外,有些项 链还具有特殊显示作用,如天主教徒的十字架链和佛教徒的念珠. 从古至今人们为了美化人体本身,也美 化环 ...

  9. [BZOJ4200][Noi2015]小园丁与老司机

    4200: [Noi2015]小园丁与老司机 Time Limit: 20 Sec  Memory Limit: 512 MBSec  Special JudgeSubmit: 106  Solved ...

  10. src/main/Java路径下的properties文件丢失

    在pom中加入代码: <build> <resources> <resource> <directory>src/main/java</direc ...