Was this page helpful?
Your feedback about this content is important. Let us know what you think.
Additional feedback?
1500 characters remaining
Export (0) Print
Expand All

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.

NoteNote:

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 How to: 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.

/*
  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;


        }

    }
}

Community Additions

ADD
Show:
© 2015 Microsoft