How to: Animate a Property by Using an AnimationClock

This example shows how to use Clock objects to animate a property.

There are three ways to animate a dependency property:

Storyboard objects and the BeginAnimation method enable you to animate properties without directly creating and distributing clocks (for examples, see Animate a Property by Using a Storyboard and Animate a Property Without Using a Storyboard); clocks are created and distributed for you automatically.

Example

The following example shows how to create an AnimationClock and apply it to two similar properties.

/*
    This example shows how to create and apply
    an AnimationClock.
*/

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Shapes;
using System.Windows.Media.Animation;


namespace Microsoft.Samples.Animation.TimingBehaviors
{
    public class AnimationClockExample : Page
    {
    
        ScaleTransform myScaleTransform;
        
        public AnimationClockExample()
        {
            
            this.WindowTitle = "Opacity Animation Example";
            this.Background = Brushes.White;
            StackPanel myStackPanel = new StackPanel();
            myStackPanel.Margin = new Thickness(20);
            
            // Create a button that with a ScaleTransform.
            // The ScaleTransform will animate when the
            // button is clicked.
            Button myButton = new Button();
            myButton.Margin = new Thickness(50);
            myButton.HorizontalAlignment = HorizontalAlignment.Left;
            myButton.Content = "Click Me";           
            myScaleTransform = new ScaleTransform(1,1);
            myButton.RenderTransform = myScaleTransform;
            
            
            // Associate an event handler with the
            // button's Click event.
            myButton.Click += new RoutedEventHandler(myButton_Clicked);
            
            myStackPanel.Children.Add(myButton);
            this.Content = myStackPanel;
        }
        
        // Create and apply and animation when the button is clicked.
        private void myButton_Clicked(object sender, RoutedEventArgs e)
        {

            // Create a DoubleAnimation to animate the
            // ScaleTransform.
            DoubleAnimation myAnimation = 
                new DoubleAnimation(
                    1, // "From" value
                    5, // "To" value 
                    new Duration(TimeSpan.FromSeconds(5))
                );
            myAnimation.AutoReverse = true;
            
            // Create a clock the for the animation.
            AnimationClock myClock = myAnimation.CreateClock();            
        
            // Associate the clock the ScaleX and
            // ScaleY properties of the button's
            // ScaleTransform.
            myScaleTransform.ApplyAnimationClock(
                ScaleTransform.ScaleXProperty, myClock);
            myScaleTransform.ApplyAnimationClock(
                ScaleTransform.ScaleYProperty, myClock);
        }
    }
}
'
'    This example shows how to create and apply
'    an AnimationClock.
'


Imports System
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Media
Imports System.Windows.Shapes
Imports System.Windows.Media.Animation


Namespace Microsoft.Samples.Animation.TimingBehaviors
	Public Class AnimationClockExample
		Inherits Page

		Private myScaleTransform As ScaleTransform

		Public Sub New()

			Me.WindowTitle = "Opacity Animation Example"
			Me.Background = Brushes.White
			Dim myStackPanel As New StackPanel()
			myStackPanel.Margin = New Thickness(20)

			' Create a button that with a ScaleTransform.
			' The ScaleTransform will animate when the
			' button is clicked.
			Dim myButton As New Button()
			myButton.Margin = New Thickness(50)
			myButton.HorizontalAlignment = HorizontalAlignment.Left
			myButton.Content = "Click Me"
			myScaleTransform = New ScaleTransform(1,1)
			myButton.RenderTransform = myScaleTransform


			' Associate an event handler with the
			' button's Click event.
			AddHandler myButton.Click, AddressOf myButton_Clicked

			myStackPanel.Children.Add(myButton)
			Me.Content = myStackPanel
		End Sub

		' Create and apply and animation when the button is clicked.
		Private Sub myButton_Clicked(ByVal sender As Object, ByVal e As RoutedEventArgs)

			' Create a DoubleAnimation to animate the
			' ScaleTransform.
			Dim myAnimation As New DoubleAnimation(1, 5, New Duration(TimeSpan.FromSeconds(5))) ' "To" value -  "From" value
			myAnimation.AutoReverse = True

			' Create a clock the for the animation.
			Dim myClock As AnimationClock = myAnimation.CreateClock()

			' Associate the clock the ScaleX and
			' ScaleY properties of the button's
			' ScaleTransform.
			myScaleTransform.ApplyAnimationClock(ScaleTransform.ScaleXProperty, myClock)
			myScaleTransform.ApplyAnimationClock(ScaleTransform.ScaleYProperty, myClock)
		End Sub
	End Class
End Namespace

For an example showing how to interactively control a Clock after it starts, see Interactively Control a Clock.

See Also

Animate a Property by Using a Storyboard
Animate a Property Without Using a Storyboard
Property Animation Techniques Overview