Create an interactive animation using XAML and the Storyboard : Storyboard « Windows Presentation Foundation « VB.Net Tutorial

1. VB.Net Tutorial
2. Windows Presentation Foundation
3. Storyboard

<Window x:Class="WpfApplication1.CombineTransformAnimation"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Animating Combine Transforms" Height="320" Width="300">
  <Window.Resources>
    <Style TargetType="{x:Type Button}">
      <Setter Property="HorizontalAlignment" Value="Center" />
      <Setter Property="RenderTransformOrigin" Value="0.5,0.5" />
      <Setter Property="Margin" Value="10" />
      <Setter Property="Width" Value="80" />
      <Setter Property="Height" Value="40" />
      <Setter Property="RenderTransform">
        <Setter.Value>
          <TransformGroup>
            <ScaleTransform />
            <SkewTransform />
            <RotateTransform />
          </TransformGroup>
        </Setter.Value>
      </Setter>
      <Style.Triggers>
        <EventTrigger RoutedEvent="Button.MouseEnter">
          <EventTrigger.Actions>
            <BeginStoryboard Name="StoryboardBegin">
              <Storyboard>
                <DoubleAnimation
                  Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX"
                  To="1.5" Duration="0:0:1" RepeatBehavior="1x" />
                <DoubleAnimation
                  Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY"
                  To="1.5" Duration="0:0:1" RepeatBehavior="1x" />
                <DoubleAnimation
                  Storyboard.TargetProperty="RenderTransform.Children[1].AngleX"
                  To="30" Duration="0:0:1" RepeatBehavior="1x" />
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger.Actions>
        </EventTrigger>
        <EventTrigger RoutedEvent="Rectangle.MouseLeave">
          <EventTrigger.Actions>
            <BeginStoryboard>
              <Storyboard>
                <DoubleAnimation
                  Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX"
                  Duration="0:0:0.5" />
                <DoubleAnimation
                  Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY"
                  Duration="0:0:0.5" />
                <DoubleAnimation
                  Storyboard.TargetProperty="RenderTransform.Children[1].AngleX"
                  Duration="0:0:0.5" />
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger.Actions>
        </EventTrigger>
      </Style.Triggers>
    </Style>
  </Window.Resources>
  <StackPanel Margin="20" HorizontalAlignment="Center">
    <Button Click="btn1_Click" x:Name="btn1">Button1</Button>
    <Button Click="btn2_Click" x:Name="btn2">Button2</Button>
    <Button Click="btnClose_Click">Close</Button>
    <TextBlock Name="tb1" Margin="5,40,5,5" />
  </StackPanel>
</Window>

//File:Window.xaml.vb

Imports System
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Input
Imports System.Windows.Media
Imports System.Windows.Shapes


Namespace WpfApplication1
  Public Partial Class CombineTransformAnimation
    Inherits Window
    Public Sub New()
      InitializeComponent()
    End Sub

    Private Sub btn1_Click(sender As Object, e As RoutedEventArgs)
      tb1.Text = "You are clicking on " + btn1.Content
    End Sub

    Private Sub btn2_Click(sender As Object, e As RoutedEventArgs)
      tb1.Text = "You are clicking on " + btn2.Content
    End Sub


    Private Sub btnClose_Click(sender As Object, e As RoutedEventArgs)
      Me.Close()
    End Sub
  End Class
End Namespace

16.113.Storyboard
	16.113.1.	Targeting named elements
	16.113.2.	Write StoryBoard for Animating Width from one value to another with duration and RepeatBehavior
	16.113.3.	Limit the Frame Rate of a Storyboard
	16.113.4.	Animation RepeatBehavior Forever
	16.113.5.	Object Loading Event Trigger Event
	16.113.6.	Define Animation Trigger and StoredBoard for Ellipse
	16.113.7.	Time based RepeatBehaviour
	16.113.8.	Two color animations
	16.113.9.	Create an animation using the storyboard
	16.113.10.	Storyboard for Animating Color
	16.113.11.	Remove Animations with Storyboard
	16.113.12.	Storyboard: A child with a fill period
	16.113.13.	Use Button to pause an animation with PauseStoryboard
	16.113.14.	Use Button to resume an Animation with ResumeStoryboard
	16.113.15.	Use Button to skip an Animation with SkipStoryboardToFill
	16.113.16.	Use Button to stop an Animation with StopStoryboard
	16.113.17.	Stop, resume animation with Storyboard
	16.113.18.	Start and stop an Animation with Button actions
	16.113.19.	Create an interactive animation using XAML and the Storyboard