Como utilizar listas

Listas – Como Utilizar

Bom Dia Pessoal,

Nessa nova série do posts irei explicar um pouco de alguns componentes, tratando o ListView como o foco principal.

Vamos aprender a criar listas, ordena-las, usar cabeçalhos e rodapés, implementar a barra de pesquisa entre outras funcionalidades legais.

No fim dessa série, iremos implementar uma simples, mas bela, lista de contatos.

Listas – ListView

O ListView é um componente que funciona em cima de 2 propriedades principais:

ItemTemplate – Responsável por definir o layout das linhas da lista, o Whats App por exemplo, cada linha da lista de conversa possui uma foto, o nome do contato/grupo, o horário da última mensagem, se está no silencioso ou não e a última mensagem/Pessoa está digitando.

ItemSource – Lista que representa os dados que iram aparecer na lista, como uma lista de contatos, músicas, eventos… Use a Imaginação :)

Criando sua primeira Lista

Primeiro, vamos criar um projeto do tipo Xamarin.Forms Portable, dar um nome para ele, usarei ContactList.

No projeto principal, Portable, adicione uma Pasta nomeada Views e dentro dessa pasta adicione um Arquivo do tipo Forms Xaml Page chamado ListaContatos.

Deixe ela da seguinte forma

Abra o arquivo ListaContatos.xaml.cs e crie um Vetor do tipo String contendo os nomes dos nossos contatos e atribua ele como o ItemSource da nossa ListView:

Além disso, na classe App.Cs, no método App(), altere a atribuição da MainPage para

MainPage = new ListaContatos();

Execute o APP na sua plataforma de preferencia, irei executar no emulador do Windows Phone, segue o resultado:

Listas no Windows Phone

Pronto, fizemos uma lista simples. Agora vamos trabalhar com a criação de uma classe de Modelo para os contatos e criar um template para as linhas da nossa ListView.

DataTemplate, DataBinding e List

Nosso primeiro passo será criar uma pasta com o nome Model no nosso projeto Portable com a classe Contato tendo a seguinte implementação:

Agora altere o XAML para que fique da seguinte forma

A propriedade HasUnevenRows permitira que a linha seja ajusta par ao tamanho necessário de acordo com os itens que possua dentro.

O ItemTemplate possui nosso DataTemplate, onde definimos como será cada uma das nossas linhas, desde formatação a campos existentes, e todos os Binding farão com que os valores do ItemSource seja atribuído aquela propriedade.

No nosso code behind, teremos a seguinte logica, para poder popular a lista com contatos estáticos:

Nosso resultado será esse:

Listas com DataBinding

Por enquanto é só, nosso próximo post terá uma forma de customizar melhor nossa lista de contatos, criar uma página de detalhe para os itens dessa lista e buscar os contatos a partir de uma Web Api :)

Encontre o código no GitHub

Listas – Como Utilizar 5.00/5 (100.00%) 1 voto

Rafael Moura

Desenvolvedor .NET, mais de 5 anos de experiência, apaixonado por tecnologia, Xamarin Student Partner Regional Lead Central/South America, Xamarin Comunity Speaker, Xamarin Certified Mobile Developer e Windows Phone Developer.

11 comentários em “Listas – Como Utilizar

  1. Boa tarde pessoal, sou iniciante no xamarin e estou achando ele bem interessante, porém bem complicado, rsrs.

    Estou com um problema para debugar qualquer coisa que eu faça no xamarin, outro grande problema é na própria criação e estrutura de um app, exemplo, estou tentando montar um app bem institucional só para ver como proceder, crio a pasta /page no projeto e vou incluindo ali as página, (indexPage / sobrePage / etc etc…), porém sem muito sucesso.

    Teria alguma aula mais detalhada sobre esta estrutura? Algum vídeo?

    Obrigado pessoal, abraço.

    1. Opa Thiago

      Ainda não temos algo nesse sentido mas faça o seguinte, me manda um email com uma compilação de todas suas duvidas ali na aba contato que vamos conversando sobre. Adoraríamos te ajudar cara! Muito sucesso nesse novo ano!

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

%d blogueiros gostam disto: