Algunas de las aplicaciones y utilidades más populares permiten modificar su apariencia usando skins o directamente rompen con el concepto clásico de ventana rectangular para cambiar su aspecto visual de manera que resulten más agradables a la vista y más fáciles de usar.

En este artículo vamos a ver una técnica que nos permitirá vestir los formularios de nuestras aplicaciones con bitmaps e incluso cambiar la vieja forma rectangular por otra que nos guste más, de modo que podemos definir bordes redondeados e incluso «agujeros» dentro de un formulario.

Empieza la función

La función SetFormShape() es la encargada de asignar la imagen en tiempo de ejecución y de calcular la transparencia y las dimensiones del formulario. Recibe los siguientes parámetros:

oForm: el formulario al que le queremos cambiar la apariencia.

oBitmap: un objeto TBitmap con la misma imagen que hemos asignado anteriormente a la propiedad oPicture del formulario.

nColor: el color que servirá para calcular la transparencia. En la primera captura de este artículo se puede observar que tiene un borde de color negro, por tanto, si establecemos el valor de nColor a clBlack, este color «desaparecerá» de la imagen en tiempo de ejecución.

Un proyecto de ejemplo

Lo primero será crear un nuevo proyecto y añadir un formulario al que le establecemos su propiedad nBorderStyle a bsNONE y le asignamos una imagen mediante su propiedad oPicture; de este modo será más sencillo distribuir los controles, puesto que la propia imagen nos servirá de guía para posicionarlos.

Luego de esto, añadimos los controles que necesitemos tal como hacemos normalmente en cualquier formulario de nuestras aplicaciones. En este ejemplo será un formulario típico de entrada a una aplicación.

Una vez completados los pasos anteriores, necesitamos informar al formulario de la apariencia que tendrá en tiempo de ejecución, así que tras terminar el diseño, seleccionamos su evento OnInitialize y escribimos el siguente código:

METHOD FormInitialize( oSender ) CLASS TForm1

   LOCAL oBitmap := TBitmap():New( "Login.bmp" )

   SetFormShape( Self, oBitmap, clBlack )

   oBitmap:Destroy()

RETURN Nil

Personalizar el formulario

Una vez que hemos terminado el diseño del formulario debemos decidir qué posibilidades le daremos al usuario para interactuar con él, esto es, moverlo con el ratón, permitirle cerrarlo con ESC, etc.

Si queremos que el usuario pueda desplazar el formulario con el ratón, necesitamos definir su evento OnLButtonDown y añadir el siguiente código:

METHOD FormLButtonDown( oSender, nKeyFlags, nPosX, nPosY ) CLASS TForm1

   PostMessage( ::Handle, WM_NCLBUTTONDOWN, HTCAPTION, 0 )

RETURN Nil

Del mismo modo, si permitimos que pueda cerrarlo con la tecla ESC:

METHOD FormKeyDown( oSender, nKey, nFlags ) CLASS TForm1

   IF nKey == VK_ESCAPE
      ::Close()
      RETURN 0
   ENDIF

RETURN Nil

Una vez que hemos terminado todo el diseño, ya podemos probarlo, así que compilamos y:

Se puede observar cómo el área negra de la imagen inicial ha desaparecido y ha sido reemplazada por una transparencia.

Notas

En próximas revisiones añadiré soporte para otros formatos de imágenes así como la posibilidad de establecer la imagen directamente desde del IDE, sin tener que usar el evento OnInitialize del formulario.

El ZIP testshape.zip incluye un test ya compilado con varios formularios de ejemplo y la librería FormShape.lib para enlazar con las aplicaciones.

Actualización

Añadida una captura de una aplicación utilizando los nuevos estilos de formularios:

Actualización II

Añadida otra captura.

Gracias a Bingen y a Juanjo por las capturas.