Search code examples
c#xamlwindows-phone-7expression-blend

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


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>

Solution

  • 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.