Cómo crear un Botón Personalizado en Xojo, parte 5: Añadir Alineación de Texto

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

En nuestra anterior entrega ya nos encargamos de trabajar con el foco del control sobre nuestra subclase de DesktopCanvas, haciendo que resultase accesible y amigable para el usuario.

Ahora nos encargaremos de implementar otra característica clave: personalizar la alineación del texto. Al finalizar este tutorial podrás definir la alineación del texto del botón a la izquierda, centrado o derecha, y también añadiremos algo de margen para que el texto no llegue a los bordes cuando esté centrado. Este enfoque utiliza una enumeración fija para asegurar que sólo se acepten los valores de alineación válidos, manteniendo así la calidad en nuestro control personalizado.

1. Definir las opciones de alineación para el texto

Para que la propiedad de alineación sea fácil de usar, y de tipado seguro, definiremos una nueva enumeración en la clase CanvasButton.

Con la clase CanvasButton seleccionada, dirígete a Insert > Enumeration y añade los siguientes valores:

• Left = 0
• Center = 1
• Right = 2

2. Añadir nuevas propiedades de Alineación y Margen

A continuación necesitamos dos propiedades en la clase CanvasButton para almacenar los valores de alineación y de margen.

La propiedad TextAlignment utilizará nuestra enumeración TextAlign y tomará como valor por omisión TextAlign.Center.

La propiedad TextPadding proporciona un margen interior ajustable, lo cual resulta de especial importancia para las alineaciones izquierda y derecha.

Public Property TextAlignment As TextAlign = TextAlign.Center
Public Property TextPadding As Integer = 8

3. Actualizar el Método Paint

El núcleo de este cambio sucede en el evento Paint. Necesitamos modificar la lógica que calcula la posición horizontal del texto (tx) con respecto al valor de nuestra nueva propiedad TextAlignment.

Ubica el evento Paint y sustituye el código actual con el siguiente:

Sub Paint(g As Graphics, areas() As Rect) Handles Paint
  #Pragma unused areas
  
  // Usa la propiedad personalizada CornerRadius.
  Var currentCornerRadius As Integer = CornerRadius
  
  // Declara las variables para los colores usados en el dibujado.
  Var currentBgColor As Color
  Var currentBorderColor As Color
  Var currentTextColor As Color
  
  // Determina los colores en función del estado actual del botón (activado, pulsado, o con el apuntador sobre él).
  If Enabled Then
    If IsPressed Then
      // Usa el color de destacado cuando está pulsado.
      currentBgColor = HighlightColor
      currentBorderColor = BorderColor
      currentTextColor = TextColor
    ElseIf IsHovered Then // comprueba sólo si el apuntador está sobre él y no pulsado
      // Usa el color hover si es el caso.
      currentBgColor = HoverColor
      currentBorderColor = BorderColor
      currentTextColor = TextColor
    Else
      // Usa el color personalizado de fondo para el estado por omisión.
      currentBgColor = BackgroundColor
      currentBorderColor = BorderColor
      currentTextColor = TextColor
    End If
  Else
    // Usa los colores del sistema o el gris estándar para el estado de desactivado.
    currentBgColor = Color.LightGray
    currentBorderColor = Color.Gray
    currentTextColor = Color.DisabledTextColor // Usa el color del sistema para el color de desactivado en el texto
  End If
  
  // Define el color de dibujado y dibuja la forma del fondo con bordes redondeados.
  g.DrawingColor = currentBgColor
  g.FillRoundRectangle(0, 0, g.Width, g.Height, currentCornerRadius, currentCornerRadius)
  
  // Define el color de dibujado y el tamaño del lápiz para el bode.
  g.DrawingColor = currentBorderColor
  g.PenSize = 2
  // Dibuja el borde dentro del rectángulo de fondo.
  g.DrawRoundRectangle(0, 0, g.Width, g.Height, currentCornerRadius, currentCornerRadius)
  
  // Dibuja el anillo de foco
  If IsFocused And AllowFocusRing Then
    g.DrawingColor = Color.HighlightColor
    g.PenSize = 1
    g.DrawRoundRectangle(2, 2, g.Width-4, g.Height-4, CornerRadius-2, CornerRadius-2)
  End If
  
  // Activa el suavizado para el dibujado 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.
  // Actualizado: calcula X basándose en la propiedad TextAlignment (Left, Center, Right), mientras que se preserva el comportamiento de centrado como valor por omisión.
  Var tx As Double
  Select Case TextAlignment
  Case TextAlign.Left
    tx = TextPadding
  Case TextAlign.Right
    tx = g.Width - tw - TextPadding
  Case TextAlign.Center
    tx = (g.Width - tw) / 2
  End Select
  // Calcula la posición Y para centrar el texto verticalmente con un pequeño ajuste.
  Var ty As Double = (g.Height + th) / 2 - 3
  // Define el color de dibujado para el texto.
  g.DrawingColor = currentTextColor
  // Dibuja el texto del botón en la posición calculada.
  g.DrawText(ButtonText, tx, ty)
End Sub

4. Integración con el Inspector

Si quieres que la alineación sea accesible con facilidad en el Inspector de Xojo, deberás de exponer las propiedades TextAlignment y TextPadding. En el caso de TextAlignment, dado que utiliza una Enumeración, Xojo mostrará automáticamente un menú desplegable con los valores Left, Center y Right, una vez que dicha propiedad se muestre en el Panel Inspector.

• Haz clic con el botón derecho sobre la clase CanvasButton en el Navegador de Proyecto.
• Selecciona la opción “Inspector Behavior…”
• Desplázate por el listado de propiedades y activa las casillas de verificación correspondientes a TextAlignment y TextPadding.

¡Probando!

Ahora puedes definir la alineación del texto directamente mediante código o mediante el Panel Inspector.

Por ejemplo, para definir la alineación en código:

// Define la alineación del texto a la derecha para el botón
MyCanvasButton.TextAlignment = CanvasButton.TextAlign.Right

Dado que el valor por omisión para TextAlignment es Center, no hay necesidad de modificar el código y todos tus botones personalizados continuarán funcionando tal cual con el texto centrado.

Confío en que esta actualización resulte de utilidad.

Puedes obtener el proyecto de ejemplo desde el repositorio de GitHub – CanvasButton.