EventTrigger directo en un control

Introducción:

En esta ocasión vamos a ver cómo efectuar una animación al producirse un evento en un control.

Esa animación se hará sobre el degradado de un botón, y veremos cómo aplicar a ese botón en concreto la animación o mejor dicho, el "trigger" o evento. De forma que cuando se produzca el evento que indiquemos, sea cuando se produzca esa animación... o lo que decidamos hacer, pero en este ejemplo, usaré una animación de tipo PointAnimation, ya que eso es lo que quiero hacer, cambiar los valores de StartPoint y EndPoint a los valores que se indique en el evento...

¡Que lío!

Mira, mejor lo ves y así te aclaras... que ya a la hora que es (04.43) no si ni lo que escribo

 

Este es el código que hará lo que te comento:

<Button Name="Button3" Grid.Column="3" Grid.Row="4" Margin="4,4,4,4">
<Button.Background>
    <LinearGradientBrush StartPoint="1,1" EndPoint="0,1" x:Name="btn3Background">
      <GradientStop Color="sc#1, 0.25, 0.5, 1" Offset="0" />
      <GradientStop Color="sc#1, 0.85, 0.85, 0.95" Offset="0.35" />
      <GradientStop Color="sc#1, 0.85, 0.85, 0.95" Offset="0.65" />
      <GradientStop Color="sc#1, 0.45, 0.85, 0.35" Offset="1" />
    </LinearGradientBrush>
</Button.Background>
<Button.Triggers>
  <EventTrigger RoutedEvent="Button.MouseEnter">    
    <BeginStoryboard>
      <Storyboard>
        <PointAnimation 
          Storyboard.TargetName="btn3Background"
          Storyboard.TargetProperty="StartPoint"
          From="0,1" To="1,1" Duration="0:0:1" />
        <PointAnimation 
          Storyboard.TargetName="btn3Background"
          Storyboard.TargetProperty="EndPoint"
          From="1,0" To="0,1" Duration="0:0:1" />
      </Storyboard>
    </BeginStoryboard>
  </EventTrigger>
</Button.Triggers>
Botón 3</Button>

El tema es que tengo definido el LinearGradientBrush para el fondo del botón, los valores de StartPoint y EndPoint iniciales, harán que el botón se vea como te muestro en la figura 1:

Figura 1. El botón con el degradado inicial

Cuando se produzca el evento que hay en el elemento <EventTrigger, en este caso cuando el ratón entre en el botón (MouseEnter), empezará la película, y lo que dice el guión de esa película es que se inicien dos animaciones del tipo PointAnimation, que es la que nos interesa, ya que lo que queremos animar son valores que tienen la misma estructura que un punto: N1, N2.

Al primer PointAnimation le digo que debe animar la propiedad StartPoint de btn3Background que no es otra cosa que el nombre que le he dado al LinearGradientBrush de ese botón, es decir, el nombre del fondo del botón.

Al segundo PointAnimation le digo que anime la propiedad EndPoint de ese mismo degradado, así, al animarse los dos valores de inicio y final, pues es posible que se consiga algo.

Como en todas las animaciones, hay que indicar los valores de inicio y término con From y To respectivamente, además de decirle cuanto tiempo quieres que dure esa animación.

Aunque no es lo mismo verlo como imagen estática que viendo el efecto en movimiento (tampoco es que sea nada del otro mundo), en la figura 2 tienes una captura mientras estaba "animándose".

Figura 2. Durante la animación

 

Y esto es todo.

Sí, ya se que puede parecer poca cosa, pero... es que me estoy haciendo una especie de "chuletario" de cosas que quiero encontrar más o menos de forma rápida... porque como uno no tiene la costumbre de estar todo el día con estas cosas de las animaciones, los degradados y esas "monadas" de las aplicaciones para .NET Framework 3.0 (WinFX, WPF, Avalon o como prefieras llamarlo), además de que mi memoria ya no es lo que era, pues... eso mismo... sí, se que lo puedo tener en otros sitios apuntado, pero... así a ti también te vale, je, je.

 

Nos vemos.
Guillermo