Skip to main content
Home Forums Silverlight Design Designing with Silverlight need a goToAndStop frame one like action to restart silverlight animation
17 replies. Latest Post by jayirvin on November 8, 2009.
(0)
jayirvin
Member
1 points
13 Posts
11-04-2009 12:00 PM |
I have a playanimation behavior on a button that plays my silverlight animation only ounce and stops at the end.
In flash i used to add a go to and Stop action to go to and stop at a keyframe.
Some how I need to rewind my animation with a behavior or code so the play button will again play the animation
see www.jayih.com for animation with play button
bryant
Star
9937 points
1,629 Posts
11-04-2009 6:16 PM |
You can either at a From property to the doubleanimations so that they start the animation from the same place each time or you can reset the properties in code prior to starting the animation.
MawashiKid
574 points
106 Posts
11-05-2009 3:34 PM |
Hi Jay,
First take into account that a Silverlight animation uses a Storyboard which is built to deal more with Time orientented parameters ratherthan Frames like you usually find on a Flash timeline. So taking that into consideration,in Silverlight, you cannot really use a "Stop();...gotoAndPlay(1);" scenario using a blank keyframeon an action layer at Frame number X and add your ActionScript code like you'd do in Flash.
Instead you would rather use a StoryBoard with Time (BeginTime, From, KeyTime...) reference.
As an example the following code is just an excerpt of a basic animation of a small cubic Rectangle which simply moves from left to right created in Expression Blend 3...
<Storyboard x:Name="StoryBoard1"> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" StoryBoard.TargetName="Cube" StoryBoard.TargetProperty=(UIElement.RenderTransform).(TransformGroup.Children[3].(TranslateTransform.X)"> <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/> <EasingDoubleKeyFrame KeyTime="00:00:02" Value="500"/> </DoubleAnimationUsingKeyFrames></Storyboard>
Now if I add a button in a XAML with a Click event to trigger the animation
<Button x:Name="btnPlay" Width="60" Height="30" Content="Play" Click="btnPlay_Click" />
which will launch the same StoryBoard1 animation everytime I click on it
private void btnPlay_Click(object sender, RoutedEventArgs e){ StoryBoard1.Begin();}
no matter how often I click on the button, the StoryBoard1 animation will always start at 00:00:00 (BeginTime) with the Rectangle (Cube) always at the same position X = 0 (KeyTime="00:00:00") and should move it to the right for a durationof 2 seconds (KeyTime="00:00:02") till it reaches position X = 500... (unless I click on the button in between which would relaod the animation...) Therefore you don't have to specify any Stop and gotoAndPlay, the code will take care of it for you.... make a little quick left shift move reloading effect...
Of course there are a lot other animation options to play with...
11-06-2009 9:27 AM |
how would i plug this button event code into my MainPage.xaml.cs file?
namespace SmlBanner { public partial class MainPage : UserControl { public MainPage() { InitializeComponent(); } } }
11-06-2009 12:00 PM |
Easy... Let's assume you put your button with a given x:Name="btnPlay" in your MainPage.xaml
MainPage.xaml ---------------------
<UserControl.Resources> <Storyboard x:Name="StoryBoard1"> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" StoryBoard.TargetName="Cube"...... ..... </Storyboard></UserControl.Resources>
<Grid x:Name="LayoutRoot"> .... <Button x:Name="btnPlay" Width="60" Height="30" Content="Play" Click="btnPlay_Click" /><------ ...</Grid>
---------------If you're familiar enough with VS 2008, you know that whenever you assign a new "Click"event for a button, VS 2008 will prompt youto select a Click="<new event handler>", which in our case is Click="btnPlay_Click"
This action will automatically generate a corresponding "btnPlay_Click"function in your code behind (MainPage.xaml.cs)
MainPage.xaml.cs---------------------------
namespace SmlBanner{ public partial class MainPage : UserControl { public MainPage() { InitializeComponent(); }
//generated function when you assign a click event handler to your btnPlay button.
private void btnPlay_Click(object sender, RoutedEventArgs e) { StoryBoard1.Begin(); <---------- } }}----------------------------------------------------------------Now in the case we would have wanted to create a StoryBoard animation - like the ones you see playing over and over in background of logos...- without any triggered action from the user.We could have simply added:
MainPage.xaml.cs----------------
namespace SmlBanner{ public partial class MainPage : UserControl { public MainPage() { InitializeComponent(); StoryBoard1.Begin();<-------- StoryBoard1.RepeatBehaviour = RepeatBehaviour.Forever;<----- } }}
This would have launched the StoryBoard1 animation every time the MainPage.xaml is loadedand then played it over and over again... Those are simple basic animations andof course and there are a lot of other options and conditions you can add as you go on with more elaborated animations.
Hope this helps...
11-06-2009 12:12 PM |
Just as a reminder, the StoryBoard1.Begin(); line won't appearautomatically in the code of the btnPlay_Click function, you have to add itmanually in your code once the function is created in your code behind...
11-06-2009 12:58 PM |
I was hoping VS 2008 would help me wright the button event however I can only view the xaml and have no design view for mainpage.xaml
I added what you suggest in the code behind mainpage.xaml.cs however it thoughs a build error:
the name 'storyboard1' does not exist in the current context.
even though it is in the mainpage.xaml
<UserControl.Resources> <Storyboard x:Name="Storyboard1">
11-06-2009 1:22 PM |
Try Storyboard1. It is case sensitive.
11-06-2009 1:37 PM |
that was it. The page build succeded. I would have never found something like that without your help.
However, the play button does nothing when clicked.
11-06-2009 4:39 PM |
I realy hoped the repeatBehaviour would loop the animation but it wont build with M/S expression blend 3
namespace SmlBanner { public partial class MainPage : UserControl { public MainPage() { InitializeComponent(); Storyboard1.Begin(); Storyboard1.RepeatBehaviour = RepeatBehaviour.Forever; } } }
11-06-2009 5:02 PM |
The code provided here on the forum and copied below will now play the animation, One time when clicked.
I am right back where I started with this problem.
the controlstoryboard behavior i dragged onto the button in expression blend 3 plays the animaiton one time when clicked
Now I have 2 ways to play the animation one time with the button
11-06-2009 5:13 PM |
Are you trying to reset the animation at the end of the animation or do you want it to reset each time you click the button?
1) Replay the animation each time you click the button. For this I would suggest you go back to my first suggestion at the top of this thread and set the From property on the animations.
2) After the animation is done, reset back to original state. For this you would need to use another animation to reset things and just have it start after your other animation is complete.
Let us know what you're trying to do.
11-06-2009 6:27 PM |
Since I didn't have any copy the code you used from the beginning,I supplied a simple example have ...It's not just a matter of Cut and Paste... So don't expect to take my code as it is. I repeat... it's an example.You have to understand thelogic behind animation and adapt to your own need, otherwise it's just won't work.
However I provided you a whole code to play with below. Took less than 5 minutes to build, it'sa very basic animation but it responds well in my case...
Page.xaml-----------<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" x:Class="AnimatedControlSample.Page" Width="800" Height="300" mc:Ignorable="d"> <UserControl.Resources> <Storyboard x:Name="Storyboard1"> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Cube" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)"> <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/> <EasingDoubleKeyFrame KeyTime="00:00:05" Value="600"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </UserControl.Resources> <Grid x:Name="LayoutRoot" Background="White"> <Grid.RowDefinitions> <RowDefinition Height="100"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <StackPanel Orientation="Horizontal" HorizontalAlignment="Center"> <Button x:Name="btnPlay" Width="60" Height="30" Content="Play" Grid.Row="0" Click="btnPlay_Click"/> <Button x:Name="btnStop" Width="60" Height="30" Content="Stop" Grid.Row="0" Click="btnStop_Click"/> <Button x:Name="btnPause" Width="60" Height="30" Content="Pause" Grid.Row="0" Click="btnPause_Click"/> <Button x:Name="btnResume" Width="60" Height="30" Content="Play" Grid.Row="0" Click="btnResume_Click"/> </StackPanel> <Rectangle x:Name="Cube" Width="100" Height="100" Fill="Red" Grid.Row="1" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left" Margin="1,50,0,50" d:LayoutOverrides="Width"> <Rectangle.RenderTransform> <TransformGroup> <ScaleTransform/> <SkewTransform/> <RotateTransform/> <TranslateTransform/> </TransformGroup> </Rectangle.RenderTransform> </Rectangle>
</Grid></UserControl>
Page.xaml-----------
using System;using System.Collections.Generic;using System.Linq;using System.Net;using System.Windows;using System.Windows.Controls;using System.Windows.Documents;using System.Windows.Input;using System.Windows.Media;using System.Windows.Media.Animation;using System.Windows.Shapes;
namespace AnimatedControlSample{ public partial class Page : UserControl { public Page() { InitializeComponent(); }
private void btnPlay_Click(object sender, RoutedEventArgs e) { Storyboard1.Begin(); Storyboard1.RepeatBehaviour = RepeatBehaviour.Forever; }
private void btnStop_Click(object sender, RoutedEventArgs e) { Storyboard1.Stop(); } private void btnPause_Click(object sender, RoutedEventArgs e) { Storyboard1.Pause(); }
private void btnResume_Click(object sender, RoutedEventArgs e) { Storyboard1.Resume(); } }}
11-06-2009 7:30 PM |
bryant:1) Replay the animation each time you click the button. For this I would suggest you go back to my first suggestion at the top of this thread and set the From property on the animations.
I have no idea how to set the from property on the animation or I would try it.I want the animation to play each click of the button. the way it is now on www.jayih.com I have to reload the .aspx page and it will play again ounce on the button click.
11-06-2009 7:50 PM |
I created a new project in visual studio 2008 named AnimatedControlSample. The only devation from your example is it uses MainPage instead of Page. I tryed to build the project and I get 2 errors: Error 1 'System.Windows.Media.Animation.Storyboard' does not contain a definition for 'RepeatBehaviour' and no extension method 'RepeatBehaviour' accepting a first argument of type 'System.Windows.Media.Animation.Storyboard' could be found (are you missing a using directive or an assembly reference?) D:\AnimatedControlSample\AnimatedControlSample\MainPage.xaml.cs 24 25 AnimatedControlSampleand: Error 2 The name 'RepeatBehaviour' does not exist in the current context D:\AnimatedControlSample\AnimatedControlSample\MainPage.xaml.cs 24 43 AnimatedControlSample
Are we both using silverlight 3?
11-07-2009 11:39 AM |
Yes indeed I'm using Silverlight 3 RTM... Are you?Actually I'm using SVL 3 RTM since the very first day it was officially releasedand even before... and I never encountered any problem with RepeatBehaviour whatsoever.Why? cause I took time to sit down and READ THE INSTRUCTIONS...
If your system cannot recognize RepeatBehaviour property... well then ask yourself why?To every question there is an answer...
'System.Windows.Media.Animation.Storyboard' could be found (are you missing a using directive or an assembly reference?)
You understand what this means?
1) missing a using directive Have you checked if you added the following using directive in the code behind?
using System.Windows.Media.Animation; <---------
2) Second even if it's listed in the code have you checked if you previously added an assembly reference in your SLV project? AnimatedControlSample '-References '-System.Windows<------
If it's in both then there might be something wrong on your system cause I ran the code and haven't encounteredany problem.
Now I tried to reproduce your problem and simply removed "using System.Windows.Media.Animation;" from the code behind...(Page.xaml.cs...)
I got an error:
Hummm interesting...
Now, let's put back the using directive back in the code and see how it runs..
Hey... Hey... What do you know? It compiles and it works!!!
That's what I meant by not just going by Cut and Paste... Read between the lines...otherwise next time you'll go building an animation on your own, you'll get lost in the jungle.I believe Bryant and I brought you enough informations to get you rolling well now it's up to you to learn how to do the rest...
Good luck...
11-07-2009 7:55 PM |
MawashiKid: 1) missing a using directive Have you checked if you added the following using directive in the code behind? using System.Windows.Media.Animation; <--------- 2) Second even if it's listed in the code have you checked if you previously added an assembly reference in your SLV project? AnimatedControlSample '-References '-System.Windows<------
I'm 58 years old and trying to learn this new technology. I learned macromedia flash 10 years ago and learning was much easier for me then. Thanks for the help all I learn the rest on my own.
11-08-2009 2:04 PM |
I did get lucky. I have this working on my web site just they way I wanted. I moved some text on the animation and the play button started replaying that text everytime I clicked it. I needed what I'll call a keyframe on 00.00 of the timeline in every part of the animation I want to replay.
need a goToAndStop frame one like action to restart silverlight animation