[Windows 8] Trabajando con el ContextMenu

Anteriormente vimos como utilizar el MessageDialog (mira el post acá), y en este post vamos a dar una revisadita al ContextMenu, que como su nombre lo indica nos brinda la posibilidad de crear menús contextuales…. pero (ah ya empezaron los problemas) antes de iniciar en forma quiero comentar un punto clave sobre digamos usabilidad, como ya saben Windows 8 está imaginado para brindar una excelente experiencia de usuario en dispositivos touch, donde generalmente nunca se usa un mouse sino los dedos, y he aquí el dilema, con el mouse es muy sencillo dar click derecho para mostrar el menú contextual, pero cuando estamos trabajando en un dispositivo touch como una tablet con lo dedos no podemos dar click derecho… y si en efecto no sirve tocar la pantalla con otro dedo (por si las moscas jajaja), así entonces para sacar el menú contextual cuando estamos en ese tipo de dispositivos se debe mantener tocada la pantalla, sin embargo esto no es muy intuitivo… y esa carreta para qué? pues para una recomendación, NO abusemos de los menús contextuales.

Entonces entrando en materia, para crear un menú contextual hacemos uso de la clase PopupMenu, la cual se encuentra en el espacio de nombres Windows.UI.Popups y vamos a manejar el evento Holding, entonces el xaml que tenemos muy sencillo será:

   1:  <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
   2:      <StackPanel>
   3:          <Button x:Name="btnMenu" Content="Menú Contextual" Holding="btnMenu_Holding_1"></Button>
   4:      </StackPanel>
   5:  </Grid>

Y en el evento tenemos:

   1:  private async void btnMenu_Holding_1(object sender, HoldingRoutedEventArgs e)
   2:  {
   3:   
   4:      var estado = e.HoldingState;
   5:   
   6:      if (estado == Windows.UI.Input.HoldingState.Started)
   7:      {
   8:          var menu = new PopupMenu();
   9:   
  10:          menu.Commands.Add(new UICommand("Opción 1",
  11:              new Windows.UI.Popups.UICommandInvokedHandler(
  12:                  (args) => { /* Lógica */ })
  13:          ));
  14:   
  15:          menu.Commands.Add(new UICommand("Opción 2",
  16:              new Windows.UI.Popups.UICommandInvokedHandler(
  17:                  (args) => { /* Lógica */ })
  18:          ));
  19:   
  20:          menu.Commands.Add(new UICommand("Opción 3",
  21:              new Windows.UI.Popups.UICommandInvokedHandler(
  22:                  (args) => { /* Lógica */ })
  23:          ));
  24:   
  25:          await menu.ShowAsync(e.GetPosition(this));
  26:      }
  27:  }

Revisando el código anterior, como siempre se hace uso de async y await, luego verificamos el estado del menú que este en started, y si es correcto creamos un nuevo objeto de tipo PopupMenu, le adicionamos 3 opciones y finalmente con ShowAsync es muestra, a ese método le pasamos  la posición del objeto que generó el evento, para así saber en donde mostrar el menú, y la siguiente imagen muestra como se ve el menú, en este caso se hace uso del simulador y la opción de la manito, para decirle al simulador que se desea imitar el comportamiento touch:

image

Espero les haya gustado!

3 comments

Leave a Reply

Your email address will not be published. Required fields are marked *