Wilson Vargas
Wilson Vargas

Un programador enamorado de su código.

Wilson Vargas
Author

Un chico con una gran experiencia en el arte del desarrollo software. Desarrollador de aplicaciones de móviles, especialista en ASP.Net, Xamarin y tecnologías de computo en la Nube en especial Azure.

Share


Suscribete


Mantente al tanto de mis nuevos artículos

Tags


Featured on Planet Xamarin badge

Twitter


Cómo agregar menús laterales en Windows Phone (similar a la aplicación de Facebook)

Wilson VargasWilson Vargas

Hoy, pensando en cuál sería la manera correcta de agregar múltiples opciones dentro de un mismo Frame a una aplicación que estoy desarrollando y que el usuario necesite visitarlas de forma rápida, empecé a explorar la aplicación de Facebook For Windows Phone. Me di con la sorpresa de que ellos utilizaban una opción un tanto peculiar para hacer lo que yo quería. No sé si cumple al 100% las directrices de diseño del estilo Modern UI, pero si la desarrolló Microsoft, porque no puedo hacerlo yo, no creen?

Así que me lo tomé como un reto y traté de hacerlo, lo primero que se me vino a la cabeza fue si tal vez podía utilizar una plantilla panorama o pivote para hacer esto, pero después de algunas pruebas que no fui capaz de obtener lo que quería :(

Lo que yo quería era:

  • Cuando se inicie la aplicación, la primera vista sea la central.
  • Al deslizar hacia la izquierda o derecha poder abrir o cerrar los menús laterales.
  • También usando de los botones de las esquinas podamos también cerrar y abrir los menús laterales.
  • Los menús laterales tienen una anchura menor que 480 esta manera, cuando se abra, todavía podemos ver una parte de la ventana principal (incluyendo el botón superior).
  • Al abrir los menús de la ApplicationBar no es visible (si es que lo hubiera).

En conclusión que quede así:

La solución que he implementado (no usa el patrón MVVM) es sólo una prueba de concepto sobre cómo implementar esta funcionalidad. El enfoque es bastante simple, hacer sentir al usuario que se mueve dentro de un lienzo a través de gestos conocidos.

Al principio pensé usar sólo un Grid y animar el margen del Grid, pero como Windows Phone no tiene ThicknessAnimation, las animaciones para abrir y cerrar los menús eran demasiado rápidas. También intenté implementar el gesto swipe utilizando el evento Touch.FrameReported, los resultados fueron mejores al anterior, pero aún no daban esa sensación de navegabilidad que una aplicación digna para Windows Phone puede ofrecer.

Entonces, cómo lo hago?!

  • Puse un Canvas que tiene un ancho de 1320 y la altura es stretches y se extiende a toda la altura disponible que contiene mi vista principal.
  • La vista principal la agrego en el Canvas, con la posición inicial de la propiedad Canvas.Left en -420, de esta manera podemos ver la vista principal en el centro.

  • Las posiciones dentro del Canvas son:
  • 0: Se muestra el menú de la izquierda.
  • -420: Se muestra la vista principal en medio.

  • -840: Se muestro el menú de la derecha.

  • Al presionar los botones usaremos un recurso Storyboard con una DoubleAnimation para ajustar la posición Canvas.Left dentro del Canvas, ya sea en 0, -420 o -840.

Utilizo este método para abrir o cerrar los menús laterales

  • Para implementar el gesto swipe, utilizo los eventos ManipulationStarted, ManipulationDelta y ManipulationEnded en el Canvas. En el evento ManipulationDelta fijamos el valor Canvas.Left directamente (sin necesidad de animaciones) entre un máximo de 0 y un mínimo de -840.

  • Cuando el usuario se deslice tenemos que almacenar la posición inicial Canvas.Left en una variable. Esto para hacer una pequeña resta del Canvas.Left final y la posición inicial en valor absoluto (almacenada en una variable), si el resultado de esta resta es menor que 100 (cuando el gesto swipe no sea tan extenso), la aplicación nos tiene que a la posición inicial. De lo contrario, pasamos a la siguiente vista.

• La variable _vistaModificada se utiliza para ver si la vista ya estaba movida por otro evento, como por ejemplo cuando presionemos algunos de los botones.

Bueno, tú eres el genio, así que acá que te dejo un código de ejemplo para que puedas jugar con el, espero te sirva de mucho, saludos y nos leemos pronto :)

Descargar el código: Espero te sirva.

Un chico con una gran experiencia en el arte del desarrollo software. Desarrollador de aplicaciones de móviles, especialista en ASP.Net, Xamarin y tecnologías de computo en la Nube en especial Azure.

Comentarios