Pausing an animation in XAML

Question

5.00/5 (1 vote)

See more:

Hi,

I have an animation that fades in and fades out a control on my View. I initiate the animations by setting boolean values in the View Model of the application.

HTML

<border.style>>
									<Style>
										<Style.Triggers>
											<DataTrigger Binding="{Binding FadeIn}" Value="True">
												<DataTrigger.EnterActions>
													<BeginStoryboard>
														<Storyboard >
															<DoubleAnimation Duration="0:0:0.5"
															                 Storyboard.TargetProperty="Opacity"
															                 To="1" />
														</Storyboard>
													</BeginStoryboard>
												</DataTrigger.EnterActions>
												<DataTrigger.ExitActions>
													<BeginStoryboard>
														<Storyboard>
															<DoubleAnimation Duration="0:0:1"
															                 Storyboard.TargetProperty="Opacity"
															                 To="0" />
														</Storyboard>
													</BeginStoryboard>
												</DataTrigger.ExitActions>
											</DataTrigger>											
										</Style.Triggers>
									</Style>
								</Border.Style>

If the user moves their mouse over the control when it's fading out however, I would like to pause the animation, display the control with maximum opacity and then when the mouse leaves the area, continue the animation.

I've tried a few things, but I can't see how to pause an animation in XAML.

Cheers for any help

Larry

Posted 10-Aug-11 3:24am

Laurence1234

Add a Solution

Comments

Laurence1234 10-Aug-11 10:03am

ok, I can now pause the animation, but it pauses at whatever opacity it has got to rather then returning to 100% instantly then resuming the fade out once the mouse leaves.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

ClockEndGooner · Answer 1 · 2011-08-10T18:57:00

Hi, Larry;

I came across the following link in MSDN that may be of help:

http://msdn.microsoft.com/en-us/library/system.windows.media.animation.pausestoryboard.aspx

The XAML example at the bottom of the page is fully self-contained, and should work as is in either Visual Studio 2010 or in Kaxamal http://www.kaxamal.com

The storyboard pause and behaviors are implemented through a routed events bound to respective Button clicks, but I think they could be bound to any mouse event.

As for resuming the storyboard playback, having the opacity pick up where the pause click I would think is the correct default behavior, and to have the opacity set to 100% may require an additional data binding to set the opacity back to 100% when resumed.

I hope this was of help and of interest, and once you have the XAML working, I think it would be of tremendous value if you could share your results with us.