Universal APPs: Criar menu no estilo Hambuger através da classe SplitView

A classe SplitView representa um container com duas visões, sendo uma para o conteúdo principal (Content) e outra geralmente utilizada para comandos de navegação (Pane).
Um dos usos comuns para o SplitView é a criação de menus hambuger, conforme ilustra a imagem abaixo, porém como ele não tem uma guideline específica então, enquanto DEVs, ficamos livres para criar outras possibilidades de interface utilizando o mesmo componente.
Menu hamburger
As propriedades do SplitView permite que o mesmo tenha diferentes tipos de comportamentos em relação à sua forma de apresentação, por exemplo, ele pode ficar sobre o conteúdo principal, pode empurrar o conteúdo principal no momento de sua abertura, pode ficar sempre visível ou não, etc.
O código XAML abaixo demonstra o básico sobre o SplitView:

<SplitView IsPaneOpen="True" DisplayMode="Inline" OpenPaneLength="250">
    <SplitView.Pane>
        <TextBlock Text="Pane" FontSize="24" VerticalAlignment="Center" HorizontalAlignment="Center"/>
    </SplitView.Pane>

    <SplitView.Content>
       <Grid>
           <TextBlock Text="Content" FontSize="24" VerticalAlignment="Center" HorizontalAlignment="Center"/>
       </Grid>
    </SplitView.Content>
</SplitView>
SplitView Panes
Fonte: http://blog.jerrynixon.com/2015/04/implementing-hamburger-button-with.html
Panel e Content
Fonte: https://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.splitview.aspx

Ainda sobre características do SplitView, é possível que você especifique se o painel de navegação (Pane) será aberto à esquerda ou à direita. Exemplo:

Nesse ponto da leitura você já deve ter entendido a função da classe SplitView, sendo assim, apresento um trecho de código XAML que pode servir de base para quem deseja utilizar esse componente para montar em sua APP um menu de navegação no estilo hamburger.

<Page x:Class="UnoesteUWP.HamburgerMenu" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:UnoesteUWP" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">

    <Grid>
	    <!-- Divisão da página em duas linhas (topo e restante da tela) -->
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
		<!-- Definição do topo -->
        <StackPanel Height="50" Background="Green" Orientation="Horizontal">
		    <!-- Botão que irá abrir o painel para exibir o menu hambuger -->
            <Button x:Name="btnHamburger" FontFamily="Segoe MDL2 Assets" Content="&amp;#xE700;" Width="50" Height="50" Grid.Row="0" Background="Transparent" Click="btnHamburger_Click" />
            <TextBlock Style="{StaticResource TitleTextBlockStyle}" Foreground="White" Height="50" VerticalAlignment="Center" Text="Hamburger Menu" />
        </StackPanel>
		<!-- Definição do SplitView -->
        <SplitView Name="meuSplitView" DisplayMode="Overlay" IsPaneOpen="False" FlowDirection="LeftToRight" RequestedTheme="Dark" CompactPaneLength="50" OpenPaneLength="250" Grid.Row="1">
			<!-- Painel de navegação -->
            <SplitView.Pane>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <StackPanel Grid.Row="1">
                        <StackPanel Orientation="Horizontal">
                            <Button Name="btnMenu1" FontFamily="Segoe MDL2 Assets" Content="&amp;#xE825;" Width="50" Height="50" Background="Transparent"/>
                            <TextBlock Text="Button 1" FontSize="18" VerticalAlignment="Center" />
                        </StackPanel>
                        <StackPanel Orientation="Horizontal">
                            <Button Name="btnMenu2" FontFamily="Segoe MDL2 Assets" Content="&amp;#xE10F;" Width="50" Height="50" Background="Transparent"/>
                            <TextBlock Text="Button 2" FontSize="18" VerticalAlignment="Center" />
                        </StackPanel>
                    </StackPanel>
                    <StackPanel Orientation="Horizontal" Grid.Row="2">
                        <Button Name="btnMenu3" FontFamily="Segoe MDL2 Assets" Content="&amp;#xE1D6;" Width="50" Height="50" Background="Transparent"/>
                        <TextBlock Text="Button 3" FontSize="18" VerticalAlignment="Center" />
                    </StackPanel>
                </Grid>
            </SplitView.Pane>
			<!-- Painel de conteúdo -->
            <SplitView.Content>
                <Grid Background="Black">
                    <TextBlock Name="txtConteudo" Text="Conteúdo da APP..." Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="54"/>
                </Grid>
            </SplitView.Content>
        </SplitView>
    </Grid>
</Page>

Implementação do clique do botão btnHamburger

...
private void btnHamburger_Click(object sender, RoutedEventArgs e)
{
    meuSplitView.IsPaneOpen = !meuSplitView.IsPaneOpen;
}
...

imagem4

Abraços,

Eduardo Henrique Rizo

MCP

Fonte: http://blog.jerrynixon.com/2015/04/implementing-hamburger-button-with.html

Post Relacionado: 

[twitter-follow screen_name=’eduardorizo’ show_count=’yes’]

6 comentários em “Universal APPs: Criar menu no estilo Hambuger através da classe SplitView”

  1. Pingback: Free: Curso Windows Phone / Universal APPs – Vários tópicos | Blog do Eduardo H. Rizo

  2. Que ótimo post Eduardo! Sou fã dessa série de posts que vc faz, nos falamos pelo Twitter dias atrás. 😀
    Uma dúvida: Nos Content dos botões, tem “”. De onde vem isso e o que significa?

    Outra coisa: Gostaria que você fizesse um post que ensinasse como criar um botão semelhante ao “like” do Facebook, onde o usuário tem dois botões, um com “gostei” e outro “não gostei”, e ele pudesse opinar, e depois mostrasse os resultados (quantos votaram em “gostei” e em “não gostei”).
    Seria uma mão na roda se você pudesse me ajudar com esse post.
    Muito Obrigado.
    Robledo

      1. Olá Eduardo,
        Sim, seria salvo em um banco de dados ou servidor, para mostrar os resultados de todos os dias em relação as refeições, tipo: quantas pessoas gostaram do almoço de hoje e quantas não gostaram…

      2. Bom, nesse caso penso que esses botões do tipo gostei/não gostei teriam que chamar algum webmethod passando por parâmetro a refeição relativa ao voto favorável ou não e aí esse webmethod se encarregaria de gravar o dado no seu BD.
        Depois, caso você queira mostrar os resultados no celular, então teria que ter outro webmethod para devolve-los e você exibir. Certo?

        Abraços,
        Eduardo H. Rizo

      3. Respondendo ao seu comentário de 03/03: Sim, seria interessante que depois eu incluísse essa funcionalidade, para que o usuário visse quantas pessoas gostaram ou não. Demorei pra responder, porque pedi pro site avisar quando tivesse um novo comentário, mas não recebi e-mail, e decidi vim verificar. 😀

Deixe um comentário para Robledo Gomes Cancelar resposta