Xamarin Forms  -  Apresentando CollectionView - I
 Neste artigo vou apresentar o novo recurso CollectionView da versão 4.0 do Xamarin Forms.

O Xamarin.Forms vem evoluindo e melhorando a cada nova versão e com a versão 4.0 temos muitas novidades. Hoje vou apresentar o recurso CollectionView.

A CollectionView é uma view para apresentar listas de dados usando diferentes especificações de layout. O objetivo é fornecer uma alternativa mais flexível e eficiente ao ListView.

Este recurso esta disponível a partir da versão 4.0, e, quando escrevi este artigo, estava em modo experimental. Para poder usar a CollectionView teremos que adicionar o código abaixo ás classes AppDelegate no iOS, e, MainActivity no Android, antes da chamada de Forms.Init: 


 global::Xamarin.Forms.Forms.SetFlags("CollectionView_Experimental");

Embora sejam similares, cabe destacar as seguintes diferenças entre a ListView e a CollectionView:

  1. A CollectionView possui um modelo de layout flexível, que permite que os dados sejam apresentados na vertical ou na horizontal, em uma lista ou grade;

  2. A CollectionView suporta seleção única e múltipla;

  3. A CollectionView não tem conceito de células. Em vez disso, um modelo de dados é usado para definir a aparência de cada item de dados na lista.

  4. A CollectionView usa automaticamente a virtualização fornecida pelos controles nativos subjacentes.

  5. A CollectionView reduz a superfície da API do ListView. Muitas propriedades e eventos do ListView não estão presentes no CollectionView.

  6. A CollectionView não inclui separadores internos.

Uma mudança que cabe destacar é que a CollectionView não possui o ViewCell oque melhora muito o desempenho.

Se você desejar migrar a ListView para a CollectionView pode consultar o roteiro na documentação oficial neste link: https://docs.microsoft.com/pt-br/xamarin/xamarin-forms/user-interface/collectionview/introduction

Vejamos agora um exemplo prático mostrando como usar a CollectionView.

Recursos usados:

Criando o projeto no Visual Studio 2019 Community

Abra o VS 2019 Community e clique em Create a New Project;

A seguir selecione :

Selecione o template:  Mobile App (Xamarin.Forms) e clique em Next;

A seguir informe o local e o nome do projeto : XF_CollectionView

A seguir selecione o template Blank e as plataformas que deseja usar. Eu vou usar somente o Android:

Clique no botão OK.

Pronto, nosso projeto já esta criado.

A primeira coisa a fazer e alterar o código do arquivo MainActivity do projeto Android incluindo a linha destacada em azul conforme abaixo:

protected override void OnCreate(Bundle savedInstanceState)
 {
         TabLayoutResource = Resource.Layout.Tabbar;
            ToolbarResource = Resource.Layout.Toolbar;
            base.OnCreate(savedInstanceState);
            global::Xamarin.Forms.Forms.SetFlags("CollectionView_Experimental");
            Xamarin.Essentials.Platform.Init(this, savedInstanceState);
            global::Xamarin.Forms.Forms.Init(this, savedInstanceState);
            LoadApplication(new App());
}

Se estiver usando também a plataforma iOS faça a mesma coisa na classe AppDelegate.

A seguir, ainda no projeto Android, vamos incluir 5 imagens, listadas a seguir, na pasta /Resources/drawable que iremos usar no projeto.

  1. carousel.png
  2. empty.png
  3. grid.png
  4. list.png
  5. person.png

As imagens podem ser obtidas no site: https://material.io/resources/icons/?style=baseline

Implementando um layout básico com CollectionView e Shell

Vamos incluir no projeto, via opção Add New Item, um novo Content Page com o nome de CollectionViewPage.

Vamos usar o arquivo CollectionViewPage.xaml criado para definir um layout básico usando o CollectionView:

<?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:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="XF_CollectionView.CollectionViewPage">
    <ContentPage.Content>
        <StackLayout>
            <CollectionView x:Name="ColView1" ItemsSource="{Binding Amigos}"
                        Margin="10,0,0,0">
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <StackLayout HeightRequest="50" WidthRequest="200" 
                                 Orientation="Horizontal" Padding="0,5,0,5">
                            <Image Source="person"/>
                            <Label Text="{Binding}" VerticalOptions="Center"/>
                        </StackLayout>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Observe que a CollectionView é muito parecida com a ListView possuindo o DataTemplate e a propriedade ItemsSource.

Agora abra o arquivo CollectionViewPage.xaml.cs e inclua o código que define uma lista de strings com nomes que iremos usar para exibir na CollectionView:

using System.Collections.Generic;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
namespace XF_CollectionView
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class CollectionViewPage : ContentPage
    {
        public List<string> Amigos { get; set; }
        public CollectionViewPage()
        {
            InitializeComponent();
            Amigos = new List<string>
            {
                "Pedro","Beatriz","Carlos","David","Eduardo","Francisco","Gil","Helena","Ivan",
                "Joel","Cristina","Laurinda","Maria","Nanci","Olivia","Paulo","Amanda",
                "Roberto","Sofia","Timoteo","Ursula","Vincente","William","Xavier","Ivonne"
            };
            ColView1.BindingContext = this;
            // Vertical é o padrão
            ColView1.ItemsLayout = new ListItemsLayout(ItemsLayoutOrientation.Vertical);
        }
    }
}

Observe que agora podemos definir a orientação na CollectionView, usando a propriedade ItemsLayoutOrientation , sendo que a padrão é a Vertical. Podemos também fazer a rolagem lateral.

Criando uma página para navegação usando o Shell

Agora eu vou criar uma página para definir opções e navegação usando o novo recurso Shell.

Nota: Para saber mais sobre este recurso veja o meu artigo: Xamarin.Forms : Apresentando o Shell

Antes vamos incluir mais duas views do tipo ContentPage:

  1. A view GridPage
  2. A view CarouselPage

Iremos usar essas views para exibir outras opções de leiaute mais adiante. Por isso vou definir, por enquanto, apenas uma Label com o nome da view conforme código a seguir:

 <StackLayout>
            <Label Text="GridPage" TextColor="Blue" FontSize="Large"
                VerticalOptions="CenterAndExpand" 
                HorizontalOptions="CenterAndExpand" />
</StackLayout>

Continuando, vamos aproveitar o arquivo MainPage.xaml já criado no projeto e incluir o código abaixo neste arquivo. Note que alteramos o tipo de Content para Shell:

<?xml version="1.0" encoding="utf-8" ?>
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:XF_CollectionView="clr-namespace:XF_CollectionView"
             mc:Ignorable="d"
             x:Class="XF_CollectionView.MainPage">

     <ShellItem>
        <ShellSection Title="Basic" Icon="list">
            <ShellContent>
                <XF_CollectionView:CollectionViewPage/>
            </ShellContent>
        </ShellSection>
        <ShellSection Title="Grid" Icon="grid">
            <ShellContent>
                <XF_CollectionView:GridPage/>
            </ShellContent>
        </ShellSection>
        <ShellSection Title="Carousel" Route="carousel" Icon="carousel">
            <ShellContent>
                <XF_CollectionView:CarouselPage/>
            </ShellContent>
        </ShellSection>
    </ShellItem>

</Shell>

Para concluir abra o arquivo MainPage.xaml.cs e altere o código para que a página herde de Shell:

using System.ComponentModel;
using Xamarin.Forms;
namespace XF_CollectionView
{
    [DesignTimeVisible(false)]
    public partial class MainPage : Shell
    {
        public MainPage()
        {
            InitializeComponent();
        }
    }
}

Executando o projeto iremos obter o seguinte resultado:

Na próxima parte do artigo vamos definir os demais leiautes nas views GridPage e CarouselPage.

Pegue o código do projeto compartilhado aqui :  XF_CollectionView.zip (sem as referências)

"Aquele que nem mesmo a seu próprio Filho poupou, antes o entregou por todos nós, como nos não dará também com ele todas as coisas ? "
Romanos 8:32

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Quer aprender C# ??

Quer aprender os conceitos da Programação Orientada a objetos ?

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

Referências:

José Carlos Macoratti