Interfaces de Usuario con XAML

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

Si estás creando interfaces de usuario escalables, fáciles de mantener y enriquecidas para Windows, entonces XAML es la mejor opción. Su sintaxis declarativa y limpia, así como la separación entre el diseño y el código, hacen que todo resulte más sencillo de gestionar; y dado a que está fuertemente integrado en el sistema Windows UI, realmente contribuye a que tu app pase de mostrar un aspecto básico a realmente pulido.

Migrar a XAML

Estamos actualizando de forma selectiva y lenta nuestra UI de Win32 a la más moderna WinUI con la ayuda de XAML. Advertirás algunas actualizaciones incrementales en Xojo 2025r2 en este sentido cuando selecciones el ajuste de compilación WinUI (Experimental).

Para aquellos que no puedan esperar a nuestras actualizaciones de IU Wind32 o necesiten utilizar unos diseños XAML más avanzados ya mismo, entonces DesktopXAMLContainer proporciona una solución potente y flexible con posibilidades virtualmente ilimitadas.

Como recordatorio rápido, echa un vistazo al artículo publicado en su día cuando se introdujo el control DesktopXAMLContainer por primera vez.

Un vistazo más a fondo de XAML

Si bien los anteriores artículos mostraban el potencial en el uso de DesktopXAMLContainer, aun queda mucho más por explorar cuando se trata de utilizar y comprender con eficacia XAML en Xojo.

XAML es Asíncrono

Comprender que XAML funciona de forma asíncrona ayuda a explicar el por qué cuando se define o recupera una propiedad puede que no se obtengan los resultados esperados, especialmente cuando el control no ha terminado de inicializarse por completo. Para detectar con mayor eficacia si el control XAML está listo para su uso, emplea el evento EventTriggered y comprueba si eventName es “Loaded”. Esto resulta particularmente importante cuando se trabaja con diseños complejos en los que se incluyen controles XAML que contienen, a su vez, contenido XAML embebido.

Debido a la naturaleza asíncrona en el renderizado de un control XAML, el mecanismo DrawInto también precisa una mejora. En el caso de DesktopXAMLContainer, hemos añadido una variante asíncrona: DrawIntoAsync, la cual renderiza el control y devuelve un Picture mediante el método de llamada proporcionado.

Sub RenderXAMLPreview(container As DesktopXAMLContainer, targetCanvas As DesktopCanvas)
  // Pass the canvas as the user data so we know where to draw
  container.DrawIntoAsync(AddressOf XAMLDrawComplete, targetCanvas)
End Sub
 
Sub XAMLDrawComplete(image As Picture, data As Variant)
  If image <> Nil And data IsA DesktopCanvas Then
    DesktopCanvas(data).Backdrop = image
  End If
End Sub

Trasladando tu Experiencia XAML

Rotar y escalar un diseño XAML es tan simple como aplicar el RenderTransform apropiado. En el siguiente ejemplo, estamos rotando un CheckBox XAML en el evento Timer.Action. Si bien todo el contenido XAML se actualiza en cada intervalo del temporizador, el resultado es suave y fluido demostrando lo bien que XAML gestiona los cambios visuales.

Sub Timer1.Action()
  Static angle As Integer = 0
 
  angle = angle + 10
 
  If angle >= 360 Then angle = 0
 
  Var isChecked As Boolean = True
 
  If XAMLContainer1.Content <> "" Then isChecked = XAMLContainer1.Value("CheckBox.IsChecked")
 
  Var xaml As String = "" + _
	"" + _
	"" + _
	"" + _
	"" + _
	"" + _
	""
 
  XAMLContainer1.Content = xaml
End Sub

Los controles Hijo heredan la Brocha de fondo del Padre

Cuando se embebe un DesktopXAMLContainer Transparente sobre otro, el hijo heredará la brocha de fondo del padre. Esto es útil para brochas básicas, pero ten en cuenta que no soporta las brochas acrílicas y que no ajustará automáticamente los desplazamientos en las brochas de degradado lineal.

XAML en Capas

Los controles WinUI y Win32 se renderizan en capas separadas. El contenido WinUI se compone en primer lugar y luego los controles Win32 se renderizan sobre ellos. Como resultado, cualquier control Win32 aparecerá siempre sobre el contenido WinUI salvo que definas directamente el padre de un control DesktopXAMLContainer a un control Win32.

Definir el Foco para controles XAML embebidos

A partir de Xojo 2025r2 puedes definir el foco sobre un control concreto en tu diseño XAML. Así es como funciona:

<StackPanel Orientation="Vertical">
  <Button Name="Button1" Content="Button 1"/>
  <Button Name="Button2" Content="Button 2"
           Margin="0,10,0,0"/>
  <Button Name="Button3" Content="Button 3"
           Margin="0,10,0,0"/>
</StackPanel>

Este diseño utiliza un StackPanel con tres botones dispuestos verticalmente en un DesktopXAMLContainer. Para definir el foco en Button2, deberás de invocar Button2.SetFocus:

XAMLContainer1.Invoke("Button2.SetFocus")

Ampliando las Características de XAML

Como se mencionaba en un anterior artículo, hemos ampliado XAML con una nueva sintaxis de marcado única en Xojo. El principal objetivo de esta extensión es mejorar la reutilización de los controles XAML. Por ejemplo, pongamos por caso un diseño que contiene tres botones XAML diferentes:

El acto de actualizar la etiqueta o bien cambiar el color del botón requeriría ediciones manuales en la cadena de contenido XAML. ¿No sería más conveniente si dichas propiedades estuviesen disponibles directamente en el Inspector? Con una subclase personalizada y algunos ajustes en el comportamiento del Inspector, así como la sintaxis específica de Xojo (XojoBinding), puedes hacerlo.

En primer lugar, crea una subclase de DesktopXAMLContainer (podemos llamarla XAMLButton), y añade las propiedades que quieras exponer en el Inspector.

Modificaremos el contenido XAML para que use la nueva sintaxis {XojoBinding}, la cual sustituirá de forma dinámica el texto de marcador de posición con el valor correspondiente de la propiedad del inspector, basándose para ello en su nombre.

Ahora sólo tendrás que arrastrar la subclase de tu control y ajustar sus propiedades directamente en el Inspector sin necesidad de editar manualmente el contenido XAML.

Asegúrate de comprobar nuestro proyecto de ejemplo XAML Subclasses para ver otras posibilidades.

Divirtiéndonos con XAML

Con una mejor comprensión de XAML y cómo se integra en Xojo, ya estás listo para crear interfaces de usuario basadas en XAML en Windows. De hecho, nuestro IDE ya utiliza XAML en varias áreas, como la pantalla de inicio, el diálogo de selección para controles XAML y la barra de herramientas en la ventana de documentación. Las posibilidades con XAML son realmente amplias, así que te animamos a que las explores y descubras lo que puede hacer por tí.