Crear una ventana no rectangular

En algunos casos en la aplicación Microsoft® Expression Blend™, es posible que desee crear una ventana que tenga la apariencia visual de una forma no rectangular en tiempo de ejecución. Los ejemplos más habituales de esto se pueden ver en subprogramas de escritorio, widgets y reproductores multimedia. Para crear ventanas no rectangulares, debe cambiar algunas propiedades del elemento Window en la aplicación y, después, crear un método de control de eventos que permita mover la ventana sin necesidad de una barra de título.

Convertir una ventana no rectangular en transparente

  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 un archivo de código subyacente coincidente con Window1.xaml.
  2. En Objetos y escala de tiempo, en el panel Interacción, seleccione el elemento Window y, a continuación, en la categoría Apariencia del panel Propiedades, cambie la propiedad WindowStyle a None para quitar el shell de ventana (la barra de título). Presione F5 para ver el aspecto que tiene la ventana sin el shell predeterminado. Observe que los botones estándar Minimizar, Maximizar, Restaurar o Cerrar ya no están visibles. Observe también que ya no puede arrastrar la ventana.
    Presione Alt+F4 para cerrar la ventana.
    Nota Para obtener más información acerca de otras opciones de WindowStyle, vea WindowStyle en el tema "Introducción a las ventanas de Windows Presentation Foundation" en MSDN (puede estar en inglés)
  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. También, 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. Esto mantiene el área interactiva de la ventana mientras que hace el área invisible.
  5. Por último, en Objetos y escala de tiempo, haga doble clic en LayoutRoot para activar el elemento y agregue otros elementos del cuadro de herramientas en el área de diseño. Puede crear varios efectos estableciendo un pincel OpacityMask en un elemento. (Para obtener más información, vea Crear una mascara de opacidad.) También puede agregar formas y trazados dibujados mediante herramientas de dibujo como la Elipse Herramienta Elipse y la Pluma Herramienta Pluma y, después, mover los elementos detrás de otros elementos (haciendo clic con el botón secundario en un elemento y seleccionando Ordenar). El contenido de LayoutRoot definirá eficazmente el contorno de la aplicación.
  6. Vuelva a presionar F5 para ver el aspecto que tiene ahora la ventana. 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 que la ventana se pueda mover de nuevo, tendrá que agregar un controlador de eventos a la ventana y, a continuación, agregar una pequeña cantidad de código en el archivo de código subyacente relacionado.

  1. Guarde el proyecto en el disco duro haciendo 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 en el panel Propiedades.
  3. Al lado de MouseLeftButtonDown, escriba "OnMouseLeftButtonDown" y, a continuación, presione la tecla ENTRAR.
    • Si tiene instalado Microsoft® Visual Studio® 2005 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. Abra el archivo de código subyacente haciendo 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 inmediatamente antes de la penúltima llave cerrada (si el archivo de código subyacente usa C#) o inmediatamente 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 más información acerca de la asociación de archivos .cs y .vb a un editor como Bloc de notas, vea Editar un archivo de código subyacente.
  4. Agregue el siguiente código (en rojo) al método de control de eventos generado en al archivo de código subyacente para que el controlador de eventos tenga este aspecto:
    • Para C# 
      private void OnMouseLeftButtonDown(object sender, 
		System.Windows.Input.MouseButtonEventArgs e)
{
  this.DragMove();
}
    • Para Visual Basic .NET 
      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.

Puede agregar métodos de control de eventos adicionales, como un método para el evento Click de un botón que llamará al método Close() en el archivo de código subyacente. Para obtener más información acerca de la creación de métodos de control de eventos, vea Control de eventos.