[DEV] Universal APPs: Criar Menus no estilo Hambuger através da classe SplitView

0

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>

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="https://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:UnoesteUWP" xmlns:d="https://schemas.microsoft.com/expression/blend/2008" xmlns:mc="https://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 (@eduardorizo)

MCP

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

Post Relacionado: 

Share.

About Author

Bacharel em Ciência da Computação pela FIPP/Unoeste, Pós-Graduado em Desenvolvimento de Sistemas Web, Segurança da Informação e Avaliação do Ensino e da Aprendizagem, Professor universitário e responsável pelo setor de desenvolvimento de sistemas web da Universidade do Oeste Paulista. MCP e MCPS pela Microsoft e nas horas vagas dedica um pouco do seu tempo escrevendo posts técnicos sobre desenvolvimento de sistemas web, windows phone, gerenciamento de servidores e outros assuntos para a comunidade.