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 na inicialização 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

2 comentários em “Menu Master Detail – Xamarin.Forms

  1. Muito bom, tava quebrando a cabeca e vc literalmente desenhou como fazer. Tem como colocar um icone em cada opcao do menu?

    Curtir

    1. Que bom, fico muito feliz em saber que te ajudou.

      Tem sim, como estamos trabalhando com StackLayout neste exemplo, basta você mudar a orientação para horizontal e adicionar o seu icone antes do texto.

      Espero ter ajudado.

      Curtir

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