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

ezgif.com-gif-maker

 

iOS

ezgif.com-gif-maker (1)

 

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

icongithub

2 comentários em “ListView com SearchBar – Xamarin.Forms

    1. Olá Sames,

      Fica um pouco difícil eu te dizer o que pode ser apenas com essas informações.

      A list aparece ? Veja se a list não está sobrepondo a SearchBar. Caso tenha o projeto em um repositório, me mande um link para que eu possa te ajudar melhor.

      Curtir

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

w

Conectando a %s