O X do Xamarin Forms — Breadcrumb
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!
