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 点击声音按钮就可以有声朗读了.这里主要是用了媒体播放的控件. 一般我们把需求分为两种: 一种是不需要呈现播放器的样子,只需要用户点击一下别的 ...
随机推荐
- Spring的事务管理
事务 事务:是逻辑上一组操作,要么全都成功,要么全都失败. 事务特性(ACID) 原子性:事务不可分割 一致性:事务执行的前后,数据完整性保持一致 隔离性:一个事务执行的时候,不应该受到其他事务的打扰 ...
- 快速上手seajs——简单易用Seajs
快速上手seajs——简单易用Seajs 原文 http://www.cnblogs.com/xjchenhao/p/4021775.html 主题 SeaJS 简易手册 http://yslo ...
- 【CentOS】LAMP
文章需要整合,学习需要归纳,博主把一连四篇的LAMP合并成为一片长篇的大部头,并梳理了一下他们的关系,希望对各位有所帮助 最近一次更新:2016年12月21日21:38:31 本文为博主JerryCh ...
- spring spring data jpa save操作事务
整合spring spring data jpa的时候,在save方法上加了@Transactional注解.此时调用springdatajpa save方法并不会真的把数据提交给数据库,而是缓存起来 ...
- java后台获取Access_token的工具方法
本方法主要通过java后台控制来获取Access_token,需要你已经知道自己的ID跟密码 因为微信的权限设置大概每天可以获取两千条,每条有效时间为2小时 /** * 输入自己的id跟密码,获取微信 ...
- git本地有修改如何强制更新
本地有修改和提交,如何强制用远程的库更新更新.我尝试过用git pull -f,总是提示 You have not concluded your merge. (MERGE_HEAD exists). ...
- CodeForces336 A & B
第一题就是排序然后计算一下时间.没什么 package codeforces336; import java.io.InputStreamReader; import java.util.Scanne ...
- unity 改变场景
public class GameManager : MonoBehaviour { public void OnStartGame(int sceneName) { SceneManager.Loa ...
- Shader实例:溶解效果(Dissolve)
效果: 图左:一道金光闪过,瞬间灰飞烟灭 图右:燃烧效果,先过渡到黄色,然后渐渐过渡到黑色,最后消失殆尽. 这是游戏中常见的效果,各位可以想想自己玩过的游戏. 手头正在玩的,梦三国手游,死亡的时候就是 ...
- WEB前端工程师(实践)制作天气预报难度:简单
需要准备:jQuery Bootstrap 天气预报API(本文中使用API可能会失效请灵活运用) CSS样式可以你自己去写这里只提出jQuery 请求数据和解析JSON数据 { "resu ...