Compartilhar via

Xamarin.Forms Barra de Pesquisa

  • Artigo

O Xamarin.FormsSearchBar é um controle de entrada do usuário usado para iniciar uma pesquisa. O SearchBar controle oferece suporte a texto de espaço reservado, entrada de consulta, execução de pesquisa e cancelamento. A captura de tela a seguir mostra uma SearchBar consulta com resultados exibidos em um ListView:

Captura de tela da SearchBar no iOS e Android

A classe SearchBar define as seguintes propriedades:

  • CancelButtonColor é um Color que define a cor do botão cancelar.
  • CharacterSpacing, do tipo double é o espaçamento entre os caracteres do SearchBar texto.
  • FontAttributes é um FontAttributes valor de enum que determina se a SearchBar fonte é negrito, itálico ou nenhum.
  • FontFamily é um string que determina a família de fontes usada pelo SearchBar.
  • FontSize pode ser um NamedSize valor de enum ou um double valor que representa tamanhos de fonte específicos entre plataformas.
  • HorizontalTextAlignment é um TextAlignment valor de enum que define o alinhamento horizontal do texto da consulta.
  • VerticalTextAlignment é um TextAlignment valor de enum que define o alinhamento vertical do texto da consulta.
  • Placeholder é um string que define o texto do espaço reservado, como "Pesquisar...".
  • PlaceholderColor é um Color que define a cor do texto do espaço reservado.
  • SearchCommand é um ICommand que permite vincular ações do usuário, como toques ou cliques com o dedo, a comandos definidos em um ViewModel.
  • SearchCommandParameter é um object que especifica o parâmetro que deve ser passado para o SearchCommand.
  • Text é um string que contém o texto da consulta no SearchBar.
  • TextColor é um Color que define a cor do texto da consulta.
  • TextTransform é um TextTransform valor que determina o invólucro do SearchBar texto.

Essas propriedades são apoiadas por BindableProperty objetos, o que significa que podem SearchBar ser personalizadas e ser o destino de associações de dados. A especificação de propriedades de fonte no é consistente com a SearchBar personalização de texto em outros Xamarin.Forms controles de texto. Para obter mais informações, consulte Fontes no Xamarin.Forms.

Um SearchBar pode ser instanciado em XAML. Sua propriedade opcional Placeholder pode ser definida para definir o texto de dica na caixa de entrada da consulta. O valor padrão para o Placeholder é uma cadeia de caracteres vazia, portanto, nenhum espaço reservado será exibido se ele não estiver definido. O exemplo a seguir mostra como instanciar um SearchBar em XAML com o conjunto de propriedades opcional Placeholder :

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

A SearchBar também pode ser criado em código:

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

Propriedades de aparência da SearchBar

O SearchBar controle define muitas propriedades que personalizam a aparência do controle. O exemplo a seguir mostra como instanciar um SearchBar em XAML com várias propriedades especificadas:

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

Essas propriedades também podem ser especificadas ao criar um SearchBar objeto no código:

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
};

A captura de tela a seguir mostra o controle resultante SearchBar :

Captura de tela da SearchBar personalizada no iOS e Android

Observação

No iOS, a SearchBarRenderer classe contém um método substituível UpdateCancelButton . Esse método controla quando o botão cancelar aparece e pode ser substituído em um renderizador personalizado. Para obter mais informações sobre renderizadores personalizados, consulte Xamarin.Forms Renderizadores personalizados.

Executar uma pesquisa com manipuladores de eventos

Uma pesquisa pode ser executada usando o SearchBar controle anexando um manipulador de eventos a um dos seguintes eventos:

  • SearchButtonPressed é chamado quando o usuário clica no botão de pesquisa ou pressiona a tecla enter.
  • TextChanged é chamado sempre que o texto na caixa de consulta é alterado.

O exemplo a seguir mostra um manipulador de eventos anexado TextChanged ao evento em XAML e usa um para exibir resultados de ListView pesquisa:

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

Um manipulador de eventos também pode ser anexado a um SearchBar código criado:

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

O TextChanged manipulador de eventos no arquivo code-behind é o mesmo, seja o SearchBar criado via XAML ou código:

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

O exemplo anterior implica a existência de uma DataService classe com um GetSearchResults método capaz de retornar itens que correspondem a uma consulta. O SearchBar valor da propriedade do Text controle é passado para o GetSearchResults método e o resultado é usado para atualizar a ListView propriedade do ItemsSource controle. O efeito geral é que os resultados da pesquisa são exibidos no ListView controle.

O aplicativo de exemplo fornece uma implementação de DataService classe que pode ser usada para testar a funcionalidade de pesquisa.

Executar uma pesquisa usando um viewmodel

Uma pesquisa pode ser executada sem manipuladores de eventos vinculando as SearchCommand propriedades e SearchCommandParameter às ICommand implementações. O projeto de exemplo demonstra essas implementações usando o padrão MVVM (Model-View-ViewModel). Para obter mais informações sobre associações de dados com MVVM, consulte Ligações de dados com MVVM.

O viewmodel no aplicativo de exemplo contém o seguinte código:

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();
        }
    }
}

Observação

O viewmodel pressupõe a existência de uma DataService classe capaz de realizar pesquisas. A DataService classe, incluindo dados de exemplo, está disponível no aplicativo de exemplo.

O XAML a seguir mostra como vincular um ao modelo de SearchBar exibição de exemplo, com um ListView controle exibindo os resultados da pesquisa:

<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>

Este exemplo define o BindingContext como uma instância da SearchViewModel classe. Ele vincula a SearchCommand propriedade ao PerformSearchICommand no viewmodel e vincula a SearchBarText propriedade à SearchCommandParameter propriedade. A ListView.ItemsSource propriedade está vinculada à SearchResults propriedade do viewmodel.

Para obter mais informações sobre a ICommand interface e associações, consulte Xamarin.Forms vinculação de dados e a interface ICommand.