[DEV] Universal APPs: Criar Menus 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.

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:

[sourcecode language=”xml”] <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>
[/sourcecode]

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.

[sourcecode language=”xml”] <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>
[/sourcecode]

Implementação do clique do botão btnHamburger

[sourcecode language=”csharp”] …
private void btnHamburger_Click(object sender, RoutedEventArgs e)
{
meuSplitView.IsPaneOpen = !meuSplitView.IsPaneOpen;
}
…
[/sourcecode]

Abraços,

Eduardo Henrique Rizo (@eduardorizo)

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

Post Relacionado: 

• Curso Windows Phone / Universal APPs