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

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.

Pausing an animation in XAML

1 solution

Solution 1

Add your solution here

Preview 0

Pausing an animation in XAML

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us