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

O Xamarin.Forms Shell é uma nova maneira de criar e arquitetar facilmente os aplicativos Xamarin Forms, permitindo que você se concentre na carga de trabalho do código do aplicativo.

Eu já apresentei o Shell nestes dois artigos:

  1. Xamarin Forms 4.0 - Apresentando o Shell - I
  2. Xamarin Forms 4.0 - Apresentando o Shell - II

Neste artigo vou iniciar a apresentação de recursos do Shell como a pesquisa e outros recursos importantes relacionados. Vou tomar como base o exemplo da documentação que pode ser baixado aqui.

Recursos usados:

Criando o projeto no Visual Studio 2019 Community

Abra o  VS 2019 Community e clique em Create New Project e a seguir escolha:

Clique em Next e informe o nome XF_ShellApp;

A seguir clique no botão Create :

A seguir selecione o template Blank e a plataforma Android e clique no botão OK:

Pronto, nosso projeto já esta criado.

No projeto Android na pasta Resource/drawable vamos incluir as imagens que iremos usar no projeto:

Obs: Peguei as imagens neste site: https://icons8.com.br/

Agora abra a página MainPage.xaml e altere o código existe pelo código a seguir:

<?xml version="1.0" encoding="utf-8" ?>
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local1="clr-namespace:XF_Shell1"
       x:Class="XF_Shell1.MainPage">
   <Shell.FlyoutHeader>
        <controls:FlyoutHeader />
    </Shell.FlyoutHeader>
    <FlyoutItem Title="Cachorros"
                FlyoutDisplayOptions="AsMultipleItems">
        <Tab Title="Meus Pets"
             Icon="pegada48.png">
            <ShellContent Title="Cachorros"
                          Icon="dog48.png">
                <views:Caes />
            </ShellContent>
            <ShellContent Title="Gatos"
                          Icon="gato48.png">
                <views:Gatos />
            </ShellContent>
        </Tab>
        <ShellContent Title="Outros"
                      Icon="dino48.png">
            <views:Outros />
        </ShellContent>
    </FlyoutItem>

</Shell>

Note que alteremos o tipo de Content para Shell e estamos usando agora um FlyoutItem com dois itens :  Meus Pets e Outros, onde estamos destacando o item 'Cachorros'.

Dentro da guia Meus Pets estamos definindo duas guias :  Cachorros e Gatos

De forma que a hierarquia criada é a seguinte:

Agora temos que criar as Views Caes, Gatos e Outros definidos na tag <views:..>, e, para isso vamos criar uma pasta Views no projeto e incluir nesta pasta as 3 Content Page a seguir:

  1. Caes.xaml
  2. Gatos.xaml
  3. Outros.xaml

Vamos criar também a pasta Controls no projeto e dentro desta pasta incluir o arquivo Content View FlyoutHeader.xaml onde vamos definir o cabeçalho do menu. (Como já mostrei neste artigo sobre Shell):

<?xml version="1.0" encoding="UTF-8"?>
<ContentView 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"
             HeightRequest="100"
             x:Class="XF_ShellApp.Controls.FlyoutHeader">
    <Grid BackgroundColor="White">
        <Image Aspect="AspectFit" Source="maco1b.jpg" Opacity="1.0" />
    </Grid>    
</ContentView>

Agora podemos incluir os namespaces destas duas pastas no arquivo MainPage.xaml :

<?xml version="1.0" encoding="utf-8" ?>
<Shell 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" 
             xmlns:views="clr-namespace:XF_ShellApp.Views" 
             xmlns:controls="clr-namespace:XF_ShellApp.Controls"
             mc:Ignorable="d"
             x:Class="XF_ShellApp.MainPage">
       ...

</Shell>

Para concluir abra o arquivo MainPage.xaml.cs e altere o código para que a página herde de Shell:

using System.ComponentModel;
using Xamarin.Forms;
namespace XF_Shell1
{
    [DesignTimeVisible(false)]
    public partial class MainPage : Shell
    {
        public MainPage()
        {
            InitializeComponent();
        }
    }
}

Altere o código das Views Caes.xaml, Gatos.xaml e Outros.xaml para exibir um texto de identificação usando uma fonte Large como mostrado abaixo: (as outras duas views somente mudam o texto)

<?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.Caes">
    <ContentPage.Content>
        <StackLayout>
            <Label Text="Meus Cachorros"
                FontSize="Large"
                VerticalOptions="CenterAndExpand" 
                HorizontalOptions="CenterAndExpand" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Executando o projeto iremos obter o seguinte resultado mostrando a hierarquia do menu exibindo as guias e o menu lateral com dois ícones:

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

Na próxima parte do artigo vamos implementar a exibição dos dados e o recurso da pesquisa do Shell.

"Portanto, não te envergonhes do testemunho de nosso Senhor, nem de mim, que sou prisioneiro seu; antes participa das aflições do evangelho segundo o poder de Deus,
Que nos salvou, e chamou com uma santa vocação; não segundo as nossas obras, mas segundo o seu próprio propósito e graça que nos foi dada em Cristo Jesus antes dos tempos dos séculos;"
 2 Timóteo 1:8,9

Referências:

José Carlos Macoratti