Xamarin Forms  -  CollectionView Básico - V
 Neste artigo vou apresentar o novo recurso CollectionView da versão 4.0 do Xamarin Forms.

Continuando a quarta parte do artigo veremos como trabalhar com outras opções de leiautes na CollectionView.

Quando a propriedade SelectionMode estiver definida como Multiple, vários itens no CollectionView podem ser selecionados.

A CollectionView define as seguintes propriedades que controlam o layout:

- ItemsLayout, do tipo IItemsLayout , especifica o layout a ser usado.
- ItemSizingStrategy, do tipo ItemSizingStrategy , especifica a estratégia de medida do item a ser usado.

Por padrão, uma CollectionView exibirá seus itens em uma lista vertical. No entanto, podemos usar quaisquer um dos seguintes layouts:

- Lista vertical – uma lista de coluna única que cresce verticalmente conforme novos itens são adicionados.
- Lista horizontal – uma lista de única linha cresce horizontalmente conforme novos itens são adicionados.
- Grade vertical – uma grade de várias colunas que cresce verticalmente conforme novos itens são adicionados.
- Grade horizontal – uma grade de várias linhas cresce horizontalmente conforme novos itens são adicionados.

Esses layouts podem ser especificados definindo a propriedade ItemsLayout para a classe que deriva da classe ItemsLayout. Essa classe define as seguintes propriedades :

- Orientation, do tipo ItemsLayoutOrientation , especifica a direção na qual o CollectionView se expande conforme itens são adicionados.
- SnapPointsAlignment, do tipo SnapPointsAlignment , especifica como os pontos de alinhamento são alinhados com os itens.
- SnapPointsType, do tipo SnapPointsType , especifica o comportamento de pontos de alinhamento durante a rolagem.

A enumeração ItemsLayoutOrientation define os seguintes membros:

- Vertical - indica que o CollectionView será expandida verticalmente conforme os itens são adicionados.
- Horizontal - indica que o CollectionView expandirá horizontalmente conforme os itens são adicionados.

A classe ListItemsLayout herda da classe ItemsLayout e define uma propriedade ItemSpacing propriedade do tipo double, que representa o espaço vazio ao redor de cada item sendo que o seu valor padarão deve sempre ser maior que ou igual a 0.

A classe ListItemsLayout define também os membros estáticos Vertical e Horizontal. Esses membros podem ser usados para criar listas verticais ou horizontais, respectivamente. Como alternativa, um objeto ListItemsLayout pode ser criado, especificando uma enumeração ItemsLayoutOrientation como um argumento.

O GridItemsLayout herda da classe ItemsLayout e define as propriedades a seguir:

- VerticalItemSpacing, do tipo double, que representa o espaço vertical vazio ao redor de cada item. O valor padrão dessa propriedade é 0, e seu valor deve sempre ser maior que ou igual a 0.

- HorizontalItemSpacing, do tipo double, que representa o espaço horizontal vazio ao redor de cada item. O valor padrão dessa propriedade é 0, e seu valor deve sempre ser maior que ou igual a 0.

- Span, do tipo int, que representa o número de colunas ou linhas a serem exibidas na grade. O valor padrão dessa propriedade é 1, e seu valor deve sempre ser maior que ou igual a 1.

Veremos a seguir cada um dos layouts permitidos lembrando que por padrão a CollectionView exibirá seus itens em um layout da lista vertical. Portanto, não é necessário definir a propriedade ItemsLayout para usar este layout.

No entanto, para fins de integridade podemos definir sua propriedade ItemsLayout com o valor de VerticalList:

<CollectionView ItemsSource="{Binding Times}"
                ItemsLayout="VerticalList">
    ...
</CollectionView>

Vejamos a seguir a implementação da lista horizontal.

Implementando uma Lista Horizontal na CollectionView

Vamos usar o projeto criado na quarta parte do artigo.

No projeto criado vamos incluir uma nova view do tipo Content Page chamada HorizontalListPage.xaml e incluir o código abaixo nesta view:

<?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_CollectinViewBasico.Views.HorizontalListPage">
    <ContentPage.Content>
        <StackLayout Margin="15">
            <CollectionView ItemsSource="{Binding Times}"
                        ItemsLayout="HorizontalList">
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <Grid Padding="5">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="35" />
                                <RowDefinition Height="35" />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="70" />
                                <ColumnDefinition Width="120" />
                            </Grid.ColumnDefinitions>
                            <Image Grid.RowSpan="2" 
                               Source="{Binding ImagemUrl}" 
                               Aspect="AspectFill"
                               HeightRequest="60" 
                               WidthRequest="60" />
                            <Label Grid.Column="1" 
                               Text="{Binding Nome}" 
                               FontAttributes="Bold"
                               LineBreakMode="TailTruncation" />
                            <Label Grid.Row="1"
                               Grid.Column="1" 
                               Text="{Binding Pontos}"
                               LineBreakMode="TailTruncation"
                               FontAttributes="Italic" 
                               VerticalOptions="End" />
                        </Grid>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Este código é praticamente idêntico ao usado na view CollectionViewSingleSelectionPage.xaml do projeto. A diferença é que definimos a propriedade ItemsLayout com o valor HorizontalList. Ajustamos o grid para duas colunas.

Agora no arquivo HorizontalListPage.xaml.cs vamos incluir o seguinte código:

using Xamarin.Forms;
using Xamarin.Forms.Xaml;
using XF_CollectinViewBasico.ViewModels;
namespace XF_CollectinViewBasico.Views
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class HorizontalListPage : ContentPage
    {
        public HorizontalListPage()
        {
            InitializeComponent();
            BindingContext = new TimesViewModel();
        }
    }
}

Aqui estamos obtendo os itens selecionados anteriormente e atualmente.

Vamos alterar o código do arquivo App.xaml.cs para exibir a view criada neste artigo:

        public App()
        {
            InitializeComponent();
            MainPage = new HorizontalListPage();
        }

Executando o projeto iremos obter o seguinte resultado:

Na próxima parte do artigo veremos os layouts da grade vertical na CollectionView.

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

"Por que estás abatida, ó minha alma, e por que te perturbas dentro de mim? Espera em Deus, pois ainda o louvarei, o qual é a salvação da minha face, e o meu Deus."
Salmos 42:11

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