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. java对象转换成json

    package com.bjs.acrosstime.utils; import java.util.ArrayList; import java.util.Date; import java.uti ...

  2. linux系统swappiness参数在内存与交换分区间优化

    http://blog.itpub.net/29371470/viewspace-1250975        swappiness的值的大小对如何使用swap分区是有着很大的联系的.swappine ...

  3. 毕业论文中使用的技术—FileReader接口

    用来把文件读入内存,并且读取文件中的数据. FileReader接口提供了一个异步API,使用该API可以在浏览器主线程中异步访问文件系统,读取文件中的数据 FileReader接口的方法 方法名 参 ...

  4. codevs1048 石子合并

    题目链接:http://codevs.cn/problem/1048/ 题目描述 Description 有n堆石子排成一列,每堆石子有一个重量w[i], 每次合并可以合并相邻的两堆石子,一次合并的代 ...

  5. python学习4 常用内置模块

    logging os 路径处理 // 获取当前路径 os.path.abspath(__file__) //获取当前文件夹路径 os.path.dirname(os.path.abspath(__fi ...

  6. 如何理解typedef void (*pfun)(void)

    问题: 在刚接触typedef void (*pfun)(void) 这个结构的时候,存在疑惑,为什么typedef后只有一"块"东西,而不是两"块"东西呢?那 ...

  7. unity 利用ugui 制作技能冷却效果

    using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; ...

  8. jQuery Ajax请求(关于火狐下SyntaxError: missing ] after element list ajax返回json,var json = eval("("+data+")"); 报错)

    $.ajax({    contentType: "application/x-www-form-urlencoded;charset=UTF-8" ,    type: &quo ...

  9. c# http get请求与post请求实例

    //http请求工具类 using System;using System.Collections.Generic;using System.IO;using System.Linq;using Sy ...

  10. 二、JSP、servlet、SQL三者之间的数据传递(前台与后台数据交互)

    2.收信息来到表单提交时URL所指向的servlet文件,获取传递过来的参数值