Compartir a través de


Inténtelo: crear una ventana no rectangular

Esta página es específica de proyectos WPF

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 objeto Window en la aplicación y, a continuación, crear un método de controlador de eventos que permita mover la ventana sin necesidad de una barra de título.

Convertir en transparente una ventana no rectangular

  1. En el panel Objetosyescala de tiempo, seleccione el objeto 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 estándar Minimizar, Maximizar, Restaurar y Cerrar 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 Información general sobre ventanas de WPF Cc295119.xtlink_newWindow(es-es,Expression.40).png en MSDN Cc295119.xtlink_newWindow(es-es,Expression.40).png.

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

  3. Para agregar la transparencia a la ventana, establezca la propiedad Background del objeto Window en Sin pincelCc295119.706bbd5c-c0e0-43a1-9604-297f019d0275(es-es,Expression.40).png 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ólidoCc295119.3a66ec96-47bb-47fc-8876-6b9456feec3a(es-es,Expression.40).png 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.

  4. Por último, en el panel Objetos y escala de tiempo, haga clic en LayoutRoot para habilitar el objeto y agregar objetos del panel Herramientas a la mesa de trabajo. Para crear diversos efectos, establezca un pincel OpacityMask en un objeto.

    Para obtener más información sobre cómo hacer esto, vea Crear una máscara de opacidad.

    También puede agregar formas y trazados dibujados con herramientas de dibujo como ElipseCc295119.8938cfdf-9b75-4a33-bc88-b0636e114a0d(es-es,Expression.40).png y PlumaCc295119.894f8612-e0ed-4e00-84cf-a9bc8f38fc54(es-es,Expression.40).png, y mover después los objetos detrás de otros objetos (haga clic con el botón secundario en un objeto y haga clic en Ordenar). El contenido de LayoutRoot definirá de forma eficaz el contorno de la aplicación.

  5. 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 objeto Window seleccionado en el panel Objetos y escala de tiempo, haga clic en Eventos Cc295119.6c67bb3b-e8a2-4a63-bad5-54d5c15b04dd(es-es,Expression.40).png en el panel Propiedades.

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

  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 Escribir código que responda a eventos.

Copyright © 2011 de Microsoft Corporation. Reservados todos los derechos.