O X do Xamarin Forms — Breadcrumb

Image for post
Image for post

Fala galera,

Tudo beleza?

Navegação é um tópico a parte em aplicativos moveis.Nós sempre devemos deixar uma navegação simples , ainda mais se tivermos diversas telas.

Em sites estamos acostumados a ver os famosos Breadcrumbs , muito utilizados inclusive para exibir as categorias de um produto, facilitando a navegação nas mesmas :

Image for post
Image for post

Mas você sabia que é possível utilizar em seu app? E claro no seu app com Xamarin.Forms ! Tudo graças a esse controle chamado Xamarin.Forms.Breadcrumb que nós vamos ver como utilizar !

BORA!

Image for post
Image for post

Vamos o querido nuget baixar o pacote Xamarin.Forms.Breadcrumb e instaalr apenas no projeto compartilhado :

Image for post
Image for post

Simples assim! Agora é só utilizar :D

Vamos utilizar o controle de forma simples. Para que todas as nossas views consigam ter o breadcumb, vamos criar uma uma BasePage com o controle do breadcumb. Para isso devemos utilizar o Namespace xmlns:breadcrumb=”clr-namespace:Breadcrumb;assembly=Xamarin.Forms.Breadcrumb” :

Com a referencia eu adicionei o controle breadcrumb e criei um stacklayout. Esse stacklayout será a área responsável pelo conteúdo de nossa tela.

Agora no backend eu vou adicionar uma IList para ter todas as Views adicionadas no Stacklayout :

Pronto ! Agora com nossa BasePage, só precisamos configurar as paginas que utilizarão o controle.

Mas antes vamos iniciar nosso app com uma navegação :

Agora em nossa MainPage , vamos substituir a ContentPage padrão pela nossa BasePage, tanto no .Xaml :

Quanto no .cs :

Notem que eu adicionei um botão com uma navegação para outra View, a configuração da Page2 é igual . Substituímos o .Xaml :

e o .cs :

Existem 2 pontos importantes aqui :

1 — Para o nome da Sua pagina aparecer no Breadcrumb o Title da View precisa estar preenchido.

2 — O Conteudo da sua tela deve ser Adicionado ao BasePageContent.

Certo, tudo configurado certinho vamos rodar :

Image for post
Image for post

Você pode adicionar diversas paginas, para ficar navegando entre elas.

É possível fazer diversas configurações , por exemplo :

Deixar um Ícone no primeiro Breadcrumb :

Mudar a barrinha padrão do Separator por uma imagem Que você queira:

E tudo isso pode ser feito com um FileImageSource, UriImageSource e FontImageSource :

Image for post
Image for post

Muito louco não?

Caso queira baixar o código utilizado no Exemplo: Clique aqui.

Quer ver outros artigos sobre Xamarin ? Clique aqui.

Espero ter ajudado!

Aquele abraço!

Written by

Microsoft MVP,Gamer, Desenvolvedor e apaixonado por tecnologia!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store