首页 > 代码库 > UWP自动填充控件AutoSuggestBox小优化

UWP自动填充控件AutoSuggestBox小优化

2024-08-15 05:09:28   220人阅读

    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 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 }
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 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 }
AutoBoxTest.xaml.cs

 

UWP自动填充控件AutoSuggestBox小优化


联系
我们