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() | |
| { | |
| } | |
| } | |
| } |
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; } | |
| } | |
| } |
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> |
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; | |
| } | |
| } | |
| } |
Resultado
Esse e todos os exemplos deste blog encontram-se disponíveis no GitHub.
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