Xamarin Forms CollectionView – Part I EmptyList

Fala galera. Hoje vamos falar um pouco de um componente que foi liberado recentemente na versão 4.3 do Xamarin Forms que é a CollectionView, que é um componente para trabalhar com a listagem de dados com a flexibilidade de utilizar diferentes tipos de layouts que você pode criar.

Eu não sei vocês, mas eu mais de uma vez tive que criar na tela dos meus apps uma mensagem de listagem vazia. Então hoje mais especificamente vamos falar de uma de suas propriedades, o EmptyView.

O EmptyView, nos fornece a possibilidade de exibir desde uma simples Label com um texto informando o usuário, até a criação de um layout mais elaborado. Isso de uma forma muito simples.

Neste exemplo vamos utilizar o CollectionView para fazer a listagem de objetos da classe Monkey.

public class Monkey
{
   public string Name { get; set; }
}

Também vamos criar a nossa MainViewModel, que terá nossas listagem dos objetos Monkey para fazermos o binding com a nossa CollectionView.

public class MainViewModel : BaseViewModel
{
   public ObservableCollection<Monkey> Monkeys { get; set; }
   public MainViewModel()
   {
      Monkeys = new ObservableCollection<Monkey>();
   }
}

Note que em nossa ViewModel apenas instanciamos a nossa propriedade Monkeys.

Com nossa Model e ViewModel prontas vamos adicionar a CollectionView em nossa MainPage.

<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="XFCollectionViewTest.Views.MainPage">
    <StackLayout>
        <CollectionView
            ItemsSource="{Binding Monkeys}"
            EmptyView="Nenhum item para listar">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <StackLayout
                        Padding="10">
                        <Label
                            Text="{Binding Name}"/>
                    </StackLayout>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </StackLayout>
</ContentPage>

Note que a propriedade ItemSource está fazendo binding com a nossa propriedade Monkeys. Logo abaixo definimos um texto para a propriedade EmptyView. Se executarmos nosso projeto e tudo der e nada der errado termos o seguinte resultado.

Image do app execuntando com nenhum item sendo exibido na listagem e exibindo o texto de listagem vazia.

Podemos ver que sem fazer manobras mirabolantes conseguimos exibir a mensagem de que não temos itens para exibir na listagem. Para deixar esse recurso ainda mais interessante vamos customizar nos layout. Mas esse será o assunto do próximo post. Até lá.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s

Este site utiliza o Akismet para reduzir spam. Saiba como seus dados em comentários são processados.