O X do Xamarin Forms — Menu Slide

Thiago Bertuzzi
3 min readOct 10, 2018

Fala galera,

beleza?

Esse é mais um dos artigos da serie : MEU DEUS QUE CONTROLE FO.. hehehehe

Menu é algo muito útil em um App, mas a duvida é sempre : "Como fazer?".

Antigamente os menus adotavam a seguinte ideia : Tabbar no iOS, e Menu Hambúrguer no Android.

Obviamente que você ja percebeu que hoje em dia não esta mais assim e muitos Apps tem diversos tipos de menu. Menus em cima, embaixo, do lado, pequenos, grandes e Telas iniciais.

Com o Xaml do Xamarin.Forms podemos criar diversos tipos de menu e ir ajustando. Porem, recente eu precisei fazer um menu um pouco mais complexo. Então fui e montei tudo via Xaml…

Após estar pronto e entregar, descobri algo que faz menus incríveis.. E este é o SlideOverKit :

Menu Lateral
Menu inferior

Se tivesse conhecido antes .. hahahahha .. Mas agora eu conheço e esta na hora de vocês conhecerem como utilizar ! Bora ?

Configurando o controle

Vamos ao nuget baixar o pacote SlideOverKit e instalar em todos os projetos :

Vamos iniciar o controle no iOS :

Pronto, sem mais configurações :)

Agora vamos criar alguns menus !

Utilizando o Controle

Antes de tudo vamos criar uma pagina inicial para testar os Menus :

Agora implementar a chamada :

Beleza! Calma que ja vamos implementar essas pages acima.

Implementando o Menu Inferior

Para ficar mais facil vamos criar uma pagina, via c# mesmo, só para nos auxiliar na exibição do Menu :

Você pode criar via Xaml também. O Importante é sua pagina ser do tipo MenuContainerPage.

Com esse novo tipo o controle ira saber que um Menu pode ser acoplado naquela pagina.

A nova propriedade this.SlideMenu define qual a page que sera utilizada para exibir o Menu.

Agora vamos criar a page MenuInferiorPage :

Agora vamos atribuir de onde o Menu vai aparecer no backend :

O Tipo da sua pagina precisa ser SlideMenuView e a propriedade MenuOrientations determina de onde o menu deve surgir.

Testando!

Legal não ?

Vamos fazer mais um!

Implementando o Menu Lateral

O processo é o mesmo do menu inferior , vamos criar uma pagina auxiliar :

E implementar nossa page e backend para o menu :

Porem dessa vez vamos mudar o MenuOrientations :

Rodando!

Podemos fazer menus sairem de todas as posições, topo, inferior, esquerda direta , também podemos fazer mini menus :

Menus são e sempre serão muito uteis, e com esse controle ficou facil de implementar :D

Se quiserem podem baixar o exemplo utilizado clicando aqui.

Também pode ver todas as implementações no repositório oficial clicando aqui.

Quer ver outros artigos sobre Xamarin ? Clique aqui.

Espero ter ajudado!

Aquele abraço!

--

--

Thiago Bertuzzi

Microsoft MVP,Gamer, Desenvolvedor e apaixonado por tecnologia!