Interactively Control a Clock
Collapse the table of content
Expand the table of content

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.


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.

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

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

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

			' Create a rectangle to animate.
			Dim animatedRectangle As New Rectangle()
			animatedRectangle.Width = 100
			animatedRectangle.Height = 100
			animatedRectangle.Fill = Brushes.Orange

			' 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)

			' Create some buttons to control the clock.

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

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

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

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

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

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

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

			' 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
			AddHandler seekAmountTextBox.TextChanged, AddressOf seekAmountTextBox_TextChanged

			Dim timeSeekOriginLabel As New Label()
			timeSeekOriginLabel.Content = "Seek Origin:"

			' 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.Padding = New Thickness(5)
			timeSeekOriginListBox.SelectedIndex = 0

			' Create a button to seek the clock.
			seekButton = New Button()
			seekButton.Content = "Seek"
			AddHandler seekButton.Click, AddressOf seekButton_Clicked

			Me.Content = mainPanel
		End Sub

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

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

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

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

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

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


				' 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(ByVal sender As Object, ByVal 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
				seekButton.IsEnabled = True
			End If

		End Sub

	End Class
End Namespace
© 2016 Microsoft