Formularios con estilo

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.

shape1.jpg

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.

shape2.jpg

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:

shape3.JPG

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:

shape4.JPG

Actualización II

Añadida otra captura.

shape5.PNG

Gracias a Bingen y a Juanjo por las capturas.

6 comentarios en “Formularios con estilo

  1. Pipeco

    Es muy interesante los post que tienes en este blog, pero podrias alimentarlos con videos.

    Todavia habemos usuarios con poca experiencia.

    Felicidades.

    Responder
  2. PEDRO DE LEON RODAS

    Exelente aporte.

    La libreria la puedo usar en cualquier proyecto sin costo o hay que comprar licencia de esta exelente libreria ?

    gracias.

    Responder
  3. Pingback: xailer.info (esp) » Actualización de Xatris

  4. gregori gonzalez

    hola, soy nuevo en el uso de xailer, pero quise descargar la librería y no es posible, si pudieras enviármela a mi correo con el ejemplo que hiciste seria de gran ayuda. De ante mano gracias-

    Responder

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *