Xamarin Forms  4.0 -  Apresentando o Shell
 Neste artigo vou apresentar um dos novos recursos da versão 4.0 do Xamarin Forms, o Xamarin Forms Shell.

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.

O Shell fornece um único local para configurar a estrutura visual do seu aplicativo, uma interface de usuário de navegação comum e um serviço de navegação com suporte a links diretos.

O shell Xamarin.Forms oferece três níveis de visualização:

  1. Menu flyout de navegação (flyout menu)
  2. Barras da guia inferior (bottom tab)
  3. Barras da guia superior (top tab)

É muito fácil configurá-lo, basicamente, você precisa definir o sinalizador experimental em sua MainActivity e no AppDelegate antes de chamar o método Init de dos Formulários:

global::Xamarin.Forms.Forms.SetFlags("Shell_Experimental");

Nota: Em versões mais atuais do Visual Studio 2019 isso não é mais necessários.

Para criar uma aplicação Shell basta criar um arquivo XAML que seja uma subclasse da classe Shell e definir a propriedade MainPage da classe App do aplicativo para o objeto Shell na subclasse descrevendo a hierarquia visual na classe Shell da subclasse.

O exemplo de código a seguir mostra um arquivo AppShell.xaml recém-criado:

<Shell xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       x:Class="Xaminals.AppShell">
</Shell>
 
O exemplo a seguir mostra o arquivo code-behind, AppShell.xaml.cs:
using Xamarin.Forms;
namespace Xaminals
{
    public partial class AppShell : Shell
    {
        public AppShell()
        {
            InitializeComponent();
        }
    }
}

Vamos ver isso funcionando na prática.

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_Shell1;

A seguir clique no botão Create :

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

Nota: Nesta primeira aplicação não vou usar o template Shell para tornar mais simples o projeto.

Pronto, nosso projeto já esta criado.

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

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">
    <TabBar>
        <Tab Title="Adicionar" Icon="mais32.png">
            <ShellContent>
                <local1:Page1 Title="Primeira Página" />
            </ShellContent>
        </Tab>
        <Tab Title="Pesquisa" Icon="pequisa32.png">
            <ShellContent>
                <local1:Page2 Title="Segunda Página" />
            </ShellContent>
        </Tab>
        <Tab Title="Suporte" Icon="suporte32.png">
            <ShellContent>
                <local1:Page3 Title="Terceira Página" />
            </ShellContent>
        </Tab>
    </TabBar>
</Shell>

Vamos no código que alteremos o tipo de Content para Shell e estamos usando agora um TabBar com 3 guias definidas com uma imagem.  A seguir estamos usando um dos elementos do Shell, o ShellContent para definir a navegação das páginas.

A estrutura Shell possui os seguintes elementos:

ShellItem  Um ou mais itens no flyout. Todo ShellItem é filho de um Shell
ShellSection  Conteúdo agrupado, navegável pelas guias inferiores. Cada ShellSection é um filho de um ShellItem.
ShellContent  As instâncias do ContentPage em seu aplicativo, que são navegáveis ​​pelas guias principais. Todo ShellContent é filho de um ShellSection

Agora basta criar 3 páginas do tipo Content Page:

  1. Page1.xaml
  2. Page2.xaml
  3. Page3.xaml

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
{
    // Learn more about making custom code visible 
    // in the Xamarin.Forms previewer
    // by visiting https://aka.ms/xamarinforms-previewer
    [DesignTimeVisible(false)]
    public partial class MainPage : Shell
    {
        public MainPage()
        {
            InitializeComponent();
        }
    }
}

 

Não precisamos fazer mais nada...

Executando o projeto iremos obter o seguinte resultado:

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

Na próxima parte do artigo vamos mostrar a opção Flyout.

"E não temais os que matam o corpo e não podem matar a alma; temei antes aquele que pode fazer perecer no inferno a alma e o corpo."
Mateus 10:28

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Quer aprender C# ??

Quer aprender os conceitos da Programação Orientada a objetos ?

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

Referências:

José Carlos Macoratti