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

Vamos continuar a segunda parte do artigo definindo o código da View CarouselPage.xaml onde vamos usar a view CarouselView.

Podemos usar a view CarouselView que usa o CollectionView como base, para ajustar o layout usado e adicionar algumas informações semelhantes a cartões de visita.

Um dos grandes recursos fornecidos pelo CollectionView é a capacidade de adicionar pontos de alinhamento (snap).  Para a página que você acabou de projetar, ela permite que a visualização pare entre os cartões.

E se você quiser que apenas um cartão apareça centrado por vez ?

Com as propriedades SnapPointsAlignment e SnapPointsType no ItemsLayout, você pode configurar este comportamento em facilmente, basta adicionar o seguinte código ao seu XAML para ativar esse comportamento:

 <CarouselView.ItemsLayout>
       <GridItemsLayout Orientation="Horizontal" SnapPointsAlignment="Center" SnapPointsType="Mandatory"/>
 </CarouselView.ItemsLayout>

Vamos então alterar o código do arquivo CarouselPage.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.CarouselPage"
             Title="CarouselPage">
    <ContentPage.Content>
        <StackLayout>
            <CarouselView x:Name="ColView1" ItemsSource="{Binding Amigos}" HeightRequest="200"
                          HorizontalOptions="Center" VerticalOptions="CenterAndExpand" Margin="10">               

                <CarouselView.ItemsLayout>
                    <GridItemsLayout Orientation="Horizontal" SnapPointsAlignment="Center" SnapPointsType="Mandatory"/>
                </CarouselView.ItemsLayout>               

                <CarouselView.ItemTemplate>
                    <DataTemplate>
                        <Frame BorderColor="LightGray" CornerRadius="3" HasShadow="False">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="75"/>
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*"/>
                                    <RowDefinition Height="*"/>
                                </Grid.RowDefinitions>
                                <Image Grid.Column="0" Grid.Row="0" Source="person" VerticalOptions="Start"/>
                                <StackLayout Grid.Column="1" Grid.Row="1" HorizontalOptions="EndAndExpand"
                                             VerticalOptions="EndAndExpand">
                                    <Label Text="{Binding}" FontSize="24" HorizontalOptions="EndAndExpand"/>
                                    <Label Text="Endereço" HorizontalOptions="EndAndExpand"/>
                                    <Label Text="Cidade, Estado" HorizontalOptions="EndAndExpand"/>
                                </StackLayout>
                            </Grid>
                        </Frame>
                    </DataTemplate>
                </CarouselView.ItemTemplate>
            </CarouselView>
            <StackLayout VerticalOptions="StartAndExpand">
                <Label Text="Role o CarouselView ou use os controles deslizantes !" HorizontalOptions="CenterAndExpand"/>
                <Slider Minimum="0" Maximum="25" ValueChanged="Slider_ValueChanged" MinimumTrackColor="#01579b"
                           MaximumTrackColor="#01579b" ThumbColor="#9575cd"/>
            </StackLayout>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Para simular os dados de um cartão definimos mais 3 views Label no código para montar o cartão.

Agora no arquivo GridPage.xaml.cs vamos ter que repetir o código para vincular a lista de string novamente e definir o código para controlar o Slider que vai permitir rolar os cartões:

using System;
using System.Collections.Generic;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
namespace XF_CollectionView
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class CarouselPage : ContentPage
    {
        public List<string> Amigos { get; set; }
        public CarouselPage()
        {
            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;
        }
        void Slider_ValueChanged(object sender, ValueChangedEventArgs e)
        {
            ColView1.ScrollTo((int)Math.Floor(e.NewValue));
        }
    }
}

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

Em outro artigo veremos com mais detalhes as propriedades e recursos da CollectionView.

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

"Sujeitai-vos, pois, a Deus, resisti ao diabo, e ele fugirá de vós." Tiago 4:7

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