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
Cachorros.Add(new Animal
Cachorros.Add(new Animal
Cachorros.Add(new Animal
Cachorros.Add(new Animal |
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:
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:
Xamarim - Desenvolvimento Multiplataforma com C# ... - Macoratti.net
Curso Xamarin Forms - Macoratti.net
Xamarin Forms - Criando uma página de Login - Macoratti.net
Xamarin Forms - Consumindo uma Web API ... - Macoratti.net
Xamarin Forms - Usando a Câmera - Macoratti.net
Xamarin.Forms - Trabalhando com ListView - Macoratti.net
Xamarin Forms - Apresentando CollectionView - Macoratti.net