Listas — ListView no Xamarin

NetCoders
netcoders
Published in
2 min readJul 17, 2015

Começando a falar um pouco do Xamarin.Forms, vamos apresentar vários componentes nos proximos dias aqui no blog.

Que tal começarmos falando um pouco de Listas?

Xamarin.Forms ListView

O ListView é um componente do Xamarin.Forms 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, Xamarin.Forms 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();O Resultado será algo parecido com a imagem que segue (Windows Phone):DataTemplate, DataBinding e ListO Xamarin.Forms nos permite utilizar a arquitetura MVVM no projeto sem a necessidade de Libs terceiras, como o MVVM Cross. Para isso nosso primeiro passo será criar uma pasta com o nome Model no nosso projeto Portable com a classe Contato tendo a seguinte implementação:https://gist.github.com/f058b2c2dd5052f91fbfAgora altere o XAML para que fique da seguinte formahttps://gist.github.com/63d8499469c87a714f5aA 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:https://gist.github.com/197dbad423575c49d847O Resultado será esse:Existem outras coisas que podemos fazer com as listas, com o tempo vamos mostrando um pouco disso :)Encontre o código no GitHubVia Studyxnet

--

--