En el siguiente ejemplo podremos ver cómo iniciamos una animación que se ha creado en nuestro proyecto de WPF desde el Expression Interactive Designer cuando un cierto evento ocurra.

Para ello abrimos el proyecto que tenemos creado con nuestra animación desde el Visual Studio. Si abrimos la solución del proyecto veremos al menos un fichero con extensión .xaml que por defecto se llama Window1.xaml, ahí encontramos el código del proyecto en XAML, sobre este fichero será sobre el que trabajaremos.

Lo que realizaremos en este sencillo ejemplo es cómo lanzar una pequeña animación cuando el evento de clikado de un botón se ejecute.

Si le echamos un vistazo al principio del fichero nombrado anteriormente veremos el código referente a la animación, dentro de las etiquetas <Window.Resources> y </Window.Resources> encontraremos ese código etiquetado con <Storyboard> como se puede ver a continuación:

<Window.Resources>

<Storyboard x:Key="MiLineaTiempo" d:StoryboardName="LineaTiempo1">

 <!--Aquí vendría todo el código que modifica el aspecto, forma, tamaño, etc de los componentes de la aplicación sobre los que la animación actua.-->

</Storyboard>

</Window.Resources>

La etiqueta Storyboard contiene la línea de tiempo que hemos creado con el Expression Interactive Designer y la cual queremos que se inicie cuando el evento de clikado de un determinado botón se ejecute.

Ahora necesitamos el botón sobre el que se provocará el evento, para ello añadimos un botón, bien desde la vista de diseño, arrastrando, o bien directamente sobre la vista XAML, el resultado será parecido a:

<Button Height="23" Margin="170,0,234.491525423729,188" Name="Miboton" VerticalAlignment="Bottom">

 

Pulsame

 

</Button>

 

Para terminar solo necesitamos añadir dentro de las etiquetas del boton un trigger que será el que lanzará esa linea de tiempo que realiza la animación cuando ocurra el evento del botón que le indiquemos :

 

<Button Height="23" Margin="170,0,234.491525423729,188" Name="Miboton" VerticalAlignment="Bottom">

Pulsame

<Button.Triggers>

 <EventTrigger RoutedEvent="Button.Click">

   <EventTrigger.Actions>

<BeginStoryboard x:Name="CualquierNombre"Storyboard="{DynamicResource MiLineaTiempo}"/>

   </EventTrigger.Actions>

 </EventTrigger>

</Button.Triggers>

</Button>

 

Importante indicar en la propiedad RoutedEvent  el evento que lanzará la animación y en la propiedad Storyboard el nombre de la línea de tiempo que se ejecutará.