multiview

Xamarin Forms – Navigation Page

Olá galera,

Vamos voltar para os nossos posts sobre as Pages?

Vamos falar um pouco sobre a Navigation Page

O que é uma Navigation Page?

Simples, a estrutura da Navigation Page é como se fosse uma pilha de páginas que você vai empilhando e desempilhando e formando uma estrutura de navegação.

Antes de entrarmos a fundo na implementação, irei informar algumas observações importantes para a utilização da Navigation Page…

A Navigation Page deve ser utilizada com cautela principalmente nos aplicativos Android, porque ao adicionarmos várias páginas na “pilha” podemos prejudicar a performance, devido ao fato de que o Android não gerencia o ciclo de vida nas novas páginas, ou seja, ele apenas irá utilizar a Activity atual para empilhar novas páginas.

Porém, no WindowsPhone, o método de navegação já é feito de forma nativa.

A vantagem de utilização da Navigation Page na aplicação é o costume dos usuários em utilizar aplicativos que possuem o tipo de comportamento implementado por esse componente.

Visto algumas observações importantes, vamos continuar com o nosso assunto.

Primeiramente vamos criar uma nova page, chamada FirstPage.cs, com quatro novos botões, que posteriormente serão explicados, o primeiro será chamado de Push, o segundo de Pop, o terceiro de PushModal e o quarto e último de PopToFirst.

Segue abaixo a implementação dessa simples tela:

       public class FirstPage : ContentPage
    {
        public FirstPage()
        {
            Content = new StackLayout
            {
                Padding = new Thickness(0, Device.OnPlatform(20, 0, 0), 0, 0),
                Children = {
                    new Button(){
                        Text="Push",
                        Command = new Command(() => Navigation.PushAsync(new FirstPage()))
                    },

                    new Button(){
                        Text="Pop",
                        Command = new Command(() =>{
                            if (Navigation.NavigationStack.Count > 1) Navigation.PopAsync();
                        })
                    },
                    new Button(){
                        Text="Push Modal",
                        Command = new Command(() => Navigation.PushModalAsync(new ModalPage()))
                    },
                    new Button(){
                        Text="Pop To First",
                        Command = new Command(() => Navigation.PopToRootAsync())
                    }
				}
            };
        }
    }

Após criar a FirstPage vamos criar uma nova Page, chamada ModalPage, com apenas um botão chamado Pop Modal, conforme demonstração abaixo:

    public class ModalPage : ContentPage
    {
        public ModalPage()
        {
            Content = new StackLayout
            {
                Padding = new Thickness(0, Device.OnPlatform(20, 0, 0), 0, 0),
                Children = {
					new Label { Text = "Modal Page" },
					new Button() {
						Text = "Pop Modal",
						Command = new Command(() => Navigation.PopModalAsync())
					}
				}
            };
        }
    }

No nosso projeto Xamarin.Forms.Portable, vamos acessar a nossa classe App.cs, que é a classe principal que irá renderizar a nossa primeira page do aplicativo.

Vamos fazer com que nossa MainPage instancie uma NavigationPage, conforme demostração abaixo:

        public App()
        {
            // The root page of your application
            MainPage = new NavigationPage(new FirstPage());
        }

O NavigationPage nos permite instanciá-lo de duas formas, sem parâmetros ou enviando uma page (root) de parâmetro. Esse parâmetro serve para informar ao Xamarin qual a página principal, raiz da nossa estrutura de páginas, não sendo possível retirá-la da pilha. Como na nossa FirstPage criamos o botão PopToFirst, devemos informar qual a página raiz da nossa Navigation para que todas as demonstrações funcione.

Iremos utilizar 5 métodos que a NavigationPage nos fornece:

  • PushAsync(Page page)
  • PopAsync()
  • PushModalAsync(Page page)
  • PopModalAsync()
  • PopToRootAsync()

O nosso primeiro botão chamado Push, irá utilizar o primeiro método citado anteriormente, que ao ser clicado, irá instanciar a FirstPage, empilhando uma nova página na nossa estrutura de páginas. Podemos perceber que ao empilharmos essa primeira página, foi implementado automaticamente um BackButton no menu superior da tela, que se encarregará automaticamente de retornar a página anterior quando clicado.

wpid-screenshot_2015-07-21-10-26-37.png

O nosso segundo botão, chamado Pop, irá utilizar o segundo método citado anteriormente, que tem o comportamento contrário do PushAsync, ao invés de empilhar uma nova página, ele irá desempilhar a CurrentPage (propriedade da NavigationPage), que é a tela atual em que estivermos. Caso você esteja na RootPage, ou seja, aquela página que definimos no construtor da NavigationPage, deve ser feita uma verificação na propriedade NavigationStack antes da chamada do método

wpid-screenshot_2015-07-21-10-26-31.png

O nosso terceiro botão, chamado Push Modal, irá utilizar o terceiro método citado anteriormente, ele tem o mesmo comportamento do método PushAsync, porém o método PushModalAsync irá empilhar uma nova tela sem implementar automaticamente o BackButton para retornar a page anterior, então devemos tomar cuidado ao utilizar esse método pois devemos implementar alguma forma de retorno para essa nova tela, o iOS, por exemplo, não possui o BackButton no hardware do dispositivo como no Android, o aplicativo ficaria preso nessa tela.

wpid-screenshot_2015-07-21-10-26-47.png

O nosso quarto botão, chamado Pop Modal, que está dentro da Page (ModalPage), irá utilizar o quarto método citado anteriormente, que também tem o mesmo comportamento do PopAsync, porém, ele deve ser chamado obrigatoriamente caso você tenha instanciado uma nova page utilizando o método PushModalAsync.

wpid-screenshot_2015-07-21-10-26-31.png

E por último e não menos importante, o nosso último botão, chamado Pop To First, irá utilizar o nosso último método citado anteriormente, PopToRootAsync(), que irá retornar, independente de qual nível da estrutura de páginas você esteja, para a página root, que é a que definimos no nosso construtor da NavigationPage.

wpid-screenshot_2015-07-21-10-26-57.png wpid-screenshot_2015-07-21-10-26-31.png

Então é isso galera, chegamos ao final de mais um post, espero que tenham gostado e aprendido um pouco mais sobre a NavigationPage.

Caso tenham mais alguma dúvida sobre como funciona a NavigationPage, vocês podem acessar o Link no site oficial do Xamarin, onde tem a especificação da NavigationPage.

Xamarin Forms – Navigation Page 5.00/5 (100.00%) 2 votos

Leonardo

Xamarin Student Partner, apaixonado pela tecnologia .NET, Desenvolvedor na BRAE Biotecnologia, atua a mais de 4 anos no mercado com .NET

3 comentários em “Xamarin Forms – Navigation Page

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

%d blogueiros gostam disto: