ListView Agrupada – Xamarin.Forms

Neste artigo irei demonstrar como criar uma ListView agrupada em suas aplicações Xamarin.Forms.

Para este exemplo, irei utilizar o cenário que a nossa ListView irá listar tipos de transporte e será separado por categorias.

 

Comece criando a classe Transporte, contendo as propriedades “Nome” e “Descricao”.

namespace GroupedListApp
{
public class Transporte
{
public string Nome { get; set; }
public string Descricao { get; set; }
public Transporte()
{
}
}
}

view raw
Transporte.cs
hosted with ❤ by GitHub

 

Em seguida, crie a classe Categoria, contendo as propriedades “LongName” e “ShortName”.

using System.Collections.ObjectModel;
namespace GroupedListApp
{
public class Categoria : ObservableCollection<Transporte>
{
public string LongName { get; set; }
public string ShortName { get; set; }
}
}

view raw
Categoria.cs
hosted with ❤ by GitHub

 

Xaml

Crie uma ListView, atribua “true” para a propriedade IsGroupingEnabled e faça Binding com propriedades LongName e ShortName da classe Categoria, como demonstrado a seguir.

Observe que no TextCell o Binding é feito com as propriedades da classe Transporte.

<?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:GroupedListApp"
x:Class="GroupedListApp.MainPage">
<StackLayout>
<ListView x:Name ="listView" IsGroupingEnabled="true"
GroupDisplayBinding="{Binding LongName}"
GroupShortNameBinding="{Binding ShortName}">
<ListView.ItemTemplate>
<DataTemplate>
<TextCell Text="{Binding Nome}" Detail="{Binding Descricao}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage>

view raw
MainPage.xaml
hosted with ❤ by GitHub

 

C#

Crie um ObservableCollection de “Categoria” e adicione alguns valores como demonstrados a seguir.

using System.Collections.ObjectModel;
using Xamarin.Forms;
namespace GroupedListApp
{
public partial class MainPage : ContentPage
{
private ObservableCollection<Categoria> ListaAgrupada { get; set; }
public MainPage()
{
InitializeComponent();
ListaAgrupada = new ObservableCollection<Categoria>();
//Aviao
var aviaoCategoria = new Categoria() { LongName = "Avião", ShortName = "A" };
aviaoCategoria.Add(new Transporte { Nome = "Airbus A380", Descricao = "Aeronave widebody quadrimotor a jato" });
aviaoCategoria.Add(new Transporte { Nome = "Antonov An-225 Mriya", Descricao = "Aeronave de transporte cargueiro estratégico" });
aviaoCategoria.Add(new Transporte { Nome = "Boeing 777", Descricao = "Aeronave widebody bimotor turbofan" });
ListaAgrupada.Add(aviaoCategoria);
//Carro
var carroCategoria = new Categoria() { LongName = "Carro", ShortName = "C" };
carroCategoria.Add(new Transporte { Nome = "Bentley Continental GTC", Descricao = "Grand tourer de duas portas com capacidade para 4 passageiros" });
carroCategoria.Add(new Transporte { Nome = "LaFerrari", Descricao = "Carro esportivo coupé, duas portas, dois lugares, de motor central traseiro" });
carroCategoria.Add(new Transporte { Nome = "Maserati Ghibli", Descricao = "Motor V6 turbodiesel de 250 cv ou 275 cv" });
ListaAgrupada.Add(carroCategoria);
//Moto
var motoCategoria = new Categoria() { LongName = "Moto", ShortName = "M" };
motoCategoria.Add(new Transporte { Nome = "BMW R 1200 GS", Descricao = "Motocicleta com motor boxer bicilíndrico de 4 tempos, Refrigeração líquida e a ar" });
motoCategoria.Add(new Transporte { Nome = "Suzuki Hayabusa", Descricao = "Motocicleta Hyper Sport originalmente apresentada pela Suzuki em 1999" });
motoCategoria.Add(new Transporte { Nome = "Yamaha YZF-R1", Descricao = "Motocicleta superesportiva fabricada pela Yamaha a partir do ano de 1998" });
ListaAgrupada.Add(motoCategoria);
listView.ItemsSource = ListaAgrupada;
}
}
}

view raw
MainPage.xaml.cs
hosted with ❤ by GitHub

 

Resultado

screenshot-1539617212343

 

Esse e todos os exemplos deste blog encontram-se disponíveis no GitHub.

icongithub

2 comentários em “ListView Agrupada – Xamarin.Forms

  1. Parabéns! Como sempre um post! Meu app tem o background na cor preta, tentei colocar o titulo do agrupamento na cor branca (Text Color) e não consegui. Sabe como poderia resolver isso?

    Curtir

    1. Olá Gerbert,

      Obrigado 🙂 🙂

      Altere a cor no arquivo styles.xml que encontra-se no seu projeto .android. Espero ter ajudado.

      Curtir

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s