Бөлісу құралы:

Поле автоматического предложения

Используйте AutoSuggestBox, чтобы предоставить пользователю список предложений по мере того, как он вводит текст.

Поле автоматического предложения

Это правильный контроль?

Если вы хотите простой настраиваемый элемент управления, который позволяет выполнять поиск текста со списком предложений, выберите поле автоматического предложения.

Дополнительные сведения о выборе правильного элемента управления текстом см. в статье "Элементы управления текстом ".

Анатомия

Точка входа для поля авторекомендирования состоит из необязательного заголовка и текстового поля с необязательным текстом подсказки:

Пример точки входа для элемента управления автопредложением

Список результатов автоматического предложения заполняется автоматически после того, как пользователь начнет вводить текст. Список результатов может отображаться выше или ниже текстового поля записи. Появится кнопка "очистить все":

Пример расширенного элемента управления автоподсказками

Recommendations

  • При использовании поля автозаполнения для выполнения поиска, если для введенного текста отсутствуют результаты, отобразите сообщение в одну строку "Нет результатов". Это позволит пользователям понять, что их поисковый запрос выполнен.

    Пример окна автозаполнения без результатов поиска

Создать окно авто-подсказок

  • Важные API:класс AutoSuggestBox, событие TextChanged, событие SuggestionChose, событие QuerySubmitted

Откройте приложение галереи WinUI 3 и оцените работу поля автоматического предложения

Значок коллекции WinUI 3 Приложение WinUI 3 Gallery содержит интерактивные примеры элементов управления и функций WinUI. Получите приложение из Microsoft Store или просмотрите исходный код GitHub.

Чтобы использовать AutoSuggestBox, необходимо ответить на 3 действия пользователя.

  • Изменен текст. Когда пользователь вводит текст, обновите список предложений.
  • Выбрано предложение. Когда пользователь выбирает предложение в списке предложений, обновите текстовое поле.
  • Отправленный запрос. Когда пользователь отправляет запрос, отображаются результаты запроса.

Изменен текст

Событие TextChanged возникает, когда обновляется содержимое текстового поля. Используйте свойство event args Reason , чтобы определить, произошло ли изменение из-за ввода пользователем. Если причина изменения — UserInput, отфильтруйте данные на основе входных данных. Затем установите отфильтрованные данные в качестве ItemsSource в "AutoSuggestBox", чтобы обновить список предложений.

Чтобы управлять отображением элементов в списке предложений, можно использовать DisplayMemberPath или ItemTemplate.

  • Чтобы отобразить текст одного свойства элемента данных, задайте для свойства DisplayMemberPath выбор свойства из объекта, отображаемого в списке предложений.
  • Чтобы определить пользовательский поиск каждого элемента в списке, используйте свойство ItemTemplate.

Выбранное предложение

Когда пользователь переходит по списку предложений с помощью клавиатуры, необходимо обновить текст в текстовом поле для сопоставления.

Вы можете задать свойство TextMemberPath для выбора свойства из объекта данных, которое будет отображаться в текстовом поле. Если указать TextMemberPath, текстовое поле обновляется автоматически. Обычно следует указать то же значение для DisplayMemberPath и TextMemberPath, чтобы текст был одинаковым в списке предложений и текстовом поле.

Если вам нужно показать больше простого свойства, обработайте событие SuggestionChosen , чтобы заполнить текстовое поле настраиваемым текстом на основе выбранного элемента.

Отправленный запрос

Обработайте событие QuerySubmitted, чтобы выполнить действие запроса, соответствующее приложению, и показать результат пользователю.

Событие QuerySubmitted возникает, когда пользователь фиксирует строку запроса. Пользователь может зафиксировать запрос одним из следующих способов:

  • Пока фокус находится в текстовом поле, нажмите клавишу ВВОД или щелкните значок запроса. Свойство event args ChosenSuggestion имеет значение NULL.
  • Пока фокус находится в списке предложений, нажмите Enter, щелкните или коснитесь элемента. Свойство event args SelectedSuggestion содержит элемент, выбранный из списка.

Во всех случаях свойство event args QueryText содержит текст из текстового поля.

Ниже приведен простой autoSuggestBox с необходимыми обработчиками событий.

<AutoSuggestBox PlaceholderText="Search" QueryIcon="Find" Width="200"
                TextChanged="AutoSuggestBox_TextChanged"
                QuerySubmitted="AutoSuggestBox_QuerySubmitted"
                SuggestionChosen="AutoSuggestBox_SuggestionChosen"/>

private void AutoSuggestBox_TextChanged(AutoSuggestBox sender, AutoSuggestBoxTextChangedEventArgs args)
{
    // Only get results when it was a user typing,
    // otherwise assume the value got filled in by TextMemberPath
    // or the handler for SuggestionChosen.
    if (args.Reason == AutoSuggestionBoxTextChangeReason.UserInput)
    {
        //Set the ItemsSource to be your filtered dataset
        //sender.ItemsSource = dataset;
    }
}


private void AutoSuggestBox_SuggestionChosen(AutoSuggestBox sender, AutoSuggestBoxSuggestionChosenEventArgs args)
{
    // Set sender.Text. You can use args.SelectedItem to build your text string.
}


private void AutoSuggestBox_QuerySubmitted(AutoSuggestBox sender, AutoSuggestBoxQuerySubmittedEventArgs args)
{
    if (args.ChosenSuggestion != null)
    {
        // User selected an item from the suggestion list, take an action on it here.
    }
    else
    {
        // Use args.QueryText to determine what to do.
    }
}

Используйте AutoSuggestBox, чтобы предоставить пользователю список предложений по мере того, как он вводит текст.

По умолчанию у поля ввода текста нет кнопки запроса. Чтобы добавить кнопку с указанным значком в правой части текстового поля, можно задать свойство QueryIcon . Например, чтобы поле AutoSuggestBox выглядело как типичное поле поиска, добавьте значок поиска.

<AutoSuggestBox QueryIcon="Find"/>

Здесь находится AutoSuggestBox со значком поиска.

Пример элемента управления авторекомендирования со значком поиска.

  • Last updated on