Xamarin Forms -  ListView com Busca dinâmica

Hoje vamos recordar como usar fazer uma busca dinâmica em uma ListView 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 de dados de clientes.

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

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

Recursos usados:

Criando o projeto no Visual Studio 2017 Community

Abra o  VS 2017 Community e clique em New Project e a seguir escolha Cross Platform -> Mobile App (Xamarin.Forms) e informe o nome XF_LvProcura;

A seguir selecione a Plataforma (eu marquei somente Android) e escolha a estratégia de compartilhamento que será .NET Standard.

Clique no botão OK.

Pronto, nosso projeto já esta criado.

Definindo o modelo de domínio e a ViewModel

Crie no projeto uma pasta ViewModel e nesta pasta crie a classe ListModel que representa nosso modelo de domínio, os clientes cujos dados vamos exibir. (Coloquei a classe nesta pasta apenas para simplificar)

    public class ListModel
    {
        public string Nome { get; set; }
        public string Detalhe { get; set; }
        public string Imagem { get; set; }
    }

Agora na mesma pasta crie o arquivo ListViewModel que representa a nossa viewmodel:

using System.Collections.ObjectModel;

namespace XF_LvProcura.ViewModel
{
    public class ListViewModel
    {
        public ObservableCollection<ListModel> lvClientes { get; set; }

        public ListViewModel()
        {
            lvClientes = new ObservableCollection<ListModel>()
            {
                new ListModel(){ Nome="Alexa" , Detalhe="Autora popular de contos" , Imagem = "https://res.cloudinary.com/demo/image/upload/w_400,h_400,c_crop,g_face,r_max/w_200/lady.jpg" },
                new ListModel(){ Nome="Amanda" , Detalhe="Paisagista com trabalhos premiados " , Imagem = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTr8hbJMPoCcTm9jss9otFgeL-zJx5Ve8mP1v3yq3oTl0FecoO6"},
                new ListModel(){ Nome="Rose" ,  Detalhe="Cantora de música sertaneja  ",Imagem="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTCTuJWZbbnmUl5HGDn7s0V40HTYjRZ8WCbkhU2M3flAg3k44DB"},
                new ListModel(){ Nome="Benedita" , Detalhe="Chef especializa em comida baiana  ",Imagem="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQq2AQqPeiJXiPjuos3LPJWTDJzv7Sq68ccRc7dUO3O1JXEbam0"},

                new ListModel(){ Nome="Maria" , Detalhe="Atriz da novela - Meus sonhos" , Imagem = "https://res.cloudinary.com/demo/image/upload/w_400,h_400,c_crop,g_face,r_max/w_200/lady.jpg" },
                new ListModel(){ Nome="Patricia" , Detalhe="Apresentadora do programa - Vem Comigo" , Imagem = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTr8hbJMPoCcTm9jss9otFgeL-zJx5Ve8mP1v3yq3oTl0FecoO6"},
                new ListModel(){ Nome="Suzana" , Detalhe="Chef especializa em doces",Imagem="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTCTuJWZbbnmUl5HGDn7s0V40HTYjRZ8WCbkhU2M3flAg3k44DB"},
                new ListModel(){ Nome="Sonia" , Detalhe="Youtuber do canal - Sucesso em destaque",Imagem="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQq2AQqPeiJXiPjuos3LPJWTDJzv7Sq68ccRc7dUO3O1JXEbam0"},
                new ListModel(){ Nome="Silmara" , Detalhe="Escritora de novelas para adolescentes" , Imagem = "https://res.cloudinary.com/demo/image/upload/w_400,h_400,c_crop,g_face,r_max/w_200/lady.jpg" },
                new ListModel(){ Nome="Carina" , Detalhe="Maquiadora premiada de fama internacional." , Imagem = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTr8hbJMPoCcTm9jss9otFgeL-zJx5Ve8mP1v3yq3oTl0FecoO6"},
                new ListModel(){ Nome="Debora" , Detalhe="Cantora do grupo de pagode - Sai de baixo",Imagem="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTCTuJWZbbnmUl5HGDn7s0V40HTYjRZ8WCbkhU2M3flAg3k44DB"},
                new ListModel(){ Nome="Monica" , Detalhe="Youtuber do canal - Ciência em destaque ", Imagem="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQq2AQqPeiJXiPjuos3LPJWTDJzv7Sq68ccRc7dUO3O1JXEbam0"},
            };
        }
    }
}

Neste código definimos uma coleção de objetos ListModel do tipo ObservableCollection e preenchemos a lista com alguns dados para exibir no ListView.

Aqui os dados poderiam vir de um serviço REST que retorna um JSON a partir de uma fonte de dados.

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_LvProcura"
             x:Class="XF_LvProcura.MainPage">
    <ContentPage.Content>        
        <StackLayout Padding="10,0,10,0">
            <SearchBar TextChanged="Handle_TextChanged"></SearchBar>
            <ListView  ItemsSource="{Binding lvClientes}" IsPullToRefreshEnabled="True"  
                       x:Name="clientesListView" HasUnevenRows="true" SeparatorVisibility="Default" >
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <StackLayout Orientation="Horizontal">
                                <Image Source="{Binding Imagem}" HeightRequest="50" WidthRequest="50"  />
                                <StackLayout HorizontalOptions="StartAndExpand">
                                    <Label Text="{Binding Nome}" FontAttributes="Bold" />
                                    <Label Text="{Binding Detalhe}" TextColor="Gray" />
                                </StackLayout>
                                <Button Text="Siga-me"
                                   BorderColor="Silver"
                                   FontSize="Small"
                                   TextColor="White"
                                   BackgroundColor="#3399ff"
                                   VerticalOptions="Center"
                                   Clicked="Handle_Clicked" />
                            </StackLayout>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Neste código estamos usando as seguintes views:

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

No código a seguir definimos o BindingContext e fazemos o tratamento dos eventos Handle_TextChanged e Handle_Clicked :

using System;
using System.Linq;
using Xamarin.Forms;
using XF_LvProcura.ViewModel;
namespace XF_LvProcura
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            BindingContext = new ListViewModel();
        }
        private void Handle_TextChanged(object sender, TextChangedEventArgs e)
        {
            var _container = BindingContext as ListViewModel;
            clientesListView.BeginRefresh();
            if (string.IsNullOrWhiteSpace(e.NewTextValue))
                clientesListView.ItemsSource = _container.lvClientes;
            else
                clientesListView.ItemsSource = _container.lvClientes.Where(i => i.Nome.Contains(e.NewTextValue));
            clientesListView.EndRefresh();
        }
        private void Handle_Clicked(object sender, EventArgs e)
        {
            var _container = BindingContext as ListViewModel;
            DisplayAlert("Parabéns", "Voce acabou de se inscrever", "OK", "Cancel");
        }
    }
}

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

Executando o projeto iremos obter o seguinte resultado :

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

"Meus filhinhos, estas coisas vos escrevo, para que não pequeis; e, se alguém pecar, temos um Advogado para com o Pai, Jesus Cristo, o justo."
1 João 2:1

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