[Windows Phone 8.1] Crear menu lateral deslizante (similar al de la App Facebook)

Introducción

El SDK de Windows Phone es bastante versátil y nos proporciona una
fuente bastante extensa de controles como para realizar una interfaz de
usuario rica y atractiva. De hecho, tenemos ciertos controles como el
Hub o el Pivot encargados de crear la estructura principal de nuestra
aplicación determinando el acceso a los distintos apartados. Sin
embargo, no es una forma única y exclusiva. Son múltiples los casos de
aplicaciones en la tienda con ciertos menus deslizantes o determinos
apartados personalizados. Un ejemplo claro de ello es la aplicación de Facebook que cuenta con un menu deslizante como el siguiente:

¿Cómo realizamos dicho menu?

Bien, tenemos múltiples formas de lograrlo. Con el uso combinado de
paneles, animaciones y gestos podríamos conseguir reproducir el menu de
Facebook. Sin embargo, tenemos una librería llamada SlideView disponible
tanto para Windows Phone 8.0 como para Windows Phone 8.1 que tiene como
objetivo permitirnos crear un menu de este tipo con suma facilidad.

En este artículo vamos a aprender como crear menus deslizantes al estilo Facebook utilizando la librería SlideView.

¿Te apuntas?

Crear el menu en una vista

Comenzamos creando un nuevo proyecto:

Para crear el menu lateral deslizante tipo Facebook, como mencionamos
previamente vamos a utilizar una librería gratuita creada por Cyril Cathala, MVP de C# llamada SlideView.
La librería contiene múltiples controles inspirados por el menu
deslizante de Facebook que analizaremos poco a poco en este artículo.

Comenzamos añadiendo la librería.

La librería la tenemos disponible en NuGet por lo que podemos instalarlo usando Nuget Package Manager. En las referencias del proyecto hacemos clic derecho y seleccionamos la opción Manage NuGet Packages …

En la ventana modal que nos aparece, en la parte superior derecha donde podemos realizar una búsqueda, buscamos por “slideview”:

Seleccionamos el primero de los elementos y pulsamos el botón Install.
Tras un breve periodo donde se procede a descargar e incluir las
librerías en las referencias del proyecto, tendremos el siguiente
resultado:

Nos centramos en nuestra página principal, MainPage.xaml. Vamos a utilizar el control SlideView de la librería:

<Grid>
     <ctl:SlideView SelectedIndex="1">
          <Grid Background="Red"
                Width="350">
                <TextBlock Text="Left"
                           FontSize="48"
                           HorizontalAlignment="Center"/>
          </Grid>
          <Grid Background="LightGray">
                <TextBlock Text="Main Content"
                           FontSize="48"
                           HorizontalAlignment="Center"/>
          </Grid>
          <Grid Background="Firebrick"
                  Width="350">
                <TextBlock Text="Right"
                           FontSize="48"
                           HorizontalAlignment="Center"/>
          </Grid>
     </ctl:SlideView>
</Grid>

Es un control muy sencillo. En su interior iremos añadiendo paneles
que se apilaran uno tras otro de forma horizontal. Podemos establecer un
ancho fijo o dejar el ancho automático. En caso de dejar un ancho
automático, el panel se ajustará al ancho de la pantalla. Además,
podemos indicar el panel visible de forma muy simple mediante la
propiedad SelectedIndex del control.

El resultado es el siguiente:

Podéis descargar el ejemplo realizado a continuación:

Crear el menu a nivel de aplicación

El ejemplo anterior es muy simple y nos permite crear menus laterales
con suma facilidad. Sin embargo, los paneles laterales solo aparecerán
en la vista donde utilicemos el control.

¿Qué ocurre si deseamos los menus laterales a lo largo de toda la aplicación?

Para estos casos tenemos disponible en la librería otro control, variante del Frame, llamado SlideApplicationFrame. Para aprender a utilizar este frame vamos a crear otro proyecto diferente al anterior. Añadimos las carpetas Views, ViewModels y Services además de las clases base necesarias para implementar el patrón MVVM de la misma forma que vimos en este artículo.

Para utilizar el control, necesitamos sustituir el Frame de la aplicación por el frame de tipo SlideApplicationFrame. Una forma sencilla de definir el nuevo frame es directamente en XAML en App.xaml:

<ctl:SlideApplicationFrame Header="Slide View"
                           Background="Green"
                           x:Key="RootFrame">
     <ctl:SlideApplicationFrame.LeftContent>
          <shell:LeftView />
     </ctl:SlideApplicationFrame.LeftContent>
     <ctl:SlideApplicationFrame.RightContent>
          <shell:RightView />
     </ctl:SlideApplicationFrame.RightContent>
</ctl:SlideApplicationFrame>

Definimos el contenido del menu lateral izquierdo mediante la propiedad LeftContent y el derecho mediante RightContent.
En cada panel podemos incluir una vista con su contenido y gestionada
por su propio viewmodel. El contenido del menu lateral izquierdo:

<Grid x:Name="LayoutRoot"
      Background="LightBlue">
     <Grid.RowDefinitions>
          <RowDefinition Height="Auto" />
          <RowDefinition Height="*" />
     </Grid.RowDefinitions>
     <Grid Background="Blue">
          <TextBlock Margin="6,12"
                     HorizontalAlignment="Center"
                     Text="Left View" />
     </Grid>
     <Grid Grid.Row="1">
          <TextBlock Text="Left side!"/>
     </Grid>
</Grid>

El resultado:

El menu lateral derecho es otra vista con el siguiente contenido:

<Grid x:Name="LayoutRoot"
      Background="Orange">
      <Grid.RowDefinitions>
           <RowDefinition Height="Auto" />
           <RowDefinition Height="*" />
      </Grid.RowDefinitions>
      <Grid Background="OrangeRed">
           <TextBlock Margin="6,12"
                      HorizontalAlignment="Center"
                      Text="Right View" />
      </Grid>
      <Grid Grid.Row="1">
           <TextBlock Text="Right side!"/>
      </Grid>
</Grid>

El resultado:

NOTA: Podemos personalizar la cabecera del control, los botones para expandir cada menu e incluso el panel principal (LeftPanelButton, MainPanel, etc).

Una vez definido el frame SlideApplicationFrame bastará con acceder a el y reemplazar el frame de la aplicación, rootFrame:

rootFrame = this.Resources["RootFrame"] as SlideApplicationFrame;

Sencillo, ¿verdad?

Un detalle más…

Aunque no esta directamente relacionado con los menus laterales, la librería cuenta con otro control más llamado AutoHideBar.
El control AutoHideBar se muestra cuando realizamos scroll hacia arriba
en la parte superior de un listado y se oculta al hacer scroll hacia
abajo. Vamos a utilizar el control. Su definición es sencilla:

<ctl:AutoHideBar />

El objetivo del control es mostrar información o botones de acción al
hacer scroll hacia la parte superior de una lista. Por ese motivo, para
poder usar el control necesitaremos, un control listado. En la viewmodel de la vista vamos a definir primero una colección:

private ObservableCollection<string> _list;
 
public ObservableCollection<string> List
{
     get { return _list; }
     set { _list = value; }
}

Creamos un método que rellenará la propiedad List con datos:

private void FillData()
{
     for(int i = 0; i < 50; i++)
     {
          _list.Add(string.Format("List Item Number {0}", i + 1));
     }
}

Por último, en la vista, definiremos un control ListView con la propiedad ItemsSource bindeada a la propiedad List:

<ListView x:Name="List"
           ItemsSource="{Binding List}">
     <ListView.Header>
          <Grid Height="80"/>
     </ListView.Header>
     <ListView.ItemTemplate>
          <DataTemplate>
               <Grid>
                    <TextBlock Text="{Binding}"
                               FontSize="18" />
               </Grid>
          </DataTemplate>
     </ListView.ItemTemplate>
</ListView>

Utilizamos la propiedad Header del ListView para establecer un encabezado y el control AutoHideBar:

<ctl:AutoHideBar ScrollControl="{Binding ElementName=List}"
                 Background="DarkGreen">
     <Grid>
          <TextBlock Text="AutoHideBar"
                     HorizontalAlignment="Center" />
     </Grid>
</ctl:AutoHideBar>

Para que el control AutoHideBar funcione correctamente, necesitamos bindear el control lista en la propiedad ScrollControl del control AutoHideBar.

Podéis ver al Frame SlideApplicationFrame y al controlAutoHideBar en acción en el siguiente video:

Podéis descargar el ejemplo realizado a continuación:

Más información

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *