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.

<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MasterDetailDemo.Menu" Title="Master">
<MasterDetailPage.Master>
<ContentPage Title="Menu" Padding="0">
<ContentPage.Content>
<StackLayout>
</StackLayout>
</ContentPage.Content>
</ContentPage>
</MasterDetailPage.Master>
</MasterDetailPage>

view raw
Menu.xaml
hosted with ❤ by GitHub

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.

<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MasterDetailDemo.Menu" Title="Master">
<MasterDetailPage.Master>
<ContentPage Title="Menu" Padding="0">
<ContentPage.Content>
<StackLayout>
<Grid BackgroundColor="#03A9F4">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="10"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="80"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="10"/>
</Grid.RowDefinitions>
<Label
Grid.Column="1"
Grid.Row="2"
Text="App Name"
TextColor="White" FontSize="Large"/>
</Grid>
<TableView Intent="Menu">
<TableSection>
<ViewCell Tapped="GoPage1">
<StackLayout Padding="15,10">
<Label Text="Page 1" VerticalTextAlignment="Center"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="GoPage2">
<StackLayout Padding="15,10">
<Label Text="Page 2" VerticalTextAlignment="Center"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="GoPage3">
<StackLayout Padding="15,10">
<Label Text="Page 3" VerticalTextAlignment="Center"/>
</StackLayout>
</ViewCell>
</TableSection>
</TableView>
</StackLayout>
</ContentPage.Content>
</ContentPage>
</MasterDetailPage.Master>
</MasterDetailPage>

view raw
Menu.xaml
hosted with ❤ by GitHub

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.

using Xamarin.Forms;
using Xamarin.Forms.Xaml;
namespace MasterDetailDemo
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class Menu : MasterDetailPage
{
public Menu ()
{
InitializeComponent ();
Detail = new NavigationPage(new MenuDetail());
}
}
}

view raw
Menu.cs
hosted with ❤ by GitHub

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. 

using Xamarin.Forms;
using Xamarin.Forms.Xaml;
namespace MasterDetailDemo
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class Menu : MasterDetailPage
{
public Menu ()
{
InitializeComponent ();
Detail = new NavigationPage(new MenuDetail());
}
private void GoPage1(object sender, System.EventArgs e)
{
Detail.Navigation.PushAsync(new Page1());
IsPresented = false;
}
private void GoPage2(object sender, System.EventArgs e)
{
Detail.Navigation.PushAsync(new Page2());
IsPresented = false;
}
private void GoPage3(object sender, System.EventArgs e)
{
Detail.Navigation.PushAsync(new Page3());
IsPresented = false;
}
}
}

view raw
Menu.cs
hosted with ❤ by GitHub

App.cs

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

using Xamarin.Forms;
using Xamarin.Forms.Xaml;
[assembly: XamlCompilation (XamlCompilationOptions.Compile)]
namespace MasterDetailDemo
{
public partial class App : Application
{
public App ()
{
InitializeComponent();
MainPage = new Menu();
}
}
}

view raw
App.cs
hosted with ❤ by GitHub

Resultado

ezgif.com-video-to-gif

 

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

icongithub

4 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

  2. Muito bom a explicação!! Mas eu tenho uma dúvida, se eu quisesse colocar uma imagem como background ali na grid aonde você definiu a cor azul como background… Como eu poderia fazer isso?

    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