首页 > 代码库 > UWP自动填充控件AutoSuggestBox小优化
UWP自动填充控件AutoSuggestBox小优化
UWP提供的AutoSuggestBox本身非常好用，在项目中经常用到，但是当我们使用时发现一下不人性化的设置，例子1如下：
1 <Page 2 x:Class="SelfInkCanvas.AutoBoxTest" 3 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 4 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 5 xmlns:local="using:SelfInkCanvas" 6 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 7 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 8 mc:Ignorable="d"> 9 10 <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">11 <AutoSuggestBox x:Name="autoSuggestBox" 12 PlaceholderText="输入一个字符"13 TextChanged="autoSuggestBox_TextChanged"14 SuggestionChosen="autoSuggestBox_SuggestionChosen"15 QuerySubmitted="autoSuggestBox_QuerySubmitted"16 ></AutoSuggestBox>17 </Grid>18 </Page>
1 using System; 2 using System.Collections.Generic; 3 using System.Collections.ObjectModel; 4 using System.IO; 5 using System.Linq; 6 using System.Runtime.InteropServices.WindowsRuntime; 7 using Windows.Foundation; 8 using Windows.Foundation.Collections; 9 using Windows.UI.Xaml;10 using Windows.UI.Xaml.Controls;11 using Windows.UI.Xaml.Controls.Primitives;12 using Windows.UI.Xaml.Data;13 using Windows.UI.Xaml.Input;14 using Windows.UI.Xaml.Media;15 using Windows.UI.Xaml.Navigation;16 17 // “空白页”项模板在 http://go.microsoft.com/fwlink/?LinkId=234238 上有介绍18 19 namespace SelfInkCanvas20 {21 /// <summary>22 /// 可用于自身或导航至 Frame 内部的空白页。23 /// </summary>24 public sealed partial class AutoBoxTest : Page25 {26 private ObservableCollection<String> suggestions;27 public AutoBoxTest()28 {29 suggestions = new ObservableCollection<string>();30 this.InitializeComponent();31 }32 33 private void autoSuggestBox_TextChanged(AutoSuggestBox sender, AutoSuggestBoxTextChangedEventArgs args)34 {35 suggestions.Clear();36 suggestions.Add(sender.Text + "1");37 suggestions.Add(sender.Text + "2");38 suggestions.Add(sender.Text + "3");39 suggestions.Add(sender.Text + "4");40 suggestions.Add(sender.Text + "5");41 sender.ItemsSource = suggestions;42 43 }44 45 private void autoSuggestBox_QuerySubmitted(AutoSuggestBox sender, AutoSuggestBoxQuerySubmittedEventArgs args)46 {47 48 }49 50 private void autoSuggestBox_SuggestionChosen(AutoSuggestBox sender, AutoSuggestBoxSuggestionChosenEventArgs args)51 {52 }53 }54 }
当我们输入字符，查找后在输入框会有相应的补充的选项在下面，当我们使用键盘的”↑“和“↓”去选择选项的时候，会发现我们选不了第3项的选项，应为当我们在选择第一个选项的时候，我们发现在我们的输入框中的字符已经变化为选项的内容，这时又会触发autoSuggestBox_TextChanged事件，重新渲染下拉选项，这对于我们使用键盘操作来说是一个不正确的选项。
所以要求我们的AutoSuggestBox控件在我们选择的时候不会在触发autoSuggestBox_TextChanged事件，只有当我们完成后在使用，因此我们需要对autoSuggestBox_TextChanged事件做一下相应的控制处理。需要明白，当我们选中选项的时候会触发autoSuggestBox_SuggestionChosen事件，而且是每一行多会触发。
因此我们优化后台代码如下：
1 using System; 2 using System.Collections.Generic; 3 using System.Collections.ObjectModel; 4 using System.IO; 5 using System.Linq; 6 using System.Runtime.InteropServices.WindowsRuntime; 7 using Windows.Foundation; 8 using Windows.Foundation.Collections; 9 using Windows.UI.Xaml;10 using Windows.UI.Xaml.Controls;11 using Windows.UI.Xaml.Controls.Primitives;12 using Windows.UI.Xaml.Data;13 using Windows.UI.Xaml.Input;14 using Windows.UI.Xaml.Media;15 using Windows.UI.Xaml.Navigation;16 17 // “空白页”项模板在 http://go.microsoft.com/fwlink/?LinkId=234238 上有介绍18 19 namespace SelfInkCanvas20 {21 /// <summary>22 /// 可用于自身或导航至 Frame 内部的空白页。23 /// </summary>24 public sealed partial class AutoBoxTest : Page25 {26 private ObservableCollection<String> suggestions;27 bool isChoose = false;28 public AutoBoxTest()29 {30 suggestions = new ObservableCollection<string>();31 this.InitializeComponent();32 }33 34 private void autoSuggestBox_TextChanged(AutoSuggestBox sender, AutoSuggestBoxTextChangedEventArgs args)35 {36 if (!isChoose)37 {38 suggestions.Clear();39 suggestions.Add(sender.Text + "1");40 suggestions.Add(sender.Text + "2");41 suggestions.Add(sender.Text + "3");42 suggestions.Add(sender.Text + "4");43 suggestions.Add(sender.Text + "5");44 sender.ItemsSource = suggestions;45 }46 isChoose = false;47 }48 49 private void autoSuggestBox_QuerySubmitted(AutoSuggestBox sender, AutoSuggestBoxQuerySubmittedEventArgs args)50 {51 52 }53 54 private void autoSuggestBox_SuggestionChosen(AutoSuggestBox sender, AutoSuggestBoxSuggestionChosenEventArgs args)55 {56 isChoose = true;57 }58 }59 }
UWP自动填充控件AutoSuggestBox小优化
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。