O X do Xamarin Forms — Alterando/Customizando a NavigationPage

Fala galera,

beleza?

NavigationPage é um controle que creio ser utilizado em 90% dos apps. Se você não estiver inventando uma outra forma de navegar, pode acabar querendo fazer algumas customizações na mesma.

Hoje lhes trago algumas dicas para fazer na NavigationPage, dicas que podem ser uteis dependendo do seu projeto :D

Vamos a elas!

NavigationBar Transparente

Alguns apps (dependendo do Designer) ficam mais bonitos com a barra de navegação transparente. Existem diversas formas de fazer isso, mas a que eu encontrei uma vez ( faz muito tempo, mas se não estou enganado foi ate no blog da XamlGirl) , resolveu qualquer situação que eu precisei :

Vamos criar um Xaml baseado em um NavigationPage chamado CustomNavigationPage.

No Xaml vamos implementar alguns styles e algumas configurações por plataforma como o iOS:NavigationPage.IsNavigationBarTranslucent=”True” :

Em seguida no .cs :

Em seguida vamos criar 2 custom renderers :

no Android :

e no iOS :

Pronto! Ao chamarmos na inicialização :

Temos :

Quem quiser pode baixar o exemplo utilizado Clicando aqui.

Mudando as cores, Ocultando a NavigationPage e Alterando o botão voltar

Se você criar uma NavigationPage customizada, fica facil alterar suas propriedades.

Mas saiba que é possível altera-las também, nas paginas que estamos navegando. Como ?

Simples basta utilizar o Xamarin.Forms.NavigationPage.OQueDesejaAlterar :

No exemplo acima podemos ver como ocultar a barra, alterar o texto botão de voltar e ate retira-lo!

Podemos também criar styles para customizar a NavigationBar:

É possível também alteraras cores, direto das plataformas. No iOS por exemplo, vamos adicionar ao appdelegate.cs as linhas para alterar o background e o texto do botão voltar :

Então coloque o óculos de proteção e temos :

Quem quiser pode baixar o exemplo utilizado Clicando aqui.

São implementações simples, mas que podem melhorar a aparência do seu app :D

Espero ter ajudado!

Aquele abraço!