Xamarin Forms -  Criando uma SearchBar básica

Hoje vamos recordar como usar uma SearchBar em uma aplicação Xamarin Forms.

Neste artigo vou recordar como usar uma Searchbar em uma aplicação Xamarin Forms com ListView para realizar uma busca parcial.

Vou usar os conceitos já abordados sobre as views ListView e SearchBar no Xamarin. Forms. Assim se você esta chegando agora recomendo que leia os artigos onde eu já tratei desse assunto:

No exemplo usado no artigo vamos criar um projeto Xamarin Forms e uma página onde teremos uma view ListView e uma view SearchBar onde vamos fazer a busca dos estados brasileiros.

Vamos implementar assim uma página de busca usando o SearchBar e o ListView que vai retornar o nome do estado selecionado.

Então vamos à parte prática...

Recursos usados:

Criando o projeto no Visual Studio 2017 Community

Abra o Visual Studio Community 2017 e clique em New Project;

Selecione Visual C#, o template Cross Plataform e a seguir Cross Plataform App(Xamarin.Forms);

Informe o nome XF_SearchBar e clique no botão OK;

A seguir selecione Blank App e marque as plataformas para quais deseja gerar os projetos;

Marque a opção Xamarin.Forms e em Code Sharing Strategy marque .NET Standard, que substitui a opção de projetos PCL:

Definindo o código da página MainPage

Abra o arquivo MainPage.xaml e inclua o código abaixo:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:XF_SearchBar"
             x:Class="XF_SearchBar.MainPage"
             BackgroundColor="WhiteSmoke"
             Title="Lista de Estados">
    <StackLayout Orientation="Vertical">        
        <Label Text="Procurar Estado" FontSize="Medium" />        
        <SearchBar x:Name="SearchConteudo" 
                   TextChanged="SearchConteudo_TextChanged" />
        <Grid>
            <ListView x:Name="listaEstados" 
                      ItemTapped="ListaEstado_ItemTapped" />
        </Grid>        
    </StackLayout>
</ContentPage>

Neste código estamos usando as seguintes views:

Vamos agora implementar o código no arquivo MainPage.xaml.cs :

1- primeiro vamos criar uma lista de paises que iremos usar como fonte de dados para exibir na view ListView

 List<string> estados = new List<string>
        {
            "Acre",
            "Alagoas",
            "Amapá",
            "Amazonas",
            "Bahia",
            "Ceará",
            "Distrito Federal",
            "Espírito Santo",
            "Goiás",
            "Maranhão",
            "Mato Grosso",
            "Mato Grosso do Sul",
            "Minas Gerais",
            "Pará",
            "Paraíba",
            "Paraná",
            "Pernambuco",
            "Piauí",
            "Rio de Janeiro",
            "Rio Grande do Norte",
            "Rio Grande do Sul",
            "Rondônia",
            "Roraima",
            "Santa Catarina",
            "São Paulo",
            "Sergipe",
            "Tocantins"
        };

A seguir no evento TextChanged da view SearchBar vamos definir o código que vai realizar o filtro do texto digitado obtendo os estados que contém em seu nome os caracteres informados na SearchBar e atribuindo à ListView:

       private void SearchConteudo_TextChanged(object sender, TextChangedEventArgs e)
        {
            var keyword = SearchConteudo.Text;
            if (keyword.Length >= 1)
            {
                var sugestao = estados.Where(c => c.ToLower().Contains(keyword.ToLower()));
                listaEstados.ItemsSource = sugestao;
                listaEstados.IsVisible = true;
            }
            else
            {
                listaEstados.IsVisible = false;
            }
        }

Agora no evento ItemTapped da ListView verificamos se houve um item foi selecionado, e, neste caso, obtemos o seu valor e exibimos na SearchBar :

        private void ListaEstado_ItemTapped(object sender, ItemTappedEventArgs e)
        {
            if (e.Item as string == null)
            {
                return;
            }
            else
            {
                listaEstados.ItemsSource = estados.Where(c => c.Equals(e.Item as string));
                listaEstados.IsVisible = true;
                SearchConteudo.Text = e.Item as string;
            }
        }

O código completo do arquivo code-behind MainPage.xaml.cs é mostrado abaixo:

using System.Collections.Generic;
using System.Linq;
using Xamarin.Forms;
namespace XF_SearchBar
{
    public partial class MainPage : ContentPage
   {
        List<string> estados = new List<string>
        {
            "Acre",
            "Alagoas",
            "Amapá",
            "Amazonas",
            "Bahia",
            "Ceará",
            "Distrito Federal",
            "Espírito Santo",
            "Goiás",
            "Maranhão",
            "Mato Grosso",
            "Mato Grosso do Sul",
            "Minas Gerais",
            "Pará",
            "Paraíba",
            "Paraná",
            "Pernambuco",
            "Piauí",
            "Rio de Janeiro",
            "Rio Grande do Norte",
            "Rio Grande do Sul",
            "Rondônia",
            "Roraima",
            "Santa Catarina",
            "São Paulo",
            "Sergipe",
            "Tocantins"
        };
        public MainPage()
       {
	InitializeComponent();
       }
        private void SearchConteudo_TextChanged(object sender, TextChangedEventArgs e)
        {
            var keyword = SearchConteudo.Text;
            if (keyword.Length >= 1)
            {
                var sugestao = estados.Where(c => c.ToLower().Contains(keyword.ToLower()));
                listaEstados.ItemsSource = sugestao;
                listaEstados.IsVisible = true;
            }
            else
            {
                listaEstados.IsVisible = false;
            }
        }
        private void ListaEstado_ItemTapped(object sender, ItemTappedEventArgs e)
        {
            if (e.Item as string == null)
            {
                return;
            }
            else
            {
                listaEstados.ItemsSource = estados.Where(c => c.Equals(e.Item as string));
                listaEstados.IsVisible = true;
                SearchConteudo.Text = e.Item as string;
            }
        }
    }
}

Executando o projeto iremos obter o seguinte resultado :

Pegue o código usado no projeto aqui :  XF_SearchBar.zip (somente o projeto compartilhado)

Eu sou a videira verdadeira, e meu Pai é o lavrador.
Toda a vara em mim, que não dá fruto, a tira; e limpa toda aquela que dá fruto, para que dê mais fruto.
 João 15:1,2

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Quer aprender C# ??

Quer aprender os conceitos da Programação Orientada a objetos ?

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

Referências:

José Carlos Macoratti