Xojo + XAML + Goto = 🔥

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

Durante décadas la instrucción Goto ha sido demonizada y como algo a evitar a toda costa. Sin embargo hay excepciones, y tal y como ocurre con la mayoría de las reglas. El Goto del que estoy hablando en este artículo es una de dichas excepciones… y, literalmente, encenderá tu app hablando desde un punto de vista de la programación.

Una de las joyas en Xojo 2025r3 es el soporte de las transiciones XAML, lo que posibilita la incorporación de animaciones sencillas en tu IU sin tener que escribir código adicional para ello. En vez de esto, sólo has de definir estados visuales en XAML y dejar que el motor de XAML se encargue de gestionar la animación por ti.

1. En una capa superior, el flujo de trabajo tendrá el siguiente aspecto:
2. Define uno o más VisualStates en XAML.
3. Asocia las transiciones a dichos estados (por ejemplo, moviendo o desvaneciendo un elemento).
4. Desde el código de Xojo, cambia entre los estados mediante Invoke(“GotoState”,…).

💡 Truco Pro

DesktopXAMLContainer se suscribe a Operator_Lookup, de modo que no tengas que llamar directamente a Invoke. En vez de escribir XAMLContainer1.Invoke(“GotoState”, “WhichState”), sólo has de llamar XAMLContainer1.GotoState(“WhichState”).

Estados Visuales en XAML

Un VisualState representa una configuración dada de propiedades en la IU. Cuando hagas una transición de un estado a otro, XAML puede animar automáticamente el cambio.

A continuación se muestra un ejemplo sencillo que anima el emoji de fuego 🔥 hacia arriba, de un modo similar a como se mueve la llama de una vela.

Ejemplo XAML

Este ejemplo utiliza un TextBlock para mostrar el emoji de fuego y anima su posición vertical con un TranslateTransform. Advierte que los estados visuales han de estar definidos en un control, de modo que lo asociaremos a un UserControl, permitiendo así que participe en las transiciones GotoState.

<UserControl>
  <Grid>
    <VisualStateManager.VisualStateGroups>
      <VisualStateGroup Name="FlameStates">

        <VisualState Name="Bottom">
          <Storyboard>
            <DoubleAnimation
              Storyboard.TargetName="FlameTransform"
              Storyboard.TargetProperty="Y"
              To="40"
              Duration="0:0:1" />
          </Storyboard>
        </VisualState>

        <VisualState Name="Top">
          <Storyboard>
            <DoubleAnimation
              Storyboard.TargetName="FlameTransform"
              Storyboard.TargetProperty="Y"
              To="-100"
              Duration="0:0:1" />
          </Storyboard>
        </VisualState>

      </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

    <TextBlock
      Text="🔥"
      FontSize="32"
      HorizontalAlignment="Center"
      VerticalAlignment="Bottom">

      <TextBlock.RenderTransform>
        <TranslateTransform Name="FlameTransform" />
      </TextBlock.RenderTransform>

    </TextBlock>
  </Grid>
</UserControl>

En este XAML:

• El VisualStateGroup con el nombre FlameStates contiene dos estados:
  • Bottom – Mueve el emoji hacia abajo.
  • Top – Mueve el emoji hacia arriba.
• DoubleAnimation se encarga de la propiedad Y correspondiente a TranslateTransform.
• La duración de la transición es gestionada completamente por XAML.

Ejecutar la transición desde Xojo

Una vez están definidos los estados visuales, el cambio entre ellos resulta realmente sencillo desde Xojo. Si asumimos que XAML está contenido en un XAMLContainer con el nombre XAMLContainer1, entonces podrás ejecutar la animación con:

XAMLContainer1.GotoState("Top")

Y para moverlo hacia abajo:

XAMLContainer1.GotoState("Bottom")

¿Por qué es potente?

Lo que hace de esta característica especialmente útil es lo siguiente:

• La lógica de la animación permanece en XAML, a la que pertenece naturalmente.
• El código Xojo permanece limpio y declarativo; sólo indica a la IU de qué estado ha de encargarse.
• Pueden realizarse efectos más complejos sin necesidad de cambiar el código Xojo (opacidad, escalado, rotación, funciones de transición).

He aquí una variación más interesante, donde las llamas se desplazan hacia arriba en vez de moverse en línea recta:

<UserControl>
  <Grid Width="160" Height="240">
 
    <!-- Fire emoji 1 -->
    <TextBlock Name="Fire1"
           Text="🔥"
           FontSize="32"
           VerticalAlignment="Bottom"
           HorizontalAlignment="Center">
      <TextBlock.RenderTransform>
        <TranslateTransform Name="Move1"/>
      </TextBlock.RenderTransform>
    </TextBlock>
 
    <!-- Fire emoji 2 -->
    <TextBlock Name="Fire2"
           Text="🔥"
           FontSize="26"
           VerticalAlignment="Bottom"
           HorizontalAlignment="Center"
           Margin="20,0,0,0"
           Opacity="0.8">
      <TextBlock.RenderTransform>
        <TranslateTransform Name="Move2"/>
      </TextBlock.RenderTransform>
    </TextBlock>
 
    <!-- Fire emoji 3 -->
    <TextBlock Name="Fire3"
           Text="🔥"
           FontSize="22"
           VerticalAlignment="Bottom"
           HorizontalAlignment="Center"
           Margin="-20,0,0,0"
           Opacity="0.7">
      <TextBlock.RenderTransform>
        <TranslateTransform Name="Move3"/>
      </TextBlock.RenderTransform>
    </TextBlock>
 
    <VisualStateManager.VisualStateGroups>
      <VisualStateGroup Name="FireStates">
 
        <VisualState Name="Off"/>
 
        <VisualState Name="On">
          <Storyboard RepeatBehavior="Forever">
 
            <!-- Fire 1 -->
            <DoubleAnimation Storyboard.TargetName="Move1"
                     Storyboard.TargetProperty="Y"
                     From="0"
                     To="-180"
                     Duration="0:0:1.2"/>
 
            <DoubleAnimation Storyboard.TargetName="Move1"
                     Storyboard.TargetProperty="X"
                     From="0"
                     To="10"
                     Duration="0:0:0.6"
                     AutoReverse="True"/>
 
            <!-- Fire 2 -->
            <DoubleAnimation Storyboard.TargetName="Move2"
                     Storyboard.TargetProperty="Y"
                     From="0"
                     To="-160"
                     Duration="0:0:1.0"
                     BeginTime="0:0:0.3"/>
 
            <DoubleAnimation Storyboard.TargetName="Move2"
                     Storyboard.TargetProperty="X"
                     From="0"
                     To="-12"
                     Duration="0:0:0.5"
                     AutoReverse="True"/>
 
            <!-- Fire 3 -->
            <DoubleAnimation Storyboard.TargetName="Move3"
                     Storyboard.TargetProperty="Y"
                     From="0"
                     To="-140"
                     Duration="0:0:1.4"
                     BeginTime="0:0:0.15"/>
 
            <DoubleAnimation Storyboard.TargetName="Move3"
                     Storyboard.TargetProperty="X"
                     From="0"
                     To="8"
                     Duration="0:0:0.7"
                     AutoReverse="True"/>
 
          </Storyboard>
        </VisualState>
 
      </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
 
  </Grid>
</UserControl>

Para encender las llamas simplemente invocaremos el estado “On”:

XAMLContainer1.GotoState("On")

Para pequeños pulidos de la IU, como indicadores animados, resaltes, o bien efectos divertidos como el de esta vela, las transiciones XAML proporcionan una nueva y potente herramienta en Xojo.