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:
Super DVD Vídeo Aulas - Vídeo Aula sobre VB .NET, ASP .NET e C#
Super DVD C# - Recursos de aprendizagens e vídeo aulas para C#
Curso Fundamentos da Programação Orientada a Objetos com VB .NET
Xamarim - Desenvolvimento Multiplataforma com C# ... - Macoratti.net
Xamarin.Forms - Olá Mundo - Criando sua primeira ... - Macoratti.net
Xamarin.Forms - Olá Mundo - Anatomia da aplicação - Macoratti.net
https://developer.xamarin.com/api/type/Android.Widget.ListView/
https://developer.xamarin.com/api/property/Android.Widget.ListView.Adapter/
https://developer.xamarin.com/guides/xamarin-forms/user-interface/animation/