Vanguarsoft Developers blog

Ing. Javier Leal – Coordinador de Requerimientos en Traetelo.com / Traiter Lourted – VENEZUELA

Llamar StoryBoard desde XAML (Behavior), Silverlihgt

1 comentario

Hola amigos amantes de las tecnologías, les traigo un tema bien sencillo, quizá muchos se han topado con esta idea, de querer que un StoryBoard se ejecute pero hacerlo directamente desde XAML y no tener que haces la animación y luego ir al código y hacer el código Animacion.Begin();

Pues para información de muchos que están iniciando con Silverligth existen los llamados Behavior su puedes crear tu animación y aplicarla a cualquier objeto que tu desees, para seguir los pasos creamos un nuevo proyecto, agregamos un rectángulo, y creamos dos StoryBoard con TargeType Rectángulo, trabajamos directamente desde Expression Blend 4. Estas son las dos animaciones tomando en cuento que mi x:Name de mi rectángulo es valga la redundancia rectangle.
<Storyboard x:Key="Animacion">
     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Rectangle.RadiusX)" Storyboard.TargetName="rectangle">
          <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
          <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="23.5"/>
     </DoubleAnimationUsingKeyFrames>
     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Rectangle.RadiusY)" Storyboard.TargetName="rectangle">
          <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
          <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="23.5"/>
     </DoubleAnimationUsingKeyFrames>
     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="rectangle">
          <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
          <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="-41.833"/>
          <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="32.808"/>
          <EasingDoubleKeyFrame KeyTime="0:0:1" Value="-0.131"/>
     </DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Animacion2">
     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Rectangle.RadiusX)" Storyboard.TargetName="rectangle">
          <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
          <EasingDoubleKeyFrame KeyTime="0:0:1" Value="125.5"/>
     </DoubleAnimationUsingKeyFrames>
     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Rectangle.RadiusY)" Storyboard.TargetName="rectangle">
          <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
          <EasingDoubleKeyFrame KeyTime="0:0:1" Value="125.5"/>
     </DoubleAnimationUsingKeyFrames>
     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="rectangle">
          <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
          <EasingDoubleKeyFrame KeyTime="0:0:1" Value="90.089"/>
     </DoubleAnimationUsingKeyFrames>
     <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle">
          <EasingColorKeyFrame KeyTime="0" Value="Blue"/>
          <EasingColorKeyFrame KeyTime="0:0:1" Value="#FF03FF41"/>
     </ColorAnimationUsingKeyFrames>
</Storyboard>

Estas animaciones las realice con blend ustedes pueden crear las suyas personalizadas la idea es que tengas dos en base a los ejemplos que les mostrare, para que las animaciones no se muestren al iniciar la aplicación quita este codigo del XAML.

<UserControl.Triggers>
     <EventTrigger RoutedEvent="FrameworkElement.Loaded">
          <BeginStoryboard Storyboard="{StaticResource Animacion}"/>
          <BeginStoryboard Storyboard="{StaticResource Animacion2}"/>
     </EventTrigger>
</UserControl.Triggers>

Seleccionando el Rectangulo se van a ir a la pestaña Assets o activo de Expression Blend y se van a Bihavior o comportamiento y eligen el ControlStoryBoardAction y lo arrastran hasta el Rectangulo.

clip_image002

Una vez que lo agreges verán que se ha agregado el siguiente codigo dentro del rectángulo

<i:Interaction.Triggers>
     <i:EventTrigger EventName="MouseLeftButtonDown">
          <ei:ControlStoryboardAction/>
     </i:EventTrigger>
</i:Interaction.Triggers>

Si selecciones el controlStoryboardAction y vas a propiedades pordras elegir que evento deseas integrar al event Trigger ubicado en el rectangulo y que StoryBoar quieres que se ejecute.

clip_image004

Ya con esto se ejecutara el evento al presionar el botón pero eso no es todo podemos agregar un nuevo event Triger Adjunto dentro del mismo.

Presionamos el botón new en estas propiedades y pueden ver una lista de diferentes Behavior Adjuntos.

clip_image006

este caso usar el StoryBoardCompletedTrigger para que se ejecute una animación al completarse otra.

clip_image008

Para lograr esto solo seleccionamos la animación que queremos que nos capture el evento complete de la misma es decir que ya la animación culmino, y la animación que queremos se ejecute a lo que se complete la otra las propiedades quedarías como lo ven en la imagen anterior y este seria el código XAML Obviamente ya elimino el Behavior anterior y agrego el complete,

<Rectangle Fill="Blue" Margin="159,153,193,176" Stroke="Black">
     <i:Interaction.Triggers>
          <ei:StoryboardCompletedTrigger Storyboard="{StaticResource Animacion}">
               <ei:ControlStoryboardAction Storyboard="{StaticResource Animacion2}"/>
          </ei:StoryboardCompletedTrigger>
     </i:Interaction.Triggers>
     <Rectangle.RenderTransform>
          <CompositeTransform/>
     </Rectangle.RenderTransform>
</Rectangle>

Para promarlo agreguen Un botón y agreguen un ControlStoryBoardAction para ejecuta la primera animación.

<Button Content="Button" Height="56" Margin="227,41,269,0" VerticalAlignment="Top">
     <i:Interaction.Triggers>
          <i:EventTrigger EventName="Click">
               <ei:ControlStoryboardAction Storyboard="{StaticResource Animacion}"/>
          </i:EventTrigger>
     </i:Interaction.Triggers>
</Button>

clip_image010

 

Anuncios

Autor: Ing. Javier J. Leal H.

Coordinador de Requerimientos en Traetelo.com, Trainer en Lourted, Amantes de nuevas Tecnologías Desarrollador es .NET, Windows 10, Influenciador y Orador en Actividades Tecnológicas Microsoft.

Un pensamiento en “Llamar StoryBoard desde XAML (Behavior), Silverlihgt

  1. Pingback: Agenda de la Comunidad « MSExpertos

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