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”.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| namespace GroupedListApp | |
| { | |
| public class Transporte | |
| { | |
| public string Nome { get; set; } | |
| public string Descricao { get; set; } | |
| public Transporte() | |
| { | |
| } | |
| } | |
| } |
Em seguida, crie a classe Categoria, contendo as propriedades “LongName” e “ShortName”.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| using System.Collections.ObjectModel; | |
| namespace GroupedListApp | |
| { | |
| public class Categoria : ObservableCollection<Transporte> | |
| { | |
| public string LongName { get; set; } | |
| public string ShortName { get; set; } | |
| } | |
| } |
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?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> |
C#
Crie um ObservableCollection de “Categoria” e adicione alguns valores como demonstrados a seguir.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | |
| } | |
| } | |
| } |
Resultado
Esse e todos os exemplos deste blog encontram-se disponíveis no GitHub.
Juliano Custódio 
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?
CurtirCurtir
Olá Gerbert,
Obrigado 🙂 🙂
Altere a cor no arquivo styles.xml que encontra-se no seu projeto .android. Espero ter ajudado.
CurtirCurtir