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

https://gist.github.com/83cd6c3662632ca2742a

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:

https://gist.github.com/bd71ff0af0a33e0c1b8e

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):

Lista Xamarin WP

DataTemplate, DataBinding e List

O 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/f058b2c2dd5052f91fbf

Agora altere o XAML para que fique da seguinte forma

https://gist.github.com/63d8499469c87a714f5a

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:

https://gist.github.com/197dbad423575c49d847

O Resultado será esse:

 

Lista Xamarin WP

 

 

Existem outras coisas que podemos fazer com as listas, com o tempo vamos mostrando um pouco disso 🙂

 

Encontre o código no GitHub

Via Studyxnet

Desenvolvedor .NET, apaixonado por tecnologia, Xamarin Student Ambassador, Xamarin Comunity Speaker, Xamarin Certified Developer e Windows Phone Developer. Dono do https://studyxnet.com.br/

Facebook Twitter LinkedIn Google+ 

Comentários

comentarios