Xamarin Forms -  Recursos do Shell - II
 Neste artigo vou continuar apresentando os recursos do Shell introduzido na versão 4.0 do Xamarin Forms.

Continuando o artigo anterior vamos exibir os dados usando uma CollectionView e depois preparar a exibição dos detalhes.

Para exibir dados eu vou simplificar o exemplo da documentação exibindo apenas algumas informações de cachorros e gatos e outros animais partindo do projeto criado no artigo anterior.

Criando o modelo de domínio e os dados

Vamos criar a pasta Model no projeto e nesta pasta criar a classe Animal que representa nosso domínio.

public class Animal
{
        public string Name { get; set; }
        public string Location { get; set; }
        public string Details { get; set; }
        public string ImageUrl { get; set; }
}

A seguir vamos criar a pasta Data no projeto e nesta pasta vamos criar as classes para fornecer dados para exibir em nosso projeto.

Obs: Em uma aplicação real aqui você chamaria a sua camada de acesso aos dados.

Iniciando com a classe CachorrosData temos o código a seguir:

using System.Collections.Generic;
using XF_ShellApp.Model;

namespace XF_ShellApp.Data
{
    public static class CachorrosData
    {
        public static IList<Animal> Cachorros { get; private set; }

        static CachorrosData()
        {
            Cachorros = new List<Animal>();

            Cachorros.Add(new Animal
            {
                Name = "Afghan Hound",
                Location = "Afghanistan",
                Details = "The Afghan Hound is a hound that is distinguished by its thick, fine, silky coat and its tail with a ring curl at the end. The breed is selectively bred for its unique features in the cold mountains of Afghanistan.  Other names for this breed are Kuchi Hound, Tāzī, Balkh Hound, Baluchi Hound, Barakzai Hound, Shalgar Hound, Kabul Hound, Galanday Hound or sometimes incorrectly African Hound.",
                ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/6/69/Afghane.jpg"
            });

            Cachorros.Add(new Animal
            {
                Name = "Alpine Dachsbracke",
                Location = "Austria",
                Details = "The Alpine Dachsbracke is a small breed of dog of the scent hound type originating in Austria. The Alpine Dachsbracke was bred to track wounded deer as well as boar, hare, and fox. It is highly efficient at following a trail even after it has gone cold. The Alpine Dachsbracke is very sturdy, and Austria is said to be the country of origin.",
                ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/2/23/Alpejski_gończy_krótkonożny_g99.jpg/320px-Alpejski_gończy_krótkonożny_g99.jpg"
            });

            Cachorros.Add(new Animal
            {
                Name = "American Bulldog",
                Location = "United States",
                Details = "The American Bulldog is a breed of utility dog descended from the Old English Bulldog.",
                ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/5/5e/American_Bulldog_600.jpg"
            });

            Cachorros.Add(new Animal
            {
                Name = "Bearded Collie",
                Location = "Scotland",
                Details = "The Bearded Collie, or Beardie, is a herding breed of dog once used primarily by Scottish shepherds, but now mostly a popular family companion. Bearded Collies have an average weight of 18–27 kilograms (40–60 lb). Males are around 51–56 centimetres (20–22 in) tall at the withers while females are around 51–53 centimetres (20–21 in) tall.",
                ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/9/9c/Bearded_Collie_600.jpg"
            });
        }
    }
}

Observe que criamos uma classe estática, que não pode ser instanciada,  e definimos uma lista de objetos do tipo Animal, e criamos um construtor estático onde estamos incluindo os dados dos cachorros. Os dados foram copiados do exemplo da documentação.

Lembrando que um construtor estático é usado para inicializar quaisquer dados estáticos ou para executar uma ação específica que precisa ser executada apenas uma vez. Ele é chamado automaticamente antes que a primeira instância seja criada ou que quaisquer membros estáticos sejam referenciados.

Vamos repetir o procedimento para a classe GatosData e OutrosData. (veja o código dos arquivos no projeto)

Assim já temos as fontes de dados para exibir, e, precisamos definir o leiaute de exibição dos dados.

Para fazer isso vamos criar um Datatemplate chamado AnimalTemplate em Aplication Resources no arquivo App.xaml conforme mostrado a seguir:

<?xml version="1.0" encoding="utf-8" ?>
<Application 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_ShellApp.App">
    <Application.Resources>
        <DataTemplate x:Key="AnimalTemplate">
            <Grid Padding="10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <Image Grid.RowSpan="2" 
                       Source="{Binding ImageUrl}" 
                       Aspect="AspectFill"
                       HeightRequest="80" 
                       WidthRequest="80" />
                <Label Grid.Column="1" 
                       Text="{Binding Name}" 
                       FontAttributes="Bold" />
                <Label Grid.Row="1"
                       Grid.Column="1" 
                       Text="{Binding Location}"
                       FontAttributes="Italic" 
                       VerticalOptions="End" />
            </Grid>
        </DataTemplate>
    </Application.Resources>
</Application>

Para exibir os dados dos cachorros vamos alterar o código da view Caes.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:data="clr-namespace:XF_ShellApp.Data"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="XF_ShellApp.Views.Caes">
    <CollectionView Margin="20"
                    ItemsSource="{x:Static data:CachorrosData.Cachorros}"
                    ItemTemplate="{StaticResource AnimalTemplate}"
                    SelectionMode="Single"
                    SelectionChanged="OnCollectionViewSelectionChanged" />
</ContentPage>

Para exibir os dados estamos usando uma CollectionView onde estamos definindo as propriedades:

  1. ItemsSource - a fonte de dados;
  2. ItemTemplate  - o template para exibir os dados ;
  3. SelectionMode - o modo de seleção = Single;

E no evento SelectionChanged precisamos definir o que fazer quando um item da coleção for selecionado. Por enquanto vamos apenas definir o método OnCollectionViewSelectionChanged no arquivo Caes.xaml.cs sem código algum:

using Xamarin.Forms;
using Xamarin.Forms.Xaml;
namespace XF_ShellApp.Views
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class Caes : ContentPage
    {
        public Caes()
        {
            InitializeComponent();
        }
        void OnCollectionViewSelectionChanged(object sender, SelectionChangedEventArgs e)
        {
           //a declarar
        }
    }
}

Para as outras views basta repetir o procedimento alterando apenas a fonte de dados.

Executando o projeto iremos obter o seguinte resultado :

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

Na próxima parte do artigo vamos implementar exibição dos detalhes para cada um dos itens de dados.

"Quem tem o Filho tem a vida; quem não tem o Filho de Deus não tem a vida."
1 João 5:12

Referências:


José Carlos Macoratti