C#

20 ago, 2020

Xamarin Forms – Recursos do Shell – I

100 visualizações
Publicidade

No artigo de hoje, que você pode ver também no meu blog, vou continuar apresentando os recursos do Shell introduzido na versão 4.0 do Xamarin Forms.

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

Xamarin

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:

  • Language :  C#
  • Platform : All Platforms
  • Project Type:  Mobile

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:

  • dino48.png
  • dog48.png
  • gato48.png
  • pegada48.png
  • maco1b.jpg

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:

  • Meus Pets
    • Cachorros
    • Gatos
  • Outros

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.