[Windows 8] Transiciones

Posted on


Artículo escrito por: Néstor Fernández.

Twitter: @xamlparaadeptos

PISTAS PARA EL USUARIO

Gracias a las animaciones es posible crear una interface muy agradable a la vista. Sin embargo, aun con la facilidad que proveen las clases Animation, darle vida a algunos eventos puede resultar en líneas y líneas de código.

Supongamos que estamos mostrando elementos en una lista y queremos que a medida que aparezcan nuevos elementos una pequeña animación los ubique en la interface, o que otra animación los retire porque ya no hacen parte de la lista de datos. Esto es bueno para el usuario porque los elementos no solo aparecen y desaparecen al instante sino que el usuario alcanza a notar una pista visual indicándole que algo está sucediendo y le es más fácil entenderlo. Sin embargo, nuevamente, el código para animar todo esto puede ser abrumador.

Para facilitarnos el trabajo y para que el usuario tenga una experiencia consistente a través de sus varias aplicaciones se incluyen las Transiciones. Estas son animaciones predefinidas que se encargan de realizar por nosotros el arduo trabajo de enviarle al usuario este tipo de pistas visuales. Un dato muy importante: Las Transiciones son animaciones que se activan automáticamente como respuesta a algunos eventos.

Los controles que heredan de UIElement cuentan con la propiedad "Transitions" del tipo "TransitionCollection". Todo lo que debemos hacer para que el control utilice una transición, o varias, es agregarla(s) a dicha colección, tan simple como eso.

EJEMPLO 1

Aquí se aplica la animación estándar de Metro cuando el botón aparece por primera vez (aparece suavemente), y cuando el botón sea eliminado de la interface se aplica otra animación (se disuelve y encoge levemente).

   1:  <Button x:Name="Boton01" Content="Hola que tal">
   2:    <Button.Transitions>
   3:      <TransitionCollection>
   4:        <AddDeleteThemeTransition />
   5:      </TransitionCollection>
   6:    </Button.Transitions>
   7:  </Button>

EJEMPLO 2

Los controles que muestran listas de datos, que heredan de ItemsControl, cuentan adicionalmente con la propiedad "ItemContainerTransitions" que también es del tipo "TransitionCollection". Las transiciones insertadas en esta colección se aplican a cada elemento elemento/control dentro de la lista de datos:

   1:  <GridView
   2:    x:Name="gv01">
   3:    <GridView.ItemContainerTransitions>
   4:      <TransitionCollection>
   5:        <AddDeleteThemeTransition />
   6:        <EntranceThemeTransition />
   7:        <RepositionThemeTransition />
   8:      </TransitionCollection>
   9:    </GridView.ItemContainerTransitions>
  10:  </GridView>

En este ejemplo se definen 4 transiciones que se aplicarán a cada elemento/control dentro del GridView.

  • AddDeleteThemeTransition: Se activa cuando un elemento se agrega o se elimina del control (o de la colección que alimenta).
  • EntranceThemeTransition: Se activa para todos los elementos dentro del control pero solo la primera vez que se presentan. La animación con la que aparecen los elementos se lanzan una tras otra pero no todas de forma simultánea.
  • RepositionThemeTransition: Cuando un elemento cambia de posición en la interface, porque se dio un proceso de re-posicionamiento (layout), el elemento se mueve hasta la nueva posición.
PARA SABER MÁS… Theme animations

Un comentario sobre “[Windows 8] Transiciones

    Resumen Post 2012 « Todo en ASP.NET escribió:
    12/19/2012 en 22:05

    […] [Windows 8] Transiciones […]

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s