Xamarin Forms - Usando Shell para criar Guias - I
 Neste artigo veremos como usar o recurso Shell para criar guias no Xamarin Forms.

Já apresentei o recurso Shell neste artigo: Xamarin Forms 4.0 - Apresentando o Shell - Macoratti

Vantagens em usar o Shell:

  1. Reduz a complexidade do desenvolvimento das aplicações;
  2. Permite uma única página para descrever a hierarquia visual da aplicação;
  3. Fornece uma experiência de navegação comum ao usuário;
  4. Suporta o esquema de navegação baseado em URI;
  5. Fornece um manipulador de busca integrado;
  6. Aumenta a velocidade de renderização da aplicação;
  7. Reduz o consumo de memória;

Tá bom ou quer mais ???

Uma aplicação inicial usando Shell pode apresentar a navegação baseada em Tabs ou Flyout.

Inicialmente por padrão é apresentado um Flyout que pode ser removido definindo a propriedade FlyoutBehavior com o valor Disable.

Neste artigo vamos focar na criação de Tabs ou guias de navegação.

recursos usados:

Criando o projeto Xamarin Forms

Vamos criar um novo projeto Xamarin Forms no VS 2019 Community com o nome XF_Shell1.

Você pode ver como criar um projeto no Xamarin Forms neste link: Criar Projeto Xamarin Forms

Vamos criar uma nova página Shell em nosso projeto, e,  como ainda não temos um template Shell disponível vamos criar uma página do tipo Content Page (xaml) chamada MainShell.xaml.

A seguir vamos alterar no arquivo MainShell.xaml.cs para a classe herde de Shell:

   [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class MainShell : Shell
    {
        public MainShell()
        {
            InitializeComponent();
        }
   }

No arquivo MainShell.xaml altere o código conforme abaixo:

<?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:pages ="clr-namespace:XF_Shell1;assembly=XF_Shell1" 
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             FlyoutBehavior="Disabled"
             x:Class="XF_Shell1.MainShell">
    <ShellItem>
        <ShellContent>
            <pages:MainPage />
        </ShellContent>
    </ShellItem>    
</Shell>

Este código vai criar uma aplicação com página única exibindo a MainPage.xaml.

Vamos criar agora duas Content Page :

1- Pagina1.xaml

<?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_Shell1.Pagina1">
    <ContentPage.Content>

        <StackLayout BackgroundColor="Maroon">
            <Image Source="https://image.freepik.com/fotos-gratis/engracado-gato-reto-escoces-encontra-se-de-cabeca-para-baixo-no-tapete_129453-21.jpg"
                   WidthRequest="200" HeightRequest="200"/>
            <Label Text="Bem-Vindo à pagina 1" TextColor="Beige"
                   FontSize="Large"/>
            <Button Text="Continuar"/>
        </StackLayout>

    </ContentPage.Content>
</ContentPage>

2- Pagina2.xaml

<?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_Shell1.Pagina2">

    <ContentPage.Content>

        <StackLayout BackgroundColor="Wheat">
            <Image Source="https://static1.patasdacasa.com.br/articles/1/41/1/@/1383-verduras-e-legumes-para-cachorro-saiba-article_media_desktop-5.jpg"
                   WidthRequest="200" HeightRequest="200"/>
            <Label Text="Bem-Vindo à pagina 2" TextColor="Maroon" FontSize="Large"/>
            <Button Text="Continuar"/>
        </StackLayout>

    </ContentPage.Content>

</ContentPage>

A seguir vamos alterar o código da view MainShell.xaml e criar duas guias(TabBar) para exibir cada uma da páginas acima:

<?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:pages ="clr-namespace:XF_Shell1;assembly=XF_Shell1" 
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             FlyoutBehavior="Disabled"
             x:Class="XF_Shell1.MainShell">
    <!--<ShellItem>
        <ShellContent>
            <pages:MainPage />
        </ShellContent>
    </ShellItem>-->
    <TabBar>
        <Tab Title="Página 1" Icon="pag1.png">
            <ShellContent>
                <pages:Pagina1 />
            </ShellContent>
        </Tab>
        <Tab Title="Página 2" Icon="pag2.png">
            <ShellContent>
                <pages:Pagina2 />
            </ShellContent>
        </Tab>
    </TabBar>    
</Shell>

Ajustando o arquivo App.xaml.cs :

public App()
{
     InitializeComponent();
     MainPage = new MainShell();
}

Executando o projeto teremos o resultado abaixo:

Podemos melhorar ainda mais o nosso código simplificando da seguinte forma:

<?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:pages ="clr-namespace:XF_Shell1;assembly=XF_Shell1" 
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             FlyoutBehavior="Disabled"
             x:Class="XF_Shell1.MainShell">
 <TabBar>
      <pages:Pagina1 IconImageSource="pag1.png" />
      <pages:Pagina2 IconImageSource="pag2.png" />
</TabBar>
</Shell>

E para ter um melhor desempenho podemos fazer assim:

<?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:pages ="clr-namespace:XF_Shell1;assembly=XF_Shell1" 
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             FlyoutBehavior="Disabled"
             x:Class="XF_Shell1.MainShell">
  <TabBar>
      <Tab Title="Página 1" Icon="pag1.png">
         <ShellContent ContentTemplate="{DataTemplate pages:Pagina1}" />
      </Tab>
    <Tab Title="Página 2" Icon="pag2.png">
         <ShellContent ContentTemplate="{DataTemplate pages:Pagina2}" />
     </Tab>
</TabBar>
</Shell>

O resultado final será o mesmo mas o desempenho será muito melhor pois agora estamos criando as páginas sob demanda.

Na próxima parte do artigo veremos como usar o Shell para criar Flyouts.

Pegue o código do projeto compartilhado aqui :  XF_Shell1.zip

"Portanto, cingindo os lombos do vosso entendimento, sede sóbrios, e esperai inteiramente na graça que se vos ofereceu na revelação de Jesus Cristo;"
1 Pedro 1:13

Referências:

José Carlos Macoratti