Xamarin Forms  4.0 -  Flyout Master Detail Page
 Neste artigo veremos como criar um leiaute master detail usando os recursos do Shell no Xamarin Forms 4.x.

Vimos que o Shell introduz um contêiner simples para seus aplicativos móveis, assim , ao invés usar uma combinação de MasterDetailPage, TabbedPage e NavigationPage, basta iniciar seu aplicativo com um Shell e começar a adicionar páginas.

O Shell  fornece três tipos de interface de usuário de navegação comum:

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

Para criar uma experiência master-detail vamos usar o recurso do Menu flyout de navegação.

O flyout é o menu raiz de um aplicativo Shell e é acessível por meio de um ícone ou passando o dedo na lateral da tela. O submenu consiste em um cabeçalho opcional, itens de submenu e itens de menu opcionais.

O flyout pode ser acessado através do ícone do hambúrguer ou passando pela lateral da tela.

Recursos usados:

Criando o projeto no Visual Studio 2019  Community (preview 8)

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

Clique em Next e informe o nome XF_Flyout1;

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 4 imagens que iremos usar no projeto:

Agora abra a página MainPage.xaml e altere o código existente 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:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:controls="clr-namespace:XF_Shell2.Controls"
             xmlns:views ="clr-namespace:XF_Shell2.Views"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="XF_Shell2.MainPage"
             Title="Menu">

    <Shell.FlyoutHeader>
        <controls:FlyoutHeader />
    </Shell.FlyoutHeader>

    <FlyoutItem Title="Pesquisa"
                Icon="pequisar.png">
        <Tab>
            <ShellContent>
                <views:PesquisaPage />
            </ShellContent>
        </Tab>
    </FlyoutItem>
    <FlyoutItem Title="Suporte"
                Icon="suporte.png">
        <Tab>
            <ShellContent>
                <views:SuportePage />
            </ShellContent>
        </Tab>
    </FlyoutItem>
    <FlyoutItem Title="Editar"
                Icon="editar.png">
        <Tab>
            <ShellContent>
                <views:EditarPage />
            </ShellContent>
        </Tab>
    </FlyoutItem>

</Shell>

Não esqueça de abrir o arquivo MainPage.xaml.cs e alterar o código para que a página herde de Shell:

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

Criando o header do menu Flyout e demais Views

Agora vamos criar no projeto as pastas Controls e Views e na pasta Controls vamos incluir uma Content View chamada FlyoutHeader.xaml que será o header do menu e onde vamos exibir um imagem:

<?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"
             x:Class="XF_Shell2.Controls.FlyoutHeader"
             HeightRequest="100">    
    <Grid BackgroundColor="Black">
        <Image Aspect="AspectFit" Source="macologo.jpg" Opacity="0.6" />
    </Grid>

</ContentView>

Na pasta Views vamos criar 3 Views to tipo Content Page que irão apenas exibir uma label com o nome da página.

  1. EditarPage.xaml
  2. PesquisaPage.xaml
  3. SuportePage.xaml

Não precisamos fazer mais nada...

Executando o projeto iremos obter o seguinte resultado:

Segundo a documentação em um aplicativo Shell, cada ContentPage que é filho de um objeto ShellContent é criado durante a inicialização do aplicativo.

Adicionar objetos ShellContent adicionais usando essa abordagem resultará na criação de páginas adicionais durante a inicialização do aplicativo, o que pode levar a uma experiência de inicialização ruim.

No entanto, o Shell também é capaz de criar páginas sob demanda, em resposta à navegação.

Assim o código da página MainPage.xaml pode ser resumido para ficar 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:controls="clr-namespace:XF_Shell2.Controls"
             xmlns:views ="clr-namespace:XF_Shell2.Views"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="XF_Shell2.MainPage"
             Title="Menu">
    <Shell.FlyoutHeader>
        <controls:FlyoutHeader />
    </Shell.FlyoutHeader>

    <FlyoutItem Title="Pesquisa"
                Icon="pequisar.png">
                <views:PesquisaPage />
    </FlyoutItem>
    <FlyoutItem Title="Suporte"
                Icon="suporte.png">
                <views:SuportePage />
    </FlyoutItem>
    <FlyoutItem Title="Editar"
                Icon="editar.png">
                <views:EditarPage />
    </FlyoutItem>
</Shell>

Ou ainda desta 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:controls="clr-namespace:XF_Shell2.Controls"
             xmlns:views ="clr-namespace:XF_Shell2.Views"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="XF_Shell2.MainPage"
             Title="Menu">

    <Shell.FlyoutHeader>
        <controls:FlyoutHeader />
    </Shell.FlyoutHeader>   

    <views:PesquisaPage IconImageSource="pequisar.png" />
    <views:SuportePage IconImageSource="suporte.png"/>
    <views:EditarPage IconImageSource="editar.png"/>   

</Shell>

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

"Porque onde há inveja e espírito faccioso aí há perturbação e toda a obra perversa.
Mas a sabedoria que do alto vem é, primeiramente pura, depois pacífica, moderada, tratável, cheia de misericórdia e de bons frutos, sem parcialidade, e sem hipocrisia."
Tiago 3:16,17

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