[Xojo 2026r1] Renderizado personalizado de controles con DrawControlInLayoutEditor

A continuación encontrarás traducido al castellano el artículo escrito por William Yu y publicado originalmente en el Blog oficial de Xojo.

Una de las incorporaciones notables en Xojo 2026 Release 1 es el evento DrawControlInLayoutEditor disponible, ahora, para proyectos Desktop y iOS/Android; proporcionando así más posibilidades sobre el aspecto que tendrán tus controles en el editor de diseño.

Con esta característica podrás proporcionar dibujado personalizado para un control en el modo de diseño, haciendo que resulte más fácil visualizar tu interfaz de usuario sin que sea preciso ejecutar el proyecto.

Si esto te resulta familiar es porque trae a los proyectos Desktop y iOS/Android lo que ya era posible en los proyectos Web mediante WebSDKUIControl donde ya era posible, desde hace algún tiempo, el renderizado personalizado de controles.

Por qué importa

Anteriormente tus controles personalizados de Canvas aparecían como controles genéricos, haciendo que resultase más difícil “ver” el aspecto que tendrían en tiempo de ejecución. Ahora podrás:

• Renderizar una vista previa de tu control directamente en el editor de diseño.
• Mostrar un aspecto más dinámico basado en cambios de estado (propiedades).
• Lograr que sea más sencillo trabajar con controles personalizados en el modo de diseño.

Así funciona

En el caso de los proyectos Desktop, puedes crear una subclase de DesktopUIControl e implementar el evento DrawControlInLayoutEditor. Tu código de dibujado será ejecutado por el IDE cuando tenga que renderizar el control en el editor de diseño. En el caso de los proyectos iOS y Android, este evento está disponible para los controles basados en MobileUIControl.

👉 También puedes utilizar este evento directamente con los controles DesktopCanvas y MobileCanvas, de modo que puedas comenzar a dibujar en DrawControlInLayoutEditor sin necesidad de tener que crear una subclase previamente.

Este evento te proporciona la flexibilidad de dibujar lo que necesites: formas, texto o incluso una representación simplificada de un contenido determinado. Por ejemplo un control personalizado de reproducción de medios podría representar un botón de reproducción y una línea temporal, o un control de gráfica podría renderizar un gráfico de muestra.

Limitaciones XojoScript

Un detalle importante a tener en cuenta es que DrawControlInLayoutEditor funciona utilizando XojoScript. Esto permite al IDE ejecutar de forma segura tu código de dibujado en el modo de diseño; pero también significa que no podrás utilizar todo lo que esperarías poder emplear y que está disponible en Xojo, especialmente en lo relacionado con las API de Graphics.

En la práctica, las operaciones de dibujado más comunes como las formas, líneas y texto funcionan tal y como esperarías. Sin embargo, en algunos casos las llamadas gráficas utilizan APIs ligeramente diferentes, como pueda ser el caso de LinearGradientBrush.

👉 Del mismo modo, dado que el código se ejecuta como XojoScript, no podrás llamar a otros métodos desde el código disponible en el evento DrawControlInLayoutEditor. Para acceder a las propiedades de tu control, tendrás que utilizar los métodos ColorProperty, BooleanProperty, IntegerProperty, DoubleProperty, and StringProperty.

Mayor soporte de Graphics

En Xojo 2026r1 hemos ampliado las capacidades gráficas disponibles para DrawControlInLayoutEditor sobre lo que ya estaba previamente soportado en WebSDKUIControl. Entre ellas se encuentran las siguientes:

• LinearGradientBrush, PictureBrush, y ShadowBrush.
• LineDash, LineDashOffset, LineCap, LineJoin, y MiterLimit.
• Outline.
• Scale, Rotate, y Translate.
• SaveState, RestoreState.
• Constantes de Color (Red, Green, Blue, Yellow etc.)

Dado que XojoScript no soporta el tipo Pair, la API LinearGradientBrush se ha adaptado ligeramente:

Class LinearGradientBrush
 
  Sub Constructor()
 
  Sub AddStop(stop As Double, c As Color)
 
  Property StartPoint As Point
  Property EndPoint As Point
 
End Class

La principal diferencia se encuentra en el modo en cómo se crea la brocha y como son añadidos los puntos de parada sin la necesidad de emplear Pair. Con esta nueva API puedes convertir un gráfico básico en algo mucho más atractivo visualmente.

Desactivar esta característica

Si bien muchos preferirán utilizar el renderizado personalizado de sus controles personalizados, puede suponer un cuello de botella cuando un amplio número de controles renderizan su contenido. Si prefieres una experiencia que sea menos intensiva en el uso de los recursos disponibles, entonces podrás desactivar esta capacidad en Settings > Layout con sólo activar la opción Static Rendering.

Conclusión

Con DrawControlInLayoutEditor disponible ahora para los proyectos Desktop y Mobile puedes sacar provecho de las mismas ventajas que ya disfrutaban los proyectos Web. Asegúrate de probar el proyecto de ejemplo DrawControlInLayoutEditor, adaptado del disponible en el ejemplo WebSDK > CustomButton. Esperamos que disfrutes diseñando y previsualizando tus controles personalizados mediante el uso de este nuevo evento y, sí, ¡también funciona con las Librerías!