How to navigate to the next page after completing the animation?

Question

I am trying to do an animation for the Splashscreen in windows phone 8. I've completed the animation for an object to bounce. But after completing the animation it should immediately switch to the next page. How to do this task?

    //MainPage.xaml
        <phone:PhoneApplicationPage.Resources>
                <Storyboard x:Name="Storyboard1">
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="arc">
                        <EasingDoubleKeyFrame KeyTime="0" Value="-555">
                            <EasingDoubleKeyFrame.EasingFunction>
                                <BounceEase EasingMode="EaseOut"/>
                            </EasingDoubleKeyFrame.EasingFunction>
                        </EasingDoubleKeyFrame>
                        <DiscreteDoubleKeyFrame KeyTime="0:0:5" Value="-150"/>

                    </DoubleAnimationUsingKeyFrames>
                </Storyboard>
            </phone:PhoneApplicationPage.Resources>

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

            <es:Arc x:Name="arc" ArcThickness="20" ArcThicknessUnit="Pixel" EndAngle="360" HorizontalAlignment="Left" Height="100" Margin="174,369.5,0,0" Stretch="None" Stroke="Black" StartAngle="0" UseLayoutRounding="False" VerticalAlignment="Top" Width="100" RenderTransformOrigin="0.5,0.5" Loaded="arc_Loaded">
                <es:Arc.RenderTransform>
                    <CompositeTransform/>
                </es:Arc.RenderTransform>
                <es:Arc.Fill>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FF3B9E5B" Offset="0"/>
                        <GradientStop Color="#FF8D2727" Offset="1"/>
                    </LinearGradientBrush>
                </es:Arc.Fill>
            </es:Arc>

        </Grid>

Answer 1

Heres the solution to it But I guess you need to share more about the problem if this doesnot help

 <Storyboard x:Name="StoryboardTest" Completed="Storyboard_Completed">
                //What ever animation you want to do
            </Storyboard>

And in the cs file:

private void Storyboard_Completed(object sender, EventArgs e)
{
    NavigationService.Navigate(new Uri("/SecondPage.xaml", UriKind.Relative));
}

For a demo on animating splash screen go to this link progress bar splash screen and apply your animation accordingly.

Answer 2

You can handle the Storyboard's Completed event.

Storyboard myStoryboard = Resources["Storyboard1"] as Storyboard;

if(myStoryboard != null)
{
    myStoryboard.Completed += (s,e) => 
           {
             NavigationService.Navigate(new Uri("/NextPage.xaml", UriKind.Relative));
           };
    myStoryboard.Begin();
}

Answer 3

You can navigate to the next page in Completed event of the sotryboard.

 <Storyboard x:Name="Storyboard1" Completed="Storyboard_Completed_1">
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="arc">
                    <EasingDoubleKeyFrame KeyTime="0" Value="-555">
                        <EasingDoubleKeyFrame.EasingFunction>
                            <BounceEase EasingMode="EaseOut"/>
                        </EasingDoubleKeyFrame.EasingFunction>
                    </EasingDoubleKeyFrame>
                    <DiscreteDoubleKeyFrame KeyTime="0:0:5" Value="-150"/>

                </DoubleAnimationUsingKeyFrames>
            </Storyboard>

And in the code behind:

private void Storyboard_Completed_1(object sender, EventArgs e)
{
    // Do whatever you wanted
}