[2023r2] Cómo hacer más con DesktopXAMLContainer

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

Con la introducción de DesktopXAMLContainer puedes modernizar poco a poco tus apps Windows, o bien complementar tu actual interfaz de usuario con controles WinUI adicionales. En este tutorial te mostraré cómo puedes hacer más con XAML.

Lograr más con los diseños

Si bien es cierto que puedes añadir un único control WinUI a un DesktopXAMLContainer, también puedes agregar controles sobre el container para mejorar las cosas. XAML hace que sea posible personalizar el diseño de tus controles usando un lenguaje de marcas, en vez de tener que posicionar tus controles (uno a uno) en la ventana y ajustar su posición manualmente. Pongamos por ejemplo un grupo de botones que quieres disponer verticalmente en la ventana. Si bien puedes situar los tres botones de forma independiente en el diseño, también puedes realizarlo utilizando un único DesktopXAMLContainer con el diseño StackPanel.

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

Sin tener que arrastrar o soltar, puedes reconfigurar este diseño para que sea horizontal:

<StackPanel Orientation="Horizontal">
  <Button Content="Button 1"/>
  <Button Content="Button 2"
           Margin="10,0,0,0"/>
  <Button Content="Button 3"
           Margin="10,0,0,0"/>
</StackPanel>

Manejar Eventos

En el caso de un simple botón WinUI en un DesktopXAMLContainer, la gestión de eventos consiste en una mera comprobación en el manejador EventTriggered para el eventName “Click”. Con múltiples botones en un DesktopXAMLContainer queremos proporcionar un nombre a cada uno de ellos de modo que podamos determinar sobre qué botón se ha hecho clic.

<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>

Puedes inspeccionar el Diccionario de parámetros para ver qué otras claves están disponibles para un particular control y evento. Todos los controles tendrán como mínimo tres claves básicas: el nombre completo cualificado de Clase XAML para el control, el Nombre y la propiedad Tag adicional. Algunos controles tendrán claves adicionales en el diccionario. Por ejemplo, el control CheckBox XAML dispara el evento ValueChanged con una clave IsChecked disponible en su diccionario de parámetros. Los nombres específicos de estas claves están disponibles en el Selector de Ventana de Control XAML.

Lograr más con el Código

Existirán instancias en las que querrás configurar los controles de forma dinámica mediante código. Hemos documentado todas las propiedades/métodos disponibles soportados por cada control XAML en la Ventana Selector de Control XAML. Es posible acceder a estas propiedades y métodos mediante los métodos Value e Invoke de DesktopXAMLContainer. Veamos un sencillo ejemplo con un botón. Si bien podrías configurarlo usando solamente código XAML, hay casos en los que querrás cambiar sólo la etiqueta del Botón mediante código. Para ello puedes utilizar el método Value:

XAMLContainer1.Value("Content") = "My new caption"

De igual modo, podrías hacerlo utilizando simplemente código XAML:

XAMLContainer1.Content = "<Button Content='My new caption'/>"

Si tienes múltiples Botones en tu DesktopXAMLContainer (como es el caso en nuestro anterior ejemplo de StackPanel), puedes referenciar el control utilizando el espacio de nombre totalmente cualificado:

XAMLContainer1.Value("Button2.Content") = "My new caption"

De igual modo, si quisieras saber cuál es la etiqueta de Button3, entonces podrías usar Value para obtenerlo:

myCaption = XAMLContainer1.Value("Button3.Content")

Algunas propiedades/métodos soportan código XAML embebido

Si echas un vistazo a la propiedad Content de Button, lo hemos documentado añadiendo una anotación sobre su soporte de código XAML. Esto significa que puedes insertar código XAML en vez de simplemente una cadena de texto. De modo que si quisieras embeber un ProgressRing en un Button, entonces podrías hacerlo utilizando la propiedad Content:

XAMLContainer1.Value("Content") = "<ProgressRing />"

Este sería el código XAML equivalente:

<Button>
  <ProgressRing />
</Button>

¿Qué es este nombre de espacio WinUI?

Habrás observado que algunos controles, añadidos mediante la Ventana de Selección de Control XAML, utiliza el nombre de espacio winui cuando inspeccionas su contenido. Estos controles en concretos están utilizando un aspecto de interfaz de usuario más moderno. Consulta https://learn.microsoft.com/en-us/uwp/api/microsoft.ui.xaml.controls

Algunos controles ofrecen el equivalente de estilo más antiguo; consulta https://learn.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls

Uno de estos controles es el ProgressRing. Si utilizas el prefijo winui con dicho control obtendrás el aspecto moderno, mientras que la anterior iteración puede utilizarse cuando no se utiliza el prefijo.

<winui:ProgressRing />

<ProgressRing />

Bindings Personalizados

Xojo soporta una nueva sintaxis de marcas llamada {XojoBinding} específicamente para ayudar con la reutilización de controles XAML. Actualmente sólo hace binding de la capa de diseño/IDE, pero puede resultar útil como propósito de reutilización. Como en este ejemplo donde puedes personalizar el aspecto de un Botón cambiando algunas propiedades en el Inspector.

Para configurarlo tendrás que crear una subclase de DesktopXAMLContainer y añadir las propiedades que desees exponer en el Inspector.

Luego tendrás que añadir las llamadas {XojoBinding} necesarias en el Content de tu XAML:

La sintaxis para el binding de una propiedad XAML se escribe como:

{XojoBinding [nombre de la propiedad de la clase]}

Y en este caso se está haciendo binding de la propiedad Caption que hemos añadido y expuesto mediante el Inspector Behavior, sobre el Content del Button XAML.

Esto significa que un cambio en la propiedad Caption en el Inspector actualizará ahora el código XAML para reflejar dicho cambio y actualizar el diseño en consonancia.

Para sacar más provecho del DesktopXAMLContainer, asegúrate de comprobar los proyectos de Ejemplo incluidos con la última versión de Xojo.