Tutorial: Crear un Control personalizado de Botón en Xojo

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

Este tutorial muestra como crear un control personalizado de botón en Xojo usando para ello la clase DesktopCanvas. En dicho tutorial se cubre la definición de propiedades, la gestión de eventos del ratón para una retroalimentación visual, y el dibujado del control en el evento Paint.

Puedes obtener más información sobre la clase DesktopCanvas en la Documentación de Xojo.

¡Comencemos!

Añadir una clase Personalizada

• Añade una nueva Clase en el Navegador de proyecto.
• Cambia su nombre a CanvasButton.
• Define su Super a DesktopCanvas.

Añade las siguientes propiedades en la nueva subclase:

• ButtonText As String. Define el ámbito (Scope) a Public, y la propiedad Default Value a “Click Me”. Para que dicha propiedad sea visible en el Panel Inspector, accede al menú contextual sobre la clase CanvasButton en el Navegador de Proyecto y selecciona la opción “Inspector Behaviour…” Ubica la propiedad en el listado y activa la casilla de verificación asociada.
• IsHovered As Boolean. Define su ámbito a Private, y su Default Value a False.
• IsPressed As Boolean. Define su ámbito a Private, y su Default Value a False.

Define el Evento personalizado Pressed

• Selecciona Insert > Event Definition.
• Nombra el evento como Pressed. Este es el evento que se invocará cuando se haga clic sobre el botón.

Añade Manejadores de Evento

• Selecciona la clase CanvasButton en el Navegador de Proyecto.
• Selecciona Insert > Event Handler. Añade los siguientes manejadores de evento y pega el código correspondiente en cada uno de ellos:

MouseDown(x As Integer, y As Integer)

// Define el estado interno que indica que se está pulsando el botón.
IsPressed = True
// Actualiza el control para mostrar visualmente el estado de pulsado.
Me.Refresh(False)
// Devuelve True para indicar que se ha gestionado este evento.
Return True

MouseEnter

// Define el estado interno para mostrar que el apuntador del ratón está sobre el botón.
IsHovered = True
// Actualiza el control para mostrar visualmente el estado de apuntador sobre el botón.
Me.Refresh(False)

MouseExit

// Define el estado interno que indica que el apuntador del ratón ya no está sobre el control.
IsHovered = False
// Actualiza el control para revertir el estado de apuntador de cursor sobre el control.
Me.Refresh(False)

MouseUp(x As Integer, y As Integer)

// Comprueba si el botón se ha pulsado y si el apuntador del ratón aun está sobre él.
If IsPressed And IsHovered Then
   // Si es así, efectivamente se ha hecho click sobre el botón, de forma que se invoca el evento Pressed.
  RaiseEvent Pressed
End If
// Resetea el estado de pulsado independientemente de que se haya gestionado su pulsación con éxito.
IsPressed = False
// Actualiza el control para revertir su estado de pulsado.
Me.Refresh(False)

Paint(g As Graphics, areas() As Rect)

// Radio de las esquinas para la forma del botón.
Static CornerRadius As Integer = 4
 
 // Declara las variables para los colores usados en el dibujado.
Var bgColor As Color
Var borderColor As Color = Color.DarkBevelColor
Var TextColor As Color = Color.LightTingeColor
 
 // Determina el color de fondo, basado en el estado actual del botón.
If IsPressed Or IsHovered Then
  // Utiliza un color de resaltado si está pulsado o si el apuntador del está sobre él.
  bgColor = Color.HighlightColor
Else
  // Usa el color de acento del tema para el estado por omisión.
  bgColor = Color.AccentThemeColor
End If
 
// Define el color de dibujado y dibuja la forma de fondo con esquinas redondeadas.
g.DrawingColor = bgColor
g.FillRoundRectangle(0, 0, g.Width, g.Height, CornerRadius, CornerRadius)
 
// Define el color de dibujado y el tamaño de lápiz para el borde.
g.DrawingColor = borderColor
g.PenSize = 2
// Dibuja la forma dle borde dentro del rectángulo de fondo.
g.DrawRoundRectangle(1, 1, g.Width-2, g.Height-2, CornerRadius, CornerRadius)
 
// Activa el antialias para obtener un renderizado más suave del texto.
g.AntiAliasMode = Graphics.AntiAliasModes.HighQuality
g.AntiAliased = True
// Calcula el ancho y altura para el texto del botón.
Var tw As Double = g.TextWidth(ButtonText)
Var th As Double = g.TextHeight
// Calcula la posición X para centrar horizontalmente el texto.
Var tx As Double = (g.Width - tw) / 2
 // Calcula la posición Y para centrar verticalmente el texto, con un pequeño ajuste.
Var ty As Double = (g.Height + th) / 2 - 3
// Define el color para el texto.
g.DrawingColor = TextColor
// Dibuja el texto del botón en la posición calculada.
g.DrawText(ButtonText, tx, ty)

Usando el Control Personalizado

• Abre Window1.
• Arrastra la clase CanvasButton desde el Navegador de Proyecto sobre la ventana.

Gestionar el Evento Clic

• Haz doble clic sobre la instancia de CanvasButton en el Editor de Diseño correspondiente a la ventana.
• Añade el manejador de evento Pressed.
• Añade la siguiente línea de código en el manejador: MessageBox(“Custom Button Clicked!”).

Ejecutar el Proyecto

Ejecuta el proyecto. Comprueba el desplazamiento del cursor del ratón sobre el botón, y hacer clic sobre él para ver la retroalimentación visual y la ejecución del evento Pressed.

Y tan simple como esto… ¡has creado tu propio botón personalizado! Espero que te hayas divertido siguiendo este tutorial. Mantente atento sobre los siguientes tutoriales, tomaremos este botón como base ¡y le añadiremos algunas actualizaciones sorprendentes!