Поделиться через

Xamarin.Forms Панель поиска

  • Статья

Это Xamarin.FormsSearchBar элемент управления входным вводом пользователя, используемый для инициирования поиска. Элемент SearchBar управления поддерживает текст заполнителя, входные данные запроса, выполнение поиска и отмену. На следующем снимке экрана показан SearchBar запрос с результатами, отображаемыми в :ListView

Снимок экрана: searchBar в iOS и Android

Класс SearchBar определяет следующие свойства:

  • CancelButtonColor — это значение Color , определяющее цвет кнопки отмены.
  • CharacterSpacing с типом double представляет собой интервал между знаками текста SearchBar.
  • FontAttributesFontAttributes— это значение перечисления, определяющее, является ли SearchBar шрифт полужирным, курсивом или нет.
  • FontFamily — это свойство, определяющее string семейство шрифтов, используемое этим элементом SearchBar.
  • FontSizeможет быть значение перечисления или double значение, представляющее NamedSize определенные размеры шрифтов на разных платформах.
  • HorizontalTextAlignmentTextAlignment— это значение перечисления, определяющее горизонтальное выравнивание текста запроса.
  • VerticalTextAlignmentTextAlignment— это значение перечисления, определяющее вертикальное выравнивание текста запроса.
  • Placeholderstring— это объект, определяющий текст заполнителя, например "Поиск...".
  • PlaceholderColor — это объект Color , определяющий цвет заполнителя.
  • SearchCommand — это возможность ICommand привязки действий пользователя, таких как касания пальца или щелчки, для команд, определенных в режиме просмотра.
  • SearchCommandParameter — это параметр object , который должен передаваться SearchCommandв .
  • Textstring— это содержащий текст запроса в объекте SearchBar.
  • TextColor — это объект, определяющий Color цвет текста запроса.
  • TextTransformTextTransform— это значение, определяющее регистр SearchBar текста.

Эти свойства поддерживаются BindableProperty объектами, что означает SearchBar , что их можно настроить и быть целевым объектом привязок данных. Указание свойств шрифта в объекте SearchBar соответствует настройке текста в других Xamarin.Forms элементах управления "Текст". Дополнительные сведения см. в разделе "Шрифты".Xamarin.Forms

Экземпляр SearchBar можно создать в XAML. Его необязательное Placeholder свойство можно задать для определения текста подсказки в поле ввода запроса. Значение по умолчанию является Placeholder пустой строкой, поэтому заполнитель не будет отображаться, если он не задан. В следующем примере показано, как создать экземпляр в SearchBar XAML с необязательным Placeholder набором свойств:

<SearchBar Placeholder="Search items..." />

Можно SearchBar также создать в коде:

SearchBar searchBar = new SearchBar{ Placeholder = "Search items..." };

Свойства внешнего вида SearchBar

Элемент SearchBar управления определяет множество свойств, которые настраивают внешний вид элемента управления. В следующем примере показано, как создать экземпляр SearchBar в XAML с указанными несколькими свойствами:

<SearchBar Placeholder="Search items..."
           CancelButtonColor="Orange"
           PlaceholderColor="Orange"
           TextColor="Orange"
           TextTransform="Lowercase"
           HorizontalTextAlignment="Center"
           FontSize="Medium"
           FontAttributes="Italic" />

Эти свойства также можно указать при создании объекта в коде SearchBar :

SearchBar searchBar = new SearchBar
{
    Placeholder = "Search items...",
    PlaceholderColor = Color.Orange,
    TextColor = Color.Orange,
    TextTransform = TextTransform.Lowercase,
    HorizontalTextAlignment = TextAlignment.Center,
    FontSize = Device.GetNamedSize(NamedSize.Medium, typeof(SearchBar)),
    FontAttributes = FontAttributes.Italic
};

На следующем снимка экрана показан результирующий SearchBar элемент управления:

Снимок экрана: настраиваемая панель поиска в iOS и Android

Примечание.

В iOS SearchBarRenderer класс содержит переопределимый UpdateCancelButton метод. Этот метод управляет при появлении кнопки отмены и может быть переопределен в пользовательском отрисовщике. Дополнительные сведения о пользовательских отрисовщиках см. в разделе Xamarin.Forms "Пользовательские отрисовщики".

Выполнение поиска с помощью обработчиков событий

Поиск можно выполнить с помощью SearchBar элемента управления, подключив обработчик событий к одному из следующих событий:

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

В следующем примере показан обработчик событий, подключенный к TextChanged событию в XAML, и используется ListView для отображения результатов поиска:

<SearchBar TextChanged="OnTextChanged" />
<ListView x:Name="searchResults" >

Обработчик событий также можно подключить к созданному в коде SearchBar :

SearchBar searchBar = new SearchBar {/*...*/};
searchBar.TextChanged += OnTextChanged;

Обработчик TextChanged событий в файле программной части совпадает с тем, создается ли SearchBar он с помощью XAML или кода:

void OnTextChanged(object sender, EventArgs e)
{
    SearchBar searchBar = (SearchBar)sender;
    searchResults.ItemsSource = DataService.GetSearchResults(searchBar.Text);
}

В предыдущем примере предполагается существование DataService класса с методом GetSearchResults , способным возвращать элементы, соответствующие запросу. Значение SearchBar свойства элемента управления Text передается GetSearchResults методу, а результат используется для обновления ListView свойства элемента управления ItemsSource . Общий эффект заключается в том, что результаты поиска отображаются в элементе ListView управления.

Пример приложения предоставляет DataService реализацию класса, которую можно использовать для тестирования функциональных возможностей поиска.

Выполнение поиска с помощью модели представления

Поиск можно выполнить без обработчиков событий путем привязки SearchCommand свойств SearchCommandParameter к ICommand реализации. Пример проекта демонстрирует эти реализации с помощью шаблона Model-View-ViewModel (MVVM). Дополнительные сведения о привязках данных с помощью MVVM см. в разделе "Привязки данных" с MVVM.

Образец представления в примере приложения содержит следующий код:

public class SearchViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void NotifyPropertyChanged([CallerMemberName] string propertyName = "")
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    public ICommand PerformSearch => new Command<string>((string query) =>
    {
        SearchResults = DataService.GetSearchResults(query);
    });

    private List<string> searchResults = DataService.Fruits;
    public List<string> SearchResults
    {
        get
        {
            return searchResults;
        }
        set
        {
            searchResults = value;
            NotifyPropertyChanged();
        }
    }
}

Примечание.

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

В следующем XAML показано, как привязать объект SearchBar к примеру viewmodel с элементом ListView управления, отображающим результаты поиска:

<ContentPage ...>
    <ContentPage.BindingContext>
        <viewmodels:SearchViewModel />
    </ContentPage.BindingContext>
    <StackLayout ...>
        <SearchBar x:Name="searchBar"
                   ...
                   SearchCommand="{Binding PerformSearch}"
                   SearchCommandParameter="{Binding Text, Source={x:Reference searchBar}}"/>
        <ListView x:Name="searchResults"
                  ...
                  ItemsSource="{Binding SearchResults}" />
    </StackLayout>
</ContentPage>

В этом примере устанавливается BindingContext экземпляр SearchViewModel класса. Он привязывает свойство к ICommand объекту viewmodel и привязывает SearchBar Text SearchCommand свойство к свойству.SearchCommandParameter PerformSearch Свойство ListView.ItemsSource привязано к SearchResults свойству viewmodel.

Дополнительные сведения об интерфейсе ICommand и привязках см. в привязке Xamarin.Forms данных и интерфейсе ICommand.