locked
Controlling storyboard animation behaviour in code-behind file RRS feed

  • Question

  • Hi

    I'm trying my hand at a navigation based WPF Application, and want to create a transition effect between pages. My thought was that I would create an animation, control it from the code-behind file via the Event Handler that triggers the navigation to the next page.

    I access and activate my storyboard through the Event Handler via the Page.Resources - then I want my animation to complete, before switching to the next page. But unfortunately, the page is loaded immediately after the animation is activated. How do I force the event handler to wait for the animation to finish, before continuing execution?
    Sunday, April 19, 2009 10:31 AM

Answers

  •         private void TestRectangleMove_Completed(object sender, EventArgs e)
            {
                this.NavigationService.Navigate(new Uri("NextPage.xaml", UriKind.Relative));
            }
    So apparently, I'm a doof. I'd bashed the delegate signature of the event handler . . . So, the solution to my problem, just for reference:

    I defined a TestRectangle, and created an animation for it using Blend:

    		<Storyboard x:Key="TestRectangleMove" Completed="TestRectangleMove_Completed">
    			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="TestRectangle" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
    				<SplineDoubleKeyFrame KeyTime="00:00:01" Value="-256"/>
    				<SplineDoubleKeyFrame KeyTime="00:00:02" Value="-320"/>
    				<SplineDoubleKeyFrame KeyTime="00:00:03" Value="144"/>
    			</DoubleAnimationUsingKeyFrames>
    			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="TestRectangle" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
    				<SplineDoubleKeyFrame KeyTime="00:00:01" Value="80"/>
    				<SplineDoubleKeyFrame KeyTime="00:00:02" Value="-256"/>
    				<SplineDoubleKeyFrame KeyTime="00:00:03" Value="-176"/>
    			</DoubleAnimationUsingKeyFrames>
    		</Storyboard>
    

    Upon completion, the TestRectangleMove_Completed event fires, which I then define in the code-behind file (using C#):

            private void TestRectangleMove_Completed(object sender, EventArgs e)
            {
                this.NavigationService.Navigate(new Uri("BlessedIsle.xaml", UriKind.Relative));
            }
    End result: I have a rectangle that moves around, and when finished, the app navigates to another Page.
    • Marked as answer by Ryuoga Sunday, April 19, 2009 5:19 PM
    Sunday, April 19, 2009 5:18 PM

All replies

  • ... so apparently there's a Completed event that fires when the animation has run it's course - but I just can't seem to hook it up correctly. Any words of wisdom?
    Sunday, April 19, 2009 3:07 PM
  •         private void TestRectangleMove_Completed(object sender, EventArgs e)
            {
                this.NavigationService.Navigate(new Uri("NextPage.xaml", UriKind.Relative));
            }
    So apparently, I'm a doof. I'd bashed the delegate signature of the event handler . . . So, the solution to my problem, just for reference:

    I defined a TestRectangle, and created an animation for it using Blend:

    		<Storyboard x:Key="TestRectangleMove" Completed="TestRectangleMove_Completed">
    			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="TestRectangle" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
    				<SplineDoubleKeyFrame KeyTime="00:00:01" Value="-256"/>
    				<SplineDoubleKeyFrame KeyTime="00:00:02" Value="-320"/>
    				<SplineDoubleKeyFrame KeyTime="00:00:03" Value="144"/>
    			</DoubleAnimationUsingKeyFrames>
    			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="TestRectangle" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
    				<SplineDoubleKeyFrame KeyTime="00:00:01" Value="80"/>
    				<SplineDoubleKeyFrame KeyTime="00:00:02" Value="-256"/>
    				<SplineDoubleKeyFrame KeyTime="00:00:03" Value="-176"/>
    			</DoubleAnimationUsingKeyFrames>
    		</Storyboard>
    

    Upon completion, the TestRectangleMove_Completed event fires, which I then define in the code-behind file (using C#):

            private void TestRectangleMove_Completed(object sender, EventArgs e)
            {
                this.NavigationService.Navigate(new Uri("BlessedIsle.xaml", UriKind.Relative));
            }
    End result: I have a rectangle that moves around, and when finished, the app navigates to another Page.
    • Marked as answer by Ryuoga Sunday, April 19, 2009 5:19 PM
    Sunday, April 19, 2009 5:18 PM

  • Upon completion, the TestRectangleMove_Completed event fires, which I then define in the code-behind file (using C#):

            private void TestRectangleMove_Completed(object sender, EventArgs e)
    
            {
    
                this.NavigationService.Navigate(new Uri("BlessedIsle.xaml", UriKind.Relative));
    
            }
    
    
    End result: I have a rectangle that moves around, and when finished, the app navigates to another Page.

    Well, I'm having major problems with this navigation.  I want to do the exact same thing.  But I cannot seem to get the .Navigate() method to be recognized as a valid funtion.  I can access the this.NavigationService, but there is no .Navigate() method I can choose.  And If I try to compile it with just typing it in there, I get an error saying that the method is not defined.  So.  What "Using" includes are you using.  And is your object within any special frame or smoething?  Please help.  This is the last this I'm trying to do that will polish the prototype off, so I can demo it for my client.

    Thanks ahead of time for any help.

    BTW, I'm using Expression Blend 3 + Workflow to build my UI and MS Web Developer Express to edit the c# code behind pages.  I'm not sure if the Express version is what is causing me trouble or not.  I would have though it was a 3.5 framework thing (NavigationService).

    Perry
    • Edited by Maxx57 Friday, August 28, 2009 5:00 AM posting more information
    Friday, August 28, 2009 4:57 AM