Menu Master Detail – Xamarin.Forms

Algumas pessoas me procuram dizendo que estão com dificuldades na criação de um Menu Master Detail (também conhecido como menu Hambúrguer) seguindo o template sugerido pelo Xamarin.Forms. Então decidi demonstrar como criar um menu Master Detail  de uma maneira que considero fácil e rápida.

Antes de começar a colocar a “mão no código”, é importante saber o que é Master e o que é Detail.

 

Master

Falando de uma maneira bem simplista, master é o seu menu de fato, que fica “escondido” e aparece com um swipe ou clicando no ícone que se encontra no canto superior esquerdo.

screenshot-1533142668707
Master

Detail

Também de uma maneira bem simplista, detail é onde ficará o que você deseja apresentar na tela inicial e também a sua pilha de paginas.

screenshot-1533142677703
Detail

 

Irei partir do princípio que você já criou uma aplicação Xamarin.Forms em branco.

Criando o Menu

Clique com o botão direito em cima do seu projeto compartilhado, selecione Add > New Item, como demonstrado na imagem a seguir.

1

 

Selecione a opção Content Page e defina um nome, neste caso foi utilizado o nome de Menu.

2

 

Em seguida, repita esse processo criando uma Content Page com o nome MenuDetail.xaml. O resultado será igual ao demonstrado na imagem a seguir.

3

Menu.xaml

Na linha 2, substitua ContentPage por MasterDetailPage e em seguida dentro de MasterDetailPage.Master crie uma ContentPage como demonstrado a seguir.

Cabeçalho

screenshot-1533142668707
Cabeçalho do Menu

Para a criação do cabeçalho, utilize um Grid, e coloque o que desejar nesse espaço.

Opções

screenshot-1533142668707
Opções do Menu

Agora é preciso adicionar as opções do menu, para isso adicione uma TableView e uma ViewCell para cada opção desejada, veja como fica o código com o cabeçalho e as opções no exemplo a seguir.

Observe que cada ViewCell possui um Tapped, que será o método chamado quando uma opção do menu é selecionada.

Menu.xaml.cs

Substitua a herança de ContentPage por MasterDetailPage e no inicializador da classe, atribua para Detail um NavigationPage passando como parâmetro uma nova MenuDetail, como demonstrado a seguir.

Em seguida crie os métodos que irão ser executados a cada opção selecionada do seu menu para adicionar a nova página desejada.

Observação 1: Veja que o PushAsync com a nova página está sendo feito na Detail.

Observação 2: Atribua false para IsPresented para fechar o menu. 

App.cs

Agora que o seu menu Master Detail está pronto, é necessário na classe App.cs atribui-lo para a MainPage.

Resultado

ezgif.com-video-to-gif

 

Esse e todos os exemplos deste blog encontram-se disponíveis no GitHub.

icongithub

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s