标签:
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 SelfInkCanvas 20 { 21 /// <summary> 22 /// 可用于自身或导航至 Frame 内部的空白页。 23 /// </summary> 24 public sealed partial class AutoBoxTest : Page 25 { 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 SelfInkCanvas 20 { 21 /// <summary> 22 /// 可用于自身或导航至 Frame 内部的空白页。 23 /// </summary> 24 public sealed partial class AutoBoxTest : Page 25 { 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 }
标签:
原文地址:http://www.cnblogs.com/zuimengaitianya/p/5920334.html