UWP自动填充控件AutoSuggestBox小优化

时间：2022-09-21 15:39:37

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

相关文章