En cualquier aplicación de escritorio existen varias maneras de interactuar, podemos usar botones dentro de una aplicación, como es el caso de un instalador o un asistente de cualquier tipo, podemos hacer click derecho sobre una palabra o un elemento y obtener un menú contextual, o podemos recurrir al menú, situado habitualmente en la esquina superior izquierda con múltiples opciones a nuestra disposición.
Esta idea también ha cambiado, o mejor dicho, evolucionado en Windows 8, ya que ahora veremos aplicaciones donde es más importante el contenido que las propias opciones de la aplicación, quedando la interacción de menús en un discreto segundo plano. Para ello, en este, y en el siguiente artículo vamos a comentar dos opciones de interacción que han cambiado razonablemente en Windows 8, el menú contextual y la barra de menús, denominada a partir de ahora Application Bar.
Menú contextual
Acostumbrado a aparecer cuando pulsamos click derecho, nos ofrece una serie de opciones sobre el elemento sobre el que estamos en este momento, como copiar, comprimir o borrar, entre las mas habituales del explorador de Windows.
En metro la idea es similar, accederemos mediante click derecho con teclado y ratón. sin embargo, con metro tenemos una limitación que es que no podemos tener mas de 5 elementos presentes en el menú, y como se aprecia la interfaz está preparada para interacción táctil, con más espacio y una apariencia más ligera.
Para implementar este click derecho, nos dirigimos al objeto al que querramos aplicarlo (en mi caso fue un ContentControl que contenía un texto) y agregamos una función handler que responda al evento RightTapped, que viene a significar click derecho.
ItemDetail.RightTapped += new Windows.UI.Xaml.Input.RightTappedEventHandler(ItemDetail_RightTapped);
En el cuerpo de la función definimos nuestro menú contextual y las diferentes opciones que tendremos. Tenemos dos opciones para recibir la información del menú:
- En el segundo parámetro del constructor de UICommand especificamos un callback (una función que se llame en caso de seleccionarlo.)
- Recoger el resultado de la función ShowForSelectionAsync y a partir de ahí seleccionar en base al indice obtenido.
async void ItemDetail_RightTapped(object sender, Windows.UI.Xaml.Input.RightTappedEventArgs e)
{
PopupMenu menu = new PopupMenu();
menu.Commands.Add(new UICommand("Enviar por e-mail", null));
menu.Commands.Add(new UICommand("Borrar", null));
await menu.ShowForSelectionAsync(GetElementRect((FrameworkElement)sender));
}
El otro parámetro que será necesario definir será la posición, para lo cual hemos recurrido a algo de ayuda de los ejemplos de la API, y es una función que genera el rectángulo del elemento que está efectuando la llamada.
Rect GetElementRect(FrameworkElement element)
{
GeneralTransform buttonTransform = element.TransformToVisual(null);
Point point = buttonTransform.TransformPoint(new Point());
return new Rect(point, new Size(element.ActualWidth, element.ActualHeight));
}
Conclusión
Pese a que ahora parece distinto, el menú contextual sigue teniendo especial importancia en el desarrollo de interfaces, y no deberíamos por tanto descuidarlo o ignorarlo. Al final del artículo está una referencia a la documentación de interfaz de usuario de Metro.
En el siguiente artículo veremos cómo usar la Application Bar como sustituto de la barra de menús en nuestra aplicación.
Mas información en MSDN
rlbisbe @ dev 