[email protected]

Asunción, PARAGUAY

Ingeniería y desarrollo de software, emprendimiento, cursos

25 de marzo de 2014

Silverlight: Menú contextual personalizado

Silverlight

Introducción

En cada aplicación Silverlight nos encontramos con un menú contextual que contiene en su interior dos elementos, uno de ellos correspondiente a la información de la versión de Silverlight que tenemos disponible en nuestro equipo. El otro elemento permite instalar una aplicación de negocios en Silverlight.

Contexto

Debido a que implementaremos un sitio web, no tendremos disponible la opción "Instalar Aplicación Silverlight". Dicha opción está únicamente disponible en una aplicación de Negocio Silverlight en donde podremos instalar y desinstalar la aplicación en nuestro escritorio.  La aplicación de negocio Silverlight permite dos formas de implementación: En el explorador (In The Browser) y Fuera del Explorador (Out of The Browser), este último como si fuera una aplicación de escritorio.

Utilizando código

Obviamente, el primer paso consiste en crear una aplicación de tipo Silverlight, seleccionado la opción "Sitio Web" (en la lista desplegable). O, si prefieres puedes agregar esta funcionalidad en algún proyecto que ya lo tengas desarrollado.

En este punto, tenemos nuestros archivos y carpetas predeterminados. Para este caso, nos enfocaremos en los archivos MainPage.xaml y MainPage.xaml.cs. De modo a evitar confusión eliminaremos el archivos .aspx del proyecto de sitio web, que no lo necesitaremos en este ejemplo.

En la página MainPage.xaml colocaremos estas líneas de código XAML:
<UserControl x:Class="CustomContextMenu.MainPage"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 Height="200" Width="350">

<Grid x:Name="LayoutRoot" Background="Azure">
    <TextBlock Text="Context Example" FontFamily="Arial" FontSize="12" FontWeight="Bold" />
 </Grid>
</UserControl>
Ejecutamos el proyecto (F5). No olvidemos de marcar el sitio web como proyecto de inicio. Visual Studio preguntará si queremos modificar el archivo Web.config o no. Dejaremos la opción predeterminada.

Luego de hacer todos estos pasos tendremos un proyecto vacío con color de fondo 'azure' y un bloque de texto (TextBlock) simple, que para fines de prueba está correcto. DE manera predeterminada, nuestro Silverlight tiene un menú contextual que muestra la palabra "Silverlight".

Volvamos al Visual Studio y seleccionamos la opción "Parar" el proyecto que se está ejecutando. A partir de este punto, nos enfocaremos en el archivo de código MainPage.xaml.cs.

Muy bien, ahora deshabilitaremos el menú contextual predeterminada de la aplicación Silverlight. Para realizar esta acción necesitamos escribir algo de código (dentro del archivo MainPage.xaml.cs), como se muestra a configuración:
//Constructor of the Main Page
 public MainPage()
 {
     // Inicializamos todos los componentes visuales
     InitializeComponent();

     //Agregamos el manejador de eventos para el click derecho del mouse     this.MouseRightButtonDown += (s, e) =>
     {
         //Marcar el evento como manejado, para deshabilitar el menú contextual predeterminado.
         e.Handled = true;
     };
 }
El código de arriba, crea un evento para el clic derecho del mouse. Entonces, cuando realizamos la acción (clic derecho) en cualquier lugar dentro de la aplicación Sivlerlight cancelaremos el evento. Realmente manejamos este evento diciendo al compilador "¡Deja esto, tengo el control de este evento!".

Muy bien hasta aquí, pero el título de esta entrada se refiere a "Menú contextual personalizado". El fragmento de abajo trata ese punto, pero me imagino que será útil para muchos de ustedes.Ahora, la última cosa que puedo comentar es que si deseas implementar este comportamiento debemos copiar/pegar el siguiente código en el constructor de cualquier página Silverlight.

Ahora, nos enfocaremos en lo principal de esta entrada. Crearemos un nuevo menú contextual independiente del predeterminado (se puede agregar fondo, color y cualquier elemento XAML).

Para crear un nuevo menú contextual, necesitamos escribir las siguientes líneas de código en el archivo MainPage.xaml, de la siguiente manera:
<UserControl x:Class="CustomContextMenu.MainPage"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 Height="200" Width="350"
 xmlns:contextMenu="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Input.Toolkit">

    <Grid x:Name="LayoutRoot" Background="Azure">
        <TextBlock Text="Context Example" FontFamily="Arial" FontSize="12" FontWeight="Bold" />
        <contextMenu:ContextMenuService.ContextMenu>
            <contextMenu:ContextMenu>
                <contextMenu:MenuItem Header="Contextual Menu 1" />
                <contextMenu:Separator />
                <contextMenu:MenuItem Header="Contextual Menu 2" Click="MenuItem_Click" />
            </contextMenu:ContextMenu>
        </contextMenu:ContextMenuService.ContextMenu>
    </Grid>
</UserControl>
Seguramente, muchos de ustedes tienen algunos errores en tu archivo XAML, con el mensaje "No se pudo encontrar el espacio de nombre...". Para reparar estos errores debemos "Agregar Referencias" a los siguientes espacios de nombres:
  • System.Windows.Controls
  • System.Windows.Controls.Input.Toolkit

Por último, en la página MainPage.xaml.cs (Puedes presionar la tecla F7 para acceder directamente a la página de código) agregaremos las siguientes líneas de código:
private void MenuItem_Click(object sender, RoutedEventArgs e)
{
     //Mostrar un simple mensaje en la aplicación Silverlight     MessageBox.Show("Hiciste clic en el menú contextual 2!");
}

Puntos de interés

Recuerda que podemos crear menú contextuales realmente preciosos si manejamos algunos elementos XAML. Dicho lenguaje permite crear alternativas muy lindas para hacer fantásticas aplicaciones. Todo lo que debemos hacer es tomar nuestro Visual Studio y probar algunas funcionalidades disponibles dentro de éste. C# es un lenguaje potente pero podemos reemplazar algunas líneas de código con la adopción de XAML. Por supuesto, esto depende de ti.

Conclusión

Esto ha sido un pequeño tutorial acerca de menú contextual en Silverlight 5. Esta implementación es muy útil si necesitamos presentar alternativas a los usuarios que consumen nuestras aplicaciones. Es muy simple hacer clic derecho y tener acceso rápido a funcionalidades básicas para un determinado escenario.

Hey, we've just launched a new custom color Blogger template. You'll like it - https://t.co/quGl87I2PZ
Suscribíte al boletín