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

LikeIntroducció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:

Menu lateral App Facebook

Menu lateral App Facebook

¿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:

Nuevo proyecto

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.

SlideView

SlideView

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 …

Añadir paquete NuGet

Añadir paquete NuGet

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

SlideView

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:

Librería instalada

Librería instalada

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:

Menu lateral izquierdo

Menu lateral izquierdo

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:

Menu lateral derecho

Menu lateral derecho

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

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s