Xamarin Forms - Apresentando a navegação entre páginas - II

  Neste artigo vou mostrar como podemos explorar a experiência de navegação que o Xamarin Forms oferece com base no tipo de página utilizada usando o VS 2015 e a linguagem C# abordando a navegação Modal.

Apenas para recordar (veja primeira parte do artigo aqui) já sabemos que temos dois principais tipos de navegação entre páginas usados no Xamarin Forms:

A navegação Modal

O Xamarin.Forms fornece 3 opções de navegação modal :

Os métodos de navegação Modal são expostos pela propriedade Navigation em  quaisquer tipos derivados da Page.  Esses métodos fornecem a capacidade de empurrar e remover páginas modais para/da pilha de navegação.

Nota: Quando páginas modais são abertas, a hierarquia é interrompida e a barra de navegação desaparece. A barra volta quando a pagina modal é removida da pilha

Notificação de usuário com alertas

O método DisplayAlert de ContentPage exibe um alerta pop-up. Exemplo  :  DisplayAlert (String title, String message, String cancel)

Exemplos:

    await DisplayAlert ("Alerta", "Você foi alertado", "OK");
    boolean resp = await DisplayAlert ("Iniciar", "Deseja iniciar o jogo ?", "Sim", "Não");

Menu pop-up com folhas de ações (Action Sheet)

O método DisplayActionSheet fornece um menu de opções em um pop-up. O retorno é uma string.

DisplayActionSheet (String title, String cancel, String destruction, params String[] buttons)

Exemplo:

var acao = await DisplayActionSheet ("ActionSheet: Enviar ?", "Cancela", null, "Email", "Twitter", "Facebook");

 Agora vamos à prática.

Recursos usados:

Nota: Baixe e use a versão Community 2015 do VS ela é grátis e é equivalente a versão Professional.

Criando um projeto no VS 2015 com Xamarin

Abra o Visual Studio Community 2015 e clique em New Project;

Selecione Visual C#, o template Cross Plataform e a seguir Blank App (Xamarin.Forms Portable);

Informe o nome XF_Navegacao e clique no botão OK;

Ao clicar no botão OK, será criada uma solução contendo 4 projetos. (Dependendo do seu ambiente pode haver alguma variação nos projetos.)

O projeto comum possui a classe App.cs que irá conter o código compartilhado e que vamos usar neste artigo.

Não esqueça de atualizar o Xamarin Forms acionando o menu Tools e as opções Nuget Package Manager -> Manage Nuget Packages for Solution;

A seguir clique em Update e selecione o item Xamarin Forms e clique em Install.

Criando as páginas para Navegação : Pagina1.xaml , Pagina2.xaml e Pagina3.xaml

No menu Project clique em Add New Item e a seguir em Cross Platform e em Forms Xaml Page e informe o nome Pagina1:

Repita o procedimento e crie a página Pagina2.xaml e a Pagina3.xaml

A seguir abra o arquivo App.cs e inclua o código abaixo definindo a página raiz da aplicação usando NavigationPage:

     public App()
     {
       MainPage = new NavigationPage(new Pagina1());
     }

Continuando, Inclua o código abaixo na Pagina1 :

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XF_Navegacao.Pagina1"
             Title="PÁGINA 1">
    <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
        <Label Text="Navegação" FontSize="Large" />
        <Button Text="Avançar" Clicked="Button_Clicked" 
                BackgroundColor="Lime" FontSize="25" />
    </StackLayout>
</ContentPage>

No evento Clicked do Button inclua o código que vai permitir navegar para a Pagina2 usando o método PushAsync:

  private async void Button_Clicked(object sender, EventArgs e)
   {
            await Navigation.PushAsync(new Pagina2());
  }

A seguir defina o código XAML da Pagina2:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XF_Navegacao.Pagina2"
             Title="PÁGINA 2">
    <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
        <Label Text="Exemplos de Navegação Modal" FontSize="Large" FontAttributes="Bold" TextColor="Navy" />

        <Button Text="Exibir Página Modal" Clicked="Btn2_Clicked" BackgroundColor="Blue" 
                TextColor="Yellow" FontSize="25"/>
        <Button Text="Exibir Alerta Modal" Clicked="BtnAlerta_Clicked" 
                BackgroundColor="Pink" 
                TextColor="White" FontSize="25"/>
        <Button Text="Exibir Folha de Ação Modal" Clicked="BtnAcao_Clicked" 
                BackgroundColor="Black" 
                TextColor="White" FontSize="25"/>
        <Label x:Name="lblmsg" TextColor="White" BackgroundColor="Silver" FontSize="30"/>
    </StackLayout>
</ContentPage>

Nesta página definimos 3 botões onde tratamos os seguintes eventos relacionados:

  1. btn2_Clicked - Exibir página Model

  2. BtnAlerta_Clicked - Exibir Alerta Modal

  3. btnAcao_Clicked - Exibir Folha de Ação Modal

A label definida como lblmsg é onde iremos exibir o resultado da seleção do usuário feita no Alerta e na Folha de Ação.

No arquivo code-behind Pagina2.xaml.cs temos o código abaixo onde tratamos esses eventos:

using System;
using Xamarin.Forms;
namespace XF_Navegacao
{
    public partial class Pagina2 : ContentPage
    {
        public Pagina2()
        {
            InitializeComponent();
        }
        private async void Btn2_Clicked(object sender, EventArgs e)
        {
            await Navigation.PushModalAsync(new Pagina3());
        }
        private async void BtnAlerta_Clicked(object sender, EventArgs e)
        {
            bool resposta = await DisplayAlert("Iniciar", "Deseja iniciar o jogo ?", "Sim", "Não");
            if (resposta)
                lblmsg.Text = "Sim";
            else
                lblmsg.Text = "Não";
        }
        private async void BtnAcao_Clicked(object sender, EventArgs e)
        {
            var acao = await DisplayActionSheet(" Enviar ?", "Cancela", null, "Email", "Twitter", "Facebook");
            lblmsg.Text = acao;
        }
    }
}

Agora para concluir temos o código da página Pagina3.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"
             x:Class="XF_Navegacao.Pagina3"
             Title="PÁGINA 3">
    <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
        <Label Text="Exemplos de Navegação Modal" FontSize="30" FontAttributes="Bold" TextColor="Green" />

        <Button Text="Remover Página Modal" Clicked="Btn3_Clicked" 
                BackgroundColor="Blue" 
                TextColor="White" FontSize="25"/>        
    </StackLayout>
</ContentPage>

Nesta página temos o evento btn3_Clicked que quando acionado vai remover a página modal.

O código deste evento é visto abaixono arquivo Pagina3.xaml.cs :

       private async void Btn3_Clicked(object sender, EventArgs e)
        {
            await Navigation.PopModalAsync();
        }

 

Obs: Note que definimos em cada página um título usando a propriedade Title. Isso é muito importante para identifica a página na navegação.

Executando a solução usando o emulador Android GenyMotion iremos obter o seguinte resultado:

Pagina1 Pagina2 Pagina3

Opção:  Exibir Alerta Modal e selecionar a opção SIM:

Opção:  Exibir Folha de Ação Modal e selecionar opção Facebook

Pegue o código das páginas aqui : xam_forms_naveg2.zip

Pois, assim como o Pai ressuscita os mortos, e os vivifica, assim também o Filho vivifica aqueles que quer.
E também o Pai a ninguém julga, mas deu ao Filho todo o juízo;
Para que todos honrem o Filho, como honram o Pai. Quem não honra o Filho, não honra o Pai que o enviou.
 João 5:21-23

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 ?

  Gostou ?   Compartilhe no Facebook   Compartilhe no Twitter

Referências:

José Carlos Macoratti