NET MAUI - CollectionView

.NET MAUI - CollectionView

Hoje veremos a view CollectionView no .NET MAUI.

O .NET MAUI é de código aberto e é a evolução do Xamarin.Forms, estendido de cenários móveis a desktops, com controles de IU reconstruídos do zero para desempenho e extensibilidade.

Se você já usou o Xamarin.Forms anteriormente para criar aplicações multiplataforma, você notará muitas semelhanças com o .NET MAUI. E a view ListView que iremos apresentar usa praticamente os mesmos conceitos do Xamarin.

CpllectionView

A view CollectionView do .NET MAUI é uma view para apresentar listas de dados usando diferentes especificações de layout. Ele visa fornecer uma alternativa mais flexível e de melhor desempenho ao ListView.

Da mesma forma que a classe ListView a CollectionView inclui as seguintes propriedades que definem os dados a serem exibidos e sua aparência:

ItemsSource, do tipo IEnumerable, especifica a coleção de itens a serem exibidos e tem um valor padrão de null.
ItemTemplate, do tipo DataTemplate, especifica o modelo a ser aplicado a cada item da coleção de itens a serem exibidos.

Essas propriedades são apoiadas por objetos BindableProperty, o que significa que as propriedades podem ser destinos de associações de dados.

A CollectionView define uma propriedade ItemsUpdatingScrollMode que representa o comportamento de rolagem do CollectionView quando novos itens são adicionados a ele.

Criando o projeto .NET MAUI

Para mostrar isso vamos criar um novo projeto no VS 2022 Preview usando o template .NET MAUI App com o nome Maui_CollectionView onde vamos usar uma CollectionView para exibir uma lista de lanches. Para isso vamos preencher uma CollectionView com dados usando sua propriedade ItemsSource.

Vamos criar uma pasta Models no projeto e nesta pasta vamos criar a classe ListModel que representa os dados dos lanches que queremos exibir:

public class ListModel
{
    public string Nome { get; set; }
    public string Detalhe { get; set; }
    public string Imagem { get; set; }
}

Na pasta Resources/Images vamos incluir todas as imagens que iremos usar no projeto.

A seguir vamos criar a pasta Pages no projeto e nesta pasta criar uma MAUI Content Page chamada CollectionViewPage.

No arquivo CollectionViewPage.xaml vamos criar uma CollectionView que usa um ItemTemplate e define um DataTemplate vinculando os dados dos lanches que desejamos exibir na lista.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiApp_ListView1.Pages.ListViewPage"
             Title="Lanches">
    <ScrollView>
    <VerticalStackLayout>

       <ListView x:Name="lv2">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ImageCell Text="{Binding Nome}" ImageSource="{Binding Imagem}"/>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

    </VerticalStackLayout>
</ScrollView>
</ContentPage>

No arquivo ListViewPage.xaml.cst inclua o código abaixo que cria a lista de lanches com base na classe ListModel :

public partial class ListViewPage : ContentPage
{
    public ListViewPage()
    {
        InitializeComponent();
        CarregaItens();
    }
    void CarregaItens()
    {
        ObservableCollection<ListModel> Lanches = new ObservableCollection<ListModel>();
      lv2.ItemsSource = new List<ListModel>
        {
               new ListModel { Nome="Cheese Burger Completo",
Detalhe = "Chesse Burger irresistível", Imagem ="cheeseburger1.jpg" },
                new ListModel { Nome="Cheese Salada Completo",
Detalhe = "Chesse Salada delicioso ", Imagem = "cheesesalada1.jpg" },
                new ListModel { Nome="Cheese Burger com Ovo",
Detalhe = "Chesse Burger com ovo", Imagem = "cheeseburgerovo1.jpg" },
                new ListModel { Nome="Lanche Vegano especial",
Detalhe = "Lanche Vegano Especial", Imagem = "lanchevegano1.jpg" },
                new ListModel { Nome="Coca Cola",
Detalhe = "Coca Cola 350 ml", Imagem = "coca1.jpg" },
                new ListModel { Nome="Misto quente especial",
Detalhe = "Misto quente especial com queijo e presuto",
Imagem = "mistoquente4.jpg" }
        };
    }
}

Neste código vinculamos a ListView usando a propriedade ItemsSource à nossa lista de lanches.

Agora vamos ajustar o código da Content Page AppShell.xaml para exibir um menu Flyout com as opções Home e Lanches:

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="MauiApp_ListView1.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:MauiApp_ListView1.Pages"
    xmlns:local2="clr-namespace:MauiApp_ListView1"
    Shell.FlyoutBehavior="Flyout">

</Shell>

A seguir vamos alterar o código da MainPage.xaml conforme abaixo:

</ContentPage>

Executando o projeto teremos o resultado abaixo:

Essa abordagem não é a mais indica para exibir itens em uma lista principalmente quando temos muitos itens. Em outro artigo veremos como usar a view CollectionView.

Pegue o projeto aqui: MauiApp_ListView1.zip (sem as referências)

"Já vos não chamarei servos, porque o servo não sabe o que faz o seu senhor; mas tenho-vos chamado amigos, porque tudo quanto ouvi de meu Pai vos tenho feito conhecer."
João 15:15

Referências:

José Carlos Macoratti