Curso Windows Phone – Menu hamburger com XAML e C#

drawericonOlá pessoal, tudo bom?

Neste post demonstro como criar uma APP Windows Phone com o recurso do “menu hamburger”.

Para quem não conhece o termo, o “menu hamburger” é aquele menu lateral que desliza sobre a tela principal da APP, geralmente ao tocar sobre um ícone semelhante a um hamburger, cuidadosamente posicionado em alguma parte da tela de sua aplicação. Outra forma de fazer esse menu aparecer é quando se desliza o dedo da esquerda para a direita na tela do seu celular.

menu-hamburger

Dada a introdução sobre o assunto, vamos agora verificar o necessário para codificar esse recurso em nossa APP.

Passo 1: Fazer referencia ao recurso DrawerLayout via Nuget

No Visual Studio, selecione o menu Tools –> NuGet Package Manager –> Package Manager Console

No Package Manager Console digite: Install-Package DrawerLayout

nuget-drawerlayout

Passo 2: Codificação XAML

Faça uma declaração para o XML Namespace do recurso DrawerLayout na página XAML onde você irá inserir o “menu hamburger”


xmlns:drawerLayout="using:DrawerLayout"

Na sequencia, declare a codificação XAML de forma similar ao conteúdo do exemplo abaixo:


<!-- IMPORTANTE A LEITURA DOS COMENTÁRIOS NO CÓDIGO -->

<Grid x:Name="layoutPadrao" Background="DarkGray">
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
  </Grid.RowDefinitions>

  <!-- Definição da barra de título da APP -->
  <Grid x:Name="barraTitulo" Grid.Row="0" Height="70" Background="{StaticResource PhoneAccentBrush}">
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="Auto" />
      <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Image Grid.Column="0" HorizontalAlignment="Left"
           Tapped="Image_Tapped"
           Source="Assets/icon-menu.png" />
    <TextBlock Grid.Column="1" Foreground="White"
           Text="Blog do Eduardo H. Rizo"
           Style="{StaticResource SubheaderTextBlockStyle}"
           VerticalAlignment="Center" />
  </Grid>

  <!-- Definição do espaço reservado para
    o conteúdo principal da APP e para o
    menu hamburger -->
  <drawerLayout:DrawerLayout Grid.Row="1" x:Name="DrawerLayout">
    <!-- Conteúdo principal da APP -->
    <Grid x:Name="conteudoPrincipal" Margin="10,0,0,0">
      <TextBlock Text="Conteúdo principal da APP..." Style="{StaticResource SubheaderTextBlockStyle}" />
    </Grid>

    <!-- Conteúdo do menu hamburger -->
    <Grid x:Name="conteudoMenu" Background="White">
      <TextBlock Text="Opções do menu:" Padding="10"
           Foreground="Black"
           FontSize="24"
           Style="{StaticResource TitleTextBlockStyle}" />
      <ListView Name="lvOpcoesMenu" Margin="0,60,0,0" Tapped="lvOpcoesMenu_Tapped">
        <ListView.ItemTemplate>
          <DataTemplate>
            <TextBlock Text="{Binding}" Margin="15" HorizontalAlignment="Left"
                 VerticalAlignment="Center" FontSize="20"
                 Foreground="Black" />
          </DataTemplate>
        </ListView.ItemTemplate>
      </ListView>
    </Grid>
  </drawerLayout:DrawerLayout>
</Grid>

Passo 3: Codificação C#

Tendo feito a referência do passo 1 e as declarações XAML do passo 2, basta agora finalizar o exemplo com a codificação C# necessária para o mesmo.


//É IMPORTANTE A LEITURA DOS COMENTÁRIOS NO CÓDIGO

public MainPage()
{
  this.InitializeComponent();
  this.NavigationCacheMode = NavigationCacheMode.Required;

  //Inicialização do recurso DrawerLayout
  DrawerLayout.InitializeDrawerLayout();
  //Declaração de um vetor de opções fictícias de menu
  string[] opcoesMenu = new string[6] { "Opção 1", "Opção 2", "Opção 3", "Opção 4", "Opção 5", "Opção 6" };
  //Indicando o vetor de opções para o ListView que irá
  //exibir o menu dentro do espaço reservado para o menu hamburger
  lvOpcoesMenu.ItemsSource = opcoesMenu;
}

protected override void OnNavigatedTo(NavigationEventArgs e)
{
  //Tratando o toque o menu físico de voltar (back)
  //do Windows Phone para situações onde o usuário queira
  //fechar o menu através dele.
  Windows.Phone.UI.Input.HardwareButtons.BackPressed += HardwareButtons_BackPressed;
}

void HardwareButtons_BackPressed(object sender, Windows.Phone.UI.Input.BackPressedEventArgs e)
{
  //Ao tocar no botão back do WP verificamos se
  //o menu está aberto para então fecha-lo ou sair da aplicação
  if (DrawerLayout.IsDrawerOpen)
  {
    DrawerLayout.CloseDrawer();
    e.Handled = true;
  }
  else
    Application.Current.Exit();
}

private void Image_Tapped(object sender, TappedRoutedEventArgs e)
{
  //Tratando o toque no ícone do menu hamburger
  //para abri-lo ou fecha-lo
  if (DrawerLayout.IsDrawerOpen)
    DrawerLayout.CloseDrawer();
  else
    DrawerLayout.OpenDrawer();
}

private async void lvOpcoesMenu_Tapped(object sender, TappedRoutedEventArgs e)
{
  //Tratamento para obter a opção do menu
  //hamburger selecionada pelo usuário
  var lv = sender as ListView;
  string opcao = lv.SelectedItem.ToString();
  var dialog = new MessageDialog(opcao, "Opção selecionada:");
  await dialog.ShowAsync();
}

Espero ter ajudado.

Abraços,

Eduardo Henrique Rizo

MCP

Post Relacionado: 

Anúncios

Coordenador de Internet da Universidade do Oeste Paulista (Unoeste) e professor universitário de disciplinas relacionadas ao desenvolvimento de sistemas para Web, gerenciamento de servidores, serviços e redes.

Marcado com: , , , , , , , , ,
Publicado em Windows Phone
6 comentários em “Curso Windows Phone – Menu hamburger com XAML e C#
  1. Eu já havia testando esse DrawerLayout, é muito bom mesmo. Parabéns por compartilhar isso.

  2. Joabson de Souza disse:

    Eduardo,

    Estou implementando um efeito que você postou a muito tempo atras: https://ehrizo.wordpress.com/2013/05/10/curso-windows-phone-como-implementar-o-efeito-de-arrastar-objetos-nas-apps/

    Você pode me da uma ajuda?

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 )

Imagem do Twitter

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

Foto do Facebook

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

Foto do Google+

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

Conectando a %s

Sorocaba e Região
Prestadora de serviços RIZZO GS - Sorocaba/SP

Serviços de limpeza, conservação, recepção, copa, portaria, vigia, zeladoria, jardim, elétrica, hidráulica, pintura, etc.

Contato: (15) 3357-4263 / (15) 3357-4502 - contato@rizzogs.com.br

Website: http://www.rizzogs.com.br

%d blogueiros gostam disto: