Compartir a través de


Inténtelo: crear una ventana no rectangular

This page applies to WPF projects only

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. En el panel Objetosyescala de tiempo, 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.

  2. En Apariencia, en el panel Propiedades, active la casilla de verificación 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 elemento Window en Sin pincelCc295119.706bbd5c-c0e0-43a1-9604-297f019d0275(ES-ES,Expression.30).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.30).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 elemento y agregar elementos del panel Herramientas a la mesa de trabajo. Puede crear varios efectos estableciendo un pincel OpacityMask en un elemento.

    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.30).png y PlumaCc295119.894f8612-e0ed-4e00-84cf-a9bc8f38fc54(ES-ES,Expression.30).png, y situar después los elementos detrás de otros elementos (haga clic con el botón secundario en un elemento 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 elemento Window seleccionado en el panel Objetos y escala de tiempo, haga clic en EventosCc295119.6c67bb3b-e8a2-4a63-bad5-54d5c15b04dd(ES-ES,Expression.30).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.