O X do Xamarin Forms — Breadcrumb

Thiago Bertuzzi
Nov 4 · 3 min read

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 :

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!

Configurando o controle

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

Simples assim! Agora é só utilizar :D

Utilizando o controle

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 :

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 :

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!

Thiago Bertuzzi

Written by

Microsoft MVP,Gamer, Desenvolvedor e apaixonado por tecnologia!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade