ListView com SearchBar – Xamarin.Forms

Hoje irei falei da ListView com SearchBar, algo muito comum em aplicações mobile, facilitando a experiência do usuário, principalmente  quando a lista em questão contém bastantes elementos.

Irei partir do princípio que você  acabou de criar um projeto Xamarin.Forms, caso possua alguma dúvida sobre isso, leia o post Criando um projeto Xamarin.Forms .

SearchBar

No arquivo xaml, crie um StackLayout para empilhar os elementos da view. Em seguida dentro do StackLayout crie uma SearchBar, coloque um nome e  crie um evento TextChanged,  como demonstrado no exemplo a seguir.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:SearchListView"
             x:Class="SearchListView.MainPage">

     <StackLayout>
 
         <SearchBar x:Name="EstadoSearchBar" TextChanged="OnTextChanged" />
 
     </StackLayout>

</ContentPage>

ListView

Crie uma ListView, coloque um nome para ela e adicione dentro dela uma Label para mostrar os dados da sua lista.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:SearchListView"
             x:Class="SearchListView.MainPage">

    <StackLayout>
        <SearchBar x:Name="EstadoSearchBar" TextChanged="OnTextChanged" />
 
        <ListView x:Name="EstadosListView">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Label Text="{Binding .}" FontSize="20" Margin="20,5"/>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage>

C#  – Realizado no Code-Behind

Crie uma lista de String e coloque alguns elementos nela, neste exemplo usei nome dos estados Brasileiros.

using System;
using System.Collections.Generic;
using System.Linq;
using Xamarin.Forms;

namespace SearchListView
{
  public partial class MainPage : ContentPage
  {
      List<String> estados = new List<String>
      {
          "Acre (AC)","Alagoas (AL)","Amapá (AP)","Amazonas (AM)",
          "Bahia (BA)","Ceará (CE)","Distrito Federal (DF)",
          "Espírito Santo (ES)","Goiás (GO)","Maranhão (MA)",
          "Mato Grosso (MT)","Mato Grosso do Sul(MS)","Minas Gerais(MG)",
          "Pará(PA)","Paraíba(PB)","Paraná(PR)","Pernambuco(PE)",
          "Piauí(PI)","Rio de Janeiro(RJ)","Rio Grande do Norte(RN)",
          "Rio Grande do Sul(RS)","Rondônia(RO)","Roraima(RR)",
          "Santa Catarina(SC)","São Paulo(SP)","Sergipe(SE)",
          "Tocantins(TO)"
      };

      public MainPage()
      {
          InitializeComponent();
      }
  }
}

 

Em seguida, no construtor carregue no ItemSource da sua ListView a lista com os elementos adicionados.

      public MainPage()
      {
          InitializeComponent();

          EstadosListView.ItemsSource = estados;
      }

 

Crie o método  que será chamado no TextChange da sua SearchBar, neste exemplo chamei de OnTextChanged.

Dentro do método, crie uma variável para receber o texto informado pelo usuário na SearchBar, neste exemplo eu chamei de “texto”.

Em seguida execute uma consulta com Linq na lista de estados utilizando “Where” e expressão lambda, como demonstrado a seguir.

Essa consulta carregará a lista com todos os elementos que contiver o texto informado.

   private void OnTextChanged(object sender, TextChangedEventArgs e)
   {
      var texto = EstadoSearchBar.Text;
      EstadosListView.ItemsSource = estados.Where(
            x => x.ToLower().Contains(texto.ToLower()));
   }

 

Resultado

Android

 

iOS

 

Esse e todos os exemplos deste blog encontram-se disponíveis no GitHub.