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

Continuando o artigo anterior vamos mostrar o detalhe dos itens exibidos na CollectionView na seleção do usuário.

Exibindo detalhes

Para exibir os detalhes de um item selecionado primeiro vamos criar as respectivas views na pasta Views do projeto.

Iremos criar as seguintes views do tipo Content Page:

  1. CaoDetailPage.xaml
  2. GatoDetailPage.xaml
  3. OutroDetailPage.xaml

Para a view CaoDetailPage.xaml inclua o código 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_ShellApp.Views.CaoDetailPage"
             Title="Detalhes Cachorro">

    <ScrollView>
        <StackLayout Margin="20">
            <Label Text="{Binding Name}" 
                   HorizontalOptions="Center" 
                   Style="{DynamicResource TitleStyle}" />
            <Label Text="{Binding Location}" 
                   FontAttributes="Italic" 
                   HorizontalOptions="Center" />
            <Frame CornerRadius="100" 
                       HeightRequest="200"
                       WidthRequest="200"
                       HorizontalOptions="Center"
                       Padding="0"
                       IsClippedToBounds="True">
                <Image Source="{Binding ImageUrl}" 
                       VerticalOptions="Center"
                      HorizontalOptions="Center"/>
            </Frame>
            <Label Text="{Binding Details}" 
                   Style="{DynamicResource BodyStyle}" />
        </StackLayout>
    </ScrollView>
</ContentPage>

Neste código usamos um ScrollView e estamos fazendo o data binding com as propriedades do modelo.

Estamos usando o recurso DynamicResource usando os estilos dinâmicos de dispositivos TitleStyle e BodyStyle.

Também estamos aplicando bordas arredondadas na imagem usando um Frame e a propriedade CornerRadius.

Agora para poder obter o item selecionado pelo usuário vamos alterar o código do arquivo CaoDetailPage.xaml.cs e incluir o atributo [QueryProperty] indicando qual a propriedade que usaremos para obter o item selecionado:

using System;
using System.Linq;
using Xamarin.Forms;
using XF_ShellApp.Data;
namespace XF_ShellApp.Views
{
  [QueryProperty("Name", "name")]
  public partial class CaoDetailPage : ContentPage
  {
    public string Name
      {
        set
        {
          BindingContext = CachorrosData.Cachorros.FirstOrDefault(m => m.Name == Uri.UnescapeDataString(value));
         }
     }
    public CaoDetailPage()
     {
         InitializeComponent();
     }
  }
}

Observe usamos uma consulta LINQ com FirstOrDefault que vai retornar o nome do item a partir do nome selecionado onde no método UnescapeDataString estamos convertendo a string em sua representação sem escape.

Precisamos agora definir a rota para as páginas de detalhe no arquivo MainPage.xaml.cs :

using System;
using System.Collections.Generic;
using System.ComponentModel;
using Xamarin.Forms;
using XF_ShellApp.Views;
namespace XF_ShellApp
{
    [DesignTimeVisible(false)]
    public partial class MainPage : Shell
    {
        Dictionary<string, Type> routes = new Dictionary<string, Type>();
        public Dictionary<string, Type> Routes { get { return routes; } }

        public MainPage()
        {
            InitializeComponent();
            RegisterRoutes();
            BindingContext = this;
        }
        void RegisterRoutes()
        {
            routes.Add("gatodetails", typeof(GatoDetailPage));
            routes.Add("caodetails", typeof(CaoDetailPage));
            routes.Add("outrodetails", typeof(OutroDetailPage));
            foreach (var item in routes)
            {
                Routing.RegisterRoute(item.Key, item.Value);
            }
        }
    }
}

Criamos um dicionário para armazenar o par de valores com o nome e tipo da página e registramos a rota de cada página.

Nota: A navegação otimizada usando Rotas permite que navegar para uma página específica sem precisar seguir uma hierarquia de navegação definida. As rotas podem ser definidas nos objetos FlyoutItem, Tab e ShellContent no código-behind ou na tag XAML, através de suas propriedades de rota.

Para concluir temos que completar o código do evento OnCollectionViewSelectionChanged() nas Views Caes.xaml.cs, Gatos.xaml.cs e Outros.xaml.cs para navegar para a página de detalhes.

A seguir estou mostrando apenas o código do evento OnCollectionViewSelectionChanged para as 3 views:

       async void OnCollectionViewSelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            string nomeCachorro = (e.CurrentSelection.FirstOrDefault() as Animal).Name;
            await Shell.Current.GoToAsync($"caodetails?name={nomeCachorro}");
        }
 
       async void OnCollectionViewSelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            string nomeGato = (e.CurrentSelection.FirstOrDefault() as Animal).Name;
            await Shell.Current.GoToAsync($"gatodetails?name={nomeGato}");
        }
 
       async void OnCollectionViewSelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            string nome = (e.CurrentSelection.FirstOrDefault() as Animal).Name;
            await Shell.Current.GoToAsync($"outrodetails?name={nome}");
        }

Aqui estamos usando o recurso Deep Link onde a URL pode ser processada removendo o esquema e o domínio do aplicativo. Deixando o restante do caminho, incluindo os parâmetros da consulta como argumento para navegar até a página de destino. Isso também pode ser usado como navegação no aplicativo.

A View de destino pode capturar o parâmetro decorando a propriedade ViewModel com o atributo QueryProperty, que especifica o nome da propriedade que receberá os dados, com o segundo argumento especificando o ID do parâmetro de consulta.

Agora é só alegria...

Executando o projeto iremos obter o seguinte resultado :

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

Na próxima parte do artigo vamos implementar a pesquisa do Shell em cada página de dados.

"Porque o reino de Deus não é comida nem bebida, mas justiça, e paz, e alegria no Espírito Santo."
Romanos 14:17

Referências:

José Carlos Macoratti