Xamarin.Forms Searchbar

  • Artigo

Baixar exemplo Baixar o exemplo

O Xamarin.FormsSearchBar é um controle de entrada do usuário usado para iniciar uma pesquisa. O controle dá suporte a SearchBar 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 os resultados exibidos em um ListView:

Captura de tela do SearchBar no iOS e Android

A SearchBar classe 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 enumeração que determina se a SearchBar fonte está em negrito, itálico ou nenhum dos dois.
  • FontFamily é um string que determina a família de fontes usada pelo SearchBar.
  • FontSize pode ser um NamedSize valor de enumeração ou um double valor que representa tamanhos de fonte específicos entre plataformas.
  • HorizontalTextAlignment é um TextAlignment valor de enumeração que define o alinhamento horizontal do texto da consulta.
  • VerticalTextAlignment é um TextAlignment valor de enumeração 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 associar ações do usuário, como toques de dedo ou cliques, 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 uso de maiúsculas e minúsculas do SearchBar texto.

Essas propriedades são apoiadas por BindableProperty objetos , o que significa que o SearchBar pode ser personalizado e ser o destino das associações de dados. Especificar 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 em Xamarin.Forms.

Um SearchBar pode ser instanciado em XAML. Sua propriedade opcional Placeholder pode ser definida para definir o texto da 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 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..." />

Um SearchBar também pode ser criado no código:

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

Propriedades de aparência de 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 é exibido 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 ao TextChanged evento em XAML e usa um ListView para exibir os resultados da pesquisa:

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

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

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 DataService implementação de 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 associando 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 Associaçõ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 executar pesquisas. A DataService classe , incluindo dados de exemplo, está disponível no aplicativo de exemplo.

O XAML a seguir mostra como associar um SearchBar ao viewmodel 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 associa a SearchCommand propriedade aoICommandPerformSearchno viewmodel e associa a SearchBarText propriedade à SearchCommandParameter propriedade . A ListView.ItemsSource propriedade está associada à SearchResults propriedade do viewmodel.

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