How to: Interactively Control a Clock

A Clock object's ClockController property enables you to interactively start, pause, resume, seek, advance the clock to its fill period, and stop the clock. Only the root clock of a timing tree can be interactively controlled.

Note

There are other ways to interactively control animations that don't require you to work directly with clocks: you can also use Storyboards. Storyboards are supported in both markup and code. For an example, see Animate a Property by Using a Storyboard or the Animation Overview.

In the following example, several buttons are used to interactively control an animation clock.

Example

/*
  This example shows how to interactively control
  a root clock.
*/
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 ClockControllerExample : Page
    {

        private AnimationClock myControllableClock;
        private Button seekButton;
        private TextBox seekAmountTextBox;
        private ListBox timeSeekOriginListBox;

        public ClockControllerExample()
        {
            StackPanel mainPanel = new StackPanel();

            // Create a rectangle to animate.
            Rectangle animatedRectangle = new Rectangle();
            animatedRectangle.Width = 100;
            animatedRectangle.Height = 100;
            animatedRectangle.Fill = Brushes.Orange;
            mainPanel.Children.Add(animatedRectangle);

            // Create a DoubleAnimation to
            // animate its width.
            DoubleAnimation widthAnimation =
                new DoubleAnimation(
                    100,
                    500,
                    new Duration(TimeSpan.FromSeconds(5)));

            // Create a clock from the animation.
            myControllableClock = widthAnimation.CreateClock();

            // Apply the clock to the rectangle's Width property.
            animatedRectangle.ApplyAnimationClock(
                Rectangle.WidthProperty, myControllableClock);
            myControllableClock.Controller.Stop();

            //
            // Create some buttons to control the clock.
            //

            // Create a button to begin the clock.
            Button beginButton = new Button();
            beginButton.Content = "Begin";
            beginButton.Click +=
                new RoutedEventHandler(beginButton_Clicked);
            mainPanel.Children.Add(beginButton);

            // Create a button to pause the clock.
            Button pauseButton = new Button();
            pauseButton.Content = "Pause";
            pauseButton.Click +=
                new RoutedEventHandler(pauseButton_Clicked);
            mainPanel.Children.Add(pauseButton);

            // Create a button to resume the clock.
            Button resumeButton = new Button();
            resumeButton.Content = "Resume";
            resumeButton.Click +=
                new RoutedEventHandler(resumeButton_Clicked);
            mainPanel.Children.Add(resumeButton);

            // Create a button to advance the clock to
            // its fill period.
            Button skipToFillButton = new Button();
            skipToFillButton.Content = "Skip to Fill";
            skipToFillButton.Click +=
                new RoutedEventHandler(skipToFillButton_Clicked);
            mainPanel.Children.Add(skipToFillButton);

            // Create a button to stop the clock.
            Button stopButton = new Button();
            stopButton.Content = "Stop";
            stopButton.Click +=
                new RoutedEventHandler(stopButton_Clicked);
            mainPanel.Children.Add(stopButton);

            //
            // Create some controls the enable the user to
            // seek the clock.
            //

            StackPanel seekDetailsPanel = new StackPanel();
            seekDetailsPanel.Margin = new Thickness(0,20,0,20);
            seekDetailsPanel.Orientation = Orientation.Horizontal;
            Label seekAmountLabel = new Label();
            seekAmountLabel.Content = "Seek amount:";
            seekDetailsPanel.Children.Add(seekAmountLabel);

            // Create a text box so that the user can
            // specify the amount by which to seek.
            seekAmountTextBox = new TextBox();
            seekAmountTextBox.Text = "0:0:1";
            seekAmountTextBox.VerticalAlignment = VerticalAlignment.Top;
            seekAmountTextBox.TextChanged +=
                new TextChangedEventHandler(seekAmountTextBox_TextChanged);
            seekDetailsPanel.Children.Add(seekAmountTextBox);

            Label timeSeekOriginLabel = new Label();
            timeSeekOriginLabel.Content = "Seek Origin:";
            seekDetailsPanel.Children.Add(timeSeekOriginLabel);

            // Create a ListBox so the user can
            // select whether the seek time is relative
            // to the clock's BeginTime or Duration.
            timeSeekOriginListBox = new ListBox();
            timeSeekOriginListBox.Items.Add("BeginTime");
            timeSeekOriginListBox.Items.Add("Duration");
            timeSeekOriginListBox.Padding = new Thickness(5);
            timeSeekOriginListBox.SelectedIndex = 0;
            seekDetailsPanel.Children.Add(timeSeekOriginListBox);

            // Create a button to seek the clock.
            seekButton = new Button();
            seekButton.Content = "Seek";
            seekButton.Click += new RoutedEventHandler(seekButton_Clicked);
            seekDetailsPanel.Children.Add(seekButton);
            mainPanel.Children.Add(seekDetailsPanel);

            this.Content = mainPanel;
        }

        // Starts the clock.
        private void beginButton_Clicked(object sender, RoutedEventArgs e)
        {
            myControllableClock.Controller.Begin();
        }

        // Pauses the clock.
        private void pauseButton_Clicked(object sender, RoutedEventArgs e)
        {
            myControllableClock.Controller.Pause();
        }

        // Resumes the clock.
        private void resumeButton_Clicked(object sender, RoutedEventArgs e)
        {
            myControllableClock.Controller.Resume();
        }

        // Adances the clock to its fill period.
        private void skipToFillButton_Clicked(object sender, RoutedEventArgs e)
        {
            myControllableClock.Controller.SkipToFill();
        }

        // Stops the clock.
        private void stopButton_Clicked(object sender, RoutedEventArgs e)
        {
            myControllableClock.Controller.Stop();
        }

        // Seeks the clock.
        private void seekButton_Clicked(object sender, RoutedEventArgs e)
        {

            try {

                // Obtain the seek amount from the seekAmountTextBox TextBox.
                TimeSpan seekAmount = TimeSpan.Parse(seekAmountTextBox.Text);

                // Determine the seek origin by reading the selected value
                // from the timeSeekOriginListBox ListBox.
                TimeSeekOrigin selectedOrigin =
                    (TimeSeekOrigin)Enum.Parse(typeof(TimeSeekOrigin),
                    (string)timeSeekOriginListBox.SelectedItem);

                // Seek to the specified location.
                myControllableClock.Controller.Seek(seekAmount, selectedOrigin);
            }catch(FormatException formatEx)
            {
                MessageBox.Show(seekAmountTextBox.Text
                    + " is not a valid TimeSpan. Please enter another value.");

                // Disable the seek button until the user enters another value.
                seekButton.IsEnabled = false;
            }
        }

        // Verifies that seekAmountTextBox has text content.
        // If there is no text, disable the seek button.
        private void seekAmountTextBox_TextChanged(object sender, TextChangedEventArgs e)
        {
            TextBox theTextBox = (TextBox)e.Source;
            if (theTextBox.Text == null || theTextBox.Text.Length < 1)
                seekButton.IsEnabled = false;
            else
                seekButton.IsEnabled = true;
        }
    }
}

'
'  This example shows how to interactively control 
'  a root clock.
'

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 ClockControllerExample
        Inherits Page

        Private ReadOnly myControllableClock As AnimationClock
        Private ReadOnly seekButton As Button
        Private ReadOnly seekAmountTextBox As TextBox
        Private ReadOnly timeSeekOriginListBox As ListBox

        Public Sub New()
            Dim mainPanel As New StackPanel()

            ' Create a rectangle to animate.
            Dim animatedRectangle As New Rectangle With {
                .Width = 100,
                .Height = 100,
                .Fill = Brushes.Orange
            }
            mainPanel.Children.Add(animatedRectangle)

            ' Create a DoubleAnimation to
            ' animate its width.
            Dim widthAnimation As New DoubleAnimation(100, 500, New Duration(TimeSpan.FromSeconds(5)))

            ' Create a clock from the animation.
            myControllableClock = widthAnimation.CreateClock()

            ' Apply the clock to the rectangle's Width property.
            animatedRectangle.ApplyAnimationClock(Rectangle.WidthProperty, myControllableClock)
            myControllableClock.Controller.Stop()

            '
            ' Create some buttons to control the clock.
            '

            ' Create a button to begin the clock.
            Dim beginButton As New Button With {
                .Content = "Begin"
            }
            AddHandler beginButton.Click, AddressOf beginButton_Clicked
            mainPanel.Children.Add(beginButton)

            ' Create a button to pause the clock. 
            Dim pauseButton As New Button With {
                .Content = "Pause"
            }
            AddHandler pauseButton.Click, AddressOf pauseButton_Clicked
            mainPanel.Children.Add(pauseButton)

            ' Create a button to resume the clock. 
            Dim resumeButton As New Button With {
                .Content = "Resume"
            }
            AddHandler resumeButton.Click, AddressOf resumeButton_Clicked
            mainPanel.Children.Add(resumeButton)

            ' Create a button to advance the clock to
            ' its fill period. 
            Dim skipToFillButton As New Button With {
                .Content = "Skip to Fill"
            }
            AddHandler skipToFillButton.Click, AddressOf skipToFillButton_Clicked
            mainPanel.Children.Add(skipToFillButton)

            ' Create a button to stop the clock.
            Dim stopButton As New Button With {
                .Content = "Stop"
            }
            AddHandler stopButton.Click, AddressOf stopButton_Clicked
            mainPanel.Children.Add(stopButton)

            '
            ' Create some controls the enable the user to
            ' seek the clock. 
            '

            Dim seekDetailsPanel As New StackPanel With {
                .Margin = New Thickness(0, 20, 0, 20),
                .Orientation = Orientation.Horizontal
            }
            Dim seekAmountLabel As New Label With {
                .Content = "Seek amount:"
            }
            seekDetailsPanel.Children.Add(seekAmountLabel)

            ' Create a text box so that the user can
            ' specify the amount by which to seek.
            seekAmountTextBox = New TextBox With {
                .Text = "0:0:1",
                .VerticalAlignment = VerticalAlignment.Top
            }
            AddHandler seekAmountTextBox.TextChanged, AddressOf seekAmountTextBox_TextChanged
            seekDetailsPanel.Children.Add(seekAmountTextBox)

            Dim timeSeekOriginLabel As New Label With {
                .Content = "Seek Origin:"
            }
            seekDetailsPanel.Children.Add(timeSeekOriginLabel)

            ' Create a ListBox so the user can
            ' select whether the seek time is relative
            ' to the clock's BeginTime or Duration.
            timeSeekOriginListBox = New ListBox()
            timeSeekOriginListBox.Items.Add("BeginTime")
            timeSeekOriginListBox.Items.Add("Duration")
            timeSeekOriginListBox.Padding = New Thickness(5)
            timeSeekOriginListBox.SelectedIndex = 0
            seekDetailsPanel.Children.Add(timeSeekOriginListBox)

            ' Create a button to seek the clock.
            seekButton = New Button With {
                .Content = "Seek"
            }
            AddHandler seekButton.Click, AddressOf seekButton_Clicked
            seekDetailsPanel.Children.Add(seekButton)
            mainPanel.Children.Add(seekDetailsPanel)

            Content = mainPanel
        End Sub

        ' Starts the clock.
        Private Sub beginButton_Clicked(sender As Object, e As RoutedEventArgs)
            myControllableClock.Controller.Begin()
        End Sub

        ' Pauses the clock.
        Private Sub pauseButton_Clicked(sender As Object, e As RoutedEventArgs)
            myControllableClock.Controller.Pause()
        End Sub

        ' Resumes the clock.
        Private Sub resumeButton_Clicked(sender As Object, e As RoutedEventArgs)
            myControllableClock.Controller.Resume()
        End Sub

        ' Adances the clock to its fill period.
        Private Sub skipToFillButton_Clicked(sender As Object, e As RoutedEventArgs)
            myControllableClock.Controller.SkipToFill()
        End Sub

        ' Stops the clock.
        Private Sub stopButton_Clicked(sender As Object, e As RoutedEventArgs)
            myControllableClock.Controller.Stop()
        End Sub

        ' Seeks the clock.
        Private Sub seekButton_Clicked(sender As Object, e As RoutedEventArgs)


            Try

                ' Obtain the seek amount from the seekAmountTextBox TextBox.
                Dim seekAmount As TimeSpan = TimeSpan.Parse(seekAmountTextBox.Text)

                ' Determine the seek origin by reading the selected value
                ' from the timeSeekOriginListBox ListBox.
                Dim selectedOrigin As TimeSeekOrigin = CType(System.Enum.Parse(GetType(TimeSeekOrigin), CStr(timeSeekOriginListBox.SelectedItem)), TimeSeekOrigin)

                ' Seek to the specified location.
                myControllableClock.Controller.Seek(seekAmount, selectedOrigin)

            Catch formatEx As FormatException
                MessageBox.Show(seekAmountTextBox.Text & " is not a valid TimeSpan. Please enter another value.")

                ' Disable the seek button until the user enters another value.
                seekButton.IsEnabled = False
            End Try
        End Sub

        ' Verifies that seekAmountTextBox has text content.
        ' If there is no text, disable the seek button.
        Private Sub seekAmountTextBox_TextChanged(sender As Object, e As TextChangedEventArgs)
            Dim theTextBox As TextBox = CType(e.Source, TextBox)
            If theTextBox.Text Is Nothing OrElse theTextBox.Text.Length < 1 Then
                seekButton.IsEnabled = False
            Else
                seekButton.IsEnabled = True
            End If


        End Sub

    End Class
End Namespace

See also

• Animate a Property by Using a Storyboard
• Animation Overview