Introdução

Neste tutorial iremos criar um menu lateral deslizante semelhante ao utilizado por aplicativos famosos, tendo como principal expoente o aplicativo do Facebook e os aplicativos do Google. O uso de menus laterais deslizantes não fazem parte dos paradigmas de design normalmente associados ao Windows Phone, porém eles podem ser implementados para manter a experiencia do usuário semelhante a obtida com versões do aplicativo para outras plataformas.

Resultado final: Menu aberto

Preparação

Para a criação de uma aplicação que possui um menu lateral deslizante iremos usar a biblioteca SlideView. SlideView é uma biblioteca pre permite a criação de aplicação com um ou mais menus laterais. Essa biblioteca permite que se crie um menu que funcionará em todas as paginas da aplicação ou em páginas especificas. Neste tutorial usaremos a segunda alternativa, porém é fácil de se adaptar a aplicação para que o menu apareça em todas as páginas sem a necessidade de criar o menu em cada página individualmente.

Para usarmos a biblioteca SlideView devemos instalar o pacote Nuget correspondente, as instruções para a instalação de pacotes Nuget pode ser vista aqui.

Desenvolvimento

Inicialmente devemos adicionar a seguinte linha de código ao cabeçalho da página que irá receber o menu lateral.

[sourcecode language=”xml” wraplines=”false” collapse=”false”]
xmlns:slideview="clr-namespace:SlideView.Library;assembly=SlideView.Library"
[/sourcecode]

Essa linha permite que acessemos o conteúdo a biblioteca através do nome slideview, caso quiséssemos acessar através de um nome diferente é só alterar o trecho imediatamente após “xmlns:”.

O uso da biblioteca SlideView é simples. Basta adicionarmos o controle SlideView ao layout da página e cada gestor de layouts adicionado dentro do mesmo se comportará como um painel, devendo o usuário definir qual painel é menu e qual é a pagina em si. Segue abaixo um exemplo da utilização do SlideView na criação de painéis.

[sourcecode language=”xml” wraplines=”false” collapse=”false”]
<Grid Background="LightGray">
<slideview:SlideView x:Name="sld_view">
<Grid x:Name="PainelMenu" HorizontalAlignment="Left" Width="400">
<!– Composição do menu –>
<Grid/>
<Grid x:Name="PainelPrincipal" Width="480">
<!– Composição da página –>
</Grid>
</slideview:SlideView>
</Grid>
[/sourcecode]

Note que a largura dos painéis é definida em cada grid. Essa largura não deve ser superior a largura da tela. Como queremos que seja exibido um pedaço do painel principal quando o menu estiver em foco a largura do seu painel deve ser menor que a largura da tela. Nesse exemplo usamos 480 pixels para largura do painel principal e 400 pixels para o painel do menu.

A página por padrão sempre inicia no painel mais a esquerda de todos. Caso esse painel seja o menu, como no nosso exemplo, não é desejável que a pagina já abra nele. Para isso podemos alterar qual é o painel aberto através do código que implementa a página. Como desejamos que essa alteração seja feita logo na abertura da página podemos fazer ela no método construtor da página.

[sourcecode language=”c-sharp” wraplines=”false” collapse=”false”]
public MainPage()
{
InitializeComponent();
sld_view.SelectedIndex = 1; // 0 for menu and 1 for page content
}
[/sourcecode]

Tela principal no momento que a página é carregada.

Observações finais

Com esse tutorial é possível a criação de menus laterais deslizantes que exibem parte do conteúdo principal da página em segundo plano.  Cada painel pode conter o layout que melhor convir ao desenvolvedor por ser composto de Grid’s ou outro gestor de layout padrão da plataforma. A adaptação para utilizar o menu lateral em todas as paginas sem a necessidade de repetir a cada pagina deve ser feito no arquivo App.xaml.cs redefinindo o frame onde as páginas são desenhadas. Mais informações sobre esse procedimento podem ser encontradas aqui.