Inténtelo: crear una ventana no rectangular

En las aplicaciones de Microsoft Expression Blend, es posible que desee crear una ventana que tenga una apariencia visual no rectangular en tiempo de ejecución. Algunos de los ejemplos más comunes son los applets de escritorio, los widgets y los reproductores multimedia. Para crear ventanas no rectangulares, debe cambiar algunas propiedades del elemento Window en la aplicación y, a continuación, crear un método de control de eventos que permita mover la ventana sin necesidad de una barra de título.

Convertir en transparente una ventana no rectangular

1. Cree un nuevo documento de ventana llamado Window1.xaml; para ello, haga clic en Nuevo elemento en el menú Archivo. En la ventana Agregar nuevo elemento, asegúrese de que la casilla Incluir archivo de código esté activada para generar el archivo de código subyacente correspondiente para Window1.xaml.

2. En Objetosyescala de tiempo en el panel Interacción, seleccione el elemento Window y, en Apariencia en el panel Propiedades, cambie la propiedad WindowStyle a None para quitar el shell de la ventana (la barra de título). Presione F5 para ver la apariencia de la ventana sin el shell predeterminado. Observe que los botones Minimizar, Maximizar, Restaurar y Cerrar estándar ya no están a la vista. Observe también que ya no puede arrastrar la ventana. Presione Alt+F4 para cerrar la ventana.

   [!NOTA]

   Para obtener información acerca de las demás opciones de WindowStyle, vea "WindowStyle" en el tema de información general sobre ventanas de Windows Presentation Foundation (puede estar en inglés) en MSDN.

3. En Apariencia, en el panel Propiedades, active la casilla de verificación AllowsTransparency. Observe que el borde de la ventana ya no está visible.

4. Para agregar la transparencia a la ventana, establezca la propiedad Background del elemento Window en Sin pincel en la categoría Pinceles del panel Propiedades. Como alternativa, si desea que el usuario pueda hacer clic en el área invisible de la ventana, puede establecer la propiedad Background en Pincel de color sólido y, a continuación, establecer la propiedad Alpha del pincel de fondo en 1. De esta forma se mantiene el área interactiva de la ventana a la vez que se convierte en invisible.

5. Por último, en Objetos y escala de tiempo, haga doble clic en LayoutRoot para habilitar el elemento y agregue otros elementos del cuadro de herramientas a la mesa de trabajo. Para crear varios efectos, establezca un pincel OpacityMask en un elemento (para obtener información acerca de cómo hacer esto, vea Crear una máscara de opacidad). Además, puede agregar formas y guías dibujadas con herramientas de dibujo como la Elipse y la Pluma y, a continuación, mover los elementos detrás de los demás (haga clic con el botón secundario en un elemento y, a continuación, haga clic en Ordenar). El contenido de LayoutRoot definirá de forma eficaz el contorno de la aplicación.

6. Presione F5 de nuevo para ver la apariencia de la ventana ahora. Observe que aún no puede arrastrar la ventana. Presione Alt+F4 para cerrar la ventana.

Agregar código para poder arrastrar la ventana en tiempo de ejecución

Después de hacer transparente la ventana, perderá la capacidad de desplazar la ventana sin una barra de título. Para poder mover la ventana de nuevo, debe agregar un controlador de eventos a la ventana y, a continuación, agregar una pequeña cantidad de código al archivo de código subyacente relacionado.

1. Para guardar el proyecto en el disco duro, haga clic en Guardar todo en el menú Archivo. (No se pueden agregar métodos de control de eventos a proyectos que no se han guardado.)

2. Con el elemento Window seleccionado en Objetos y escala de tiempo, haga clic en el botón Eventos del panel Propiedades.

3. Junto a MouseLeftButtonDown, escriba OnMouseLeftButtonDown y, a continuación, presione la tecla ENTRAR.

   • Si tiene instalado Microsoft Visual Studio 2008 Standard Edition o una versión posterior, el código del controlador de eventos que se genera después de presionar la tecla ENTRAR se agregará automáticamente al archivo de código subyacente (Window1.xaml.cs) y éste se abrirá para modificarlo en Visual Studio.

   • Si no tiene instalado Visual Studio, el código del método de control de eventos se copiará en el Portapapeles para que pueda pegarlo en el archivo de código subyacente. Para abrir el archivo de código subyacente, haga doble clic en él en el panel Proyecto. Pegue el código del método de control de eventos generado en el archivo de código subyacente justo antes de la penúltima llave de cierre (si el archivo de código subyacente usa C#) o justo antes de la instrucción End Class (si el archivo de código subyacente usa VB.NET).

     [!NOTA]

     Si no puede abrir el archivo de código subyacente haciendo doble clic en él en el panel Proyecto de Expression Blend, es posible que no exista una aplicación asociada con la extensión del archivo de código subyacente (.cs o .vb) y, por tanto, Windows no sabe cómo abrir el archivo. Para obtener información acerca de cómo asociar archivos .cs y .vb con un editor como el Bloc de notas, vea Editar un archivo de código subyacente.

4. Modifique el método de control de eventos generado en el archivo de código subyacente de modo que el controlador de eventos sea similar al siguiente:

   private void OnMouseLeftButtonDown(object sender,
            System.Windows.Input.MouseButtonEventArgs e)
   {
     this.DragMove();
   }
   

   Private Sub OnMouseLeftButtonDown(ByVal sender As System.Object,
            ByVal e As System.Windows.Input.MouseButtonEventArgs)
     Me.DragMove()
   End Sub
   

5. Presione F5 para ejecutar la aplicación.

6. Puede agregar métodos de control de eventos adicionales, como un método para el evento Click de un botón que llame al método Close() en el archivo de código subyacente. Para obtener más información acerca de cómo crear métodos de control de eventos, vea Información general sobre el control de eventos.