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

Vamos continuar a primeira parte do artigo definindo os demais leiautes usados pela CollectionView.

Por padrão, a CollectionView assume um layout linear. Isso significa que você pode fazer outros tipos de listas além das listas verticais. Para isso basta definir a propriedade ItemsLayout como uma nova instância de ListItemsLayout que usa um parâmetro ItemsLayoutOrientation (Vertical | Horizontal).

A CollectionView suporta a propriedade GridItemsLayout com as seguintes opções:

Assim podems receber uma lista rolável, mas agora com itens em cada linha e fazer a rolagem.

E se não houver mais itens para exibir, basta usar o recurso EmptyView:

<CollectionView.EmptyView>
   <Label Text="Sem itens para exibir :("/>
</CollectionView.EmptyView>

Para ver isso funcionando altere o código do arquivo GridPage.xaml conforme abaixo:

<?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.GridPage"
             Title="GridPage">
    <ContentPage.Content>
        <StackLayout>
            <CollectionView x:Name="ColView1" ItemsSource="{Binding Amigos}" 
                            VerticalOptions="Center" HorizontalOptions="Center" Margin="5,0,5,0">
                <CollectionView.ItemsLayout>
                    <GridItemsLayout Orientation="Vertical" Span="2"/>
                </CollectionView.ItemsLayout>
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <Frame BorderColor="LightGray" CornerRadius="2" HasShadow="False">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="100" />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>
                                <Image Grid.Column="0" Source="person" Aspect="AspectFit"/>
                                <StackLayout Grid.Column="1">
                                    <Label Text="{Binding}" HorizontalOptions="EndAndExpand" 
                                           VerticalOptions="CenterAndExpand"/>
                                </StackLayout>
                            </Grid>
                        </Frame>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

O código define agora na propriedade Itemslayout , o GridItemsLayout com uma orientação Vertical e Span igual a 2.

No arquivo GridPage.xaml.cs vamos ter que repetir o código para vincular a lista de string novamente. (coisas de demonstração...Você pode criar uma classe para fornecer a lista de strings...)

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;
        }
    }
}

Executando novamente o projeto e testando a implementação feita iremos obter o seguinte resultado:

Na próxima parte do artigo vamos definir o código da view CarouselPage onde vamos usar a view CarouselView como um controle separado.

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

(disse Jesus) - "Porque por tuas palavras serás justificado, e por tuas palavras serás condenado."
Mateus 12:37

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