UWP自动填充控件AutoSuggestBox小优化

Posted 2020-08-11 醉梦ai天涯

    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>

AutoBoxTest.xaml

 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 }

AutoBoxTest.xaml.cs

    当我们输入字符，查找后在输入框会有相应的补充的选项在下面，当我们使用键盘的”↑“和“↓”去选择选项的时候，会发现我们选不了第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 }

AutoBoxTest.xaml.cs