Storyboard.Completed 和 OnNavigatingFrom。如何正确做动画？答案

【问题标题】：Storyboard.Completed and OnNavigatingFrom. How to do animation correctly?Storyboard.Completed 和 OnNavigatingFrom。如何正确做动画？
【发布时间】：2015-04-03 06:59:35
【问题描述】：

当用户在应用程序的某个页面之间导航时，我想制作简单的动画。这是我现在所拥有的：

XAML：

<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.Projection>
        <PlaneProjection CenterOfRotationY="1"/>
    </Grid.Projection>
    <Grid.Resources>
        <Storyboard x:Name="OnNavTo">
            <DoubleAnimation
                Storyboard.TargetName="LayoutRoot"
                Storyboard.TargetProperty="(Projection).(PlaneProjection.RotationX)"
                From="-110" To="0" Duration="0:0:0.3" />
        </Storyboard>
        <Storyboard x:Name="OnNavFrom">
            <DoubleAnimation
                Storyboard.TargetName="LayoutRoot"
                Storyboard.TargetProperty="(Projection).(PlaneProjection.RotationX)"
                From="0" To="-110" Duration="0:0:1.3" />
        </Storyboard>
    </Grid.Resources>
    <phone:Pivot Title="{Binding LocalizedResources.ApplicationTitle, Source={StaticResource LocalizedStrings}}">
        <!-- My page stuff here -->
    </phone:Pivot>
</Grid>

C#：

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    base.OnNavigatedTo(e);
    OnNavTo.Begin();
}

protected override void OnNavigatedFrom(NavigationEventArgs e)
{
    base.OnNavigatedFrom(e);
    OnNavFrom.Begin();
}

OnNavigatedTo 工作正常。当我点击按钮打开适当的页面时，它会以动画形式打开。但是，当我按下后退按钮时，页面只是关闭，没有任何动画。请指出正确的方向

（我是一个后端 python 开发人员，在 Windows Phone 和 .NET 方面绝对是菜鸟）。

UPD 正如 gaurav5430 所指出的那样。

首先：我注意到，我使用的是OnNavigatedFrom 而不是OnNavigatingFrom

第二：动画是异步的，所以我需要等到它完成才能真正关闭页面。至此，我得出以下结论：

XAML：<Storyboard x:Name="OnNavFrom" Completed="OnNavFrom_Completed">

C#：

private bool cancelExit = true;

protected override void OnNavigatingFrom(NavigatingCancelEventArgs e)
{
    e.Cancel = cancelExit;
    if (cancelExit)
    {
        OnNavFrom.Begin();
    }
    else
    {
        base.OnNavigatingFrom(e);
    }
}

private void OnNavFrom_Completed(object sender, EventArgs e)
{
    cancelExit = false;
    NavigationService.GoBack();
}

它正在工作。虽然我知道这不是处理事件的最佳方式。我很确定 C# 有很好的方法来做到这一点，而无需调用 NavigationService 两次（第一次是用户按下返回，第二次是动画完成时）。 gaurav5430 提供的链接包含代码示例。但我不明白它是如何工作的。我认为这段代码太小了，对于像我这样的新手来说，无法理解幕后的内容。

也可以

【问题讨论】：

标签： c# xaml animation windows-phone

【解决方案1】：

很可能页面已经被导航并且没有等待动画完成。

我的建议是在调用base.OnNavigatedFrom(e)之前调用所有函数，因为这可能是设置导航的函数，所以基本上你可以尝试

   protected override void OnNavigatedFrom(NavigationEventArgs e)
    {
     OnNavFrom.Begin();
        base.OnNavigatedFrom(e);

    }

请注意，这仍然不能确保它等待您的动画完成，因为动画可能会异步播放。所以也许你可以尝试在调用base.OnNavigatedFrom()之前添加一些延迟

你也可以看看这个链接

http://www.silverlightshow.net/items/Windows-Phone-7-Part-3-Understanding-navigation.aspx

【讨论】：

感谢您为我指明正确的方向并提供链接。我认为您的回复和链接包含处理该问题的所有信息。但我还是不知道怎么做。我更新了我的问题。

【解决方案2】：

谢谢，在此基础上，我不得不添加一些改进。

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    //base.OnNavigatedTo(e); //this call isn't necessary
    if (e.NavigationMode == NavigationMode.New)
    {
       storyboardTo.Begin();
    }
    //if NavigationMode is Back then don't play the animation

    //...
}

protected override void OnNavigatingFrom(NavigatingCancelEventArgs e)
{
    if (e.NavigationMode != NavigationMode.Back)
    {//leave the page due to long back button or Windows button, stay on the page
        e.Cancel = true;
        return;
    }

    //...
    //base.OnNavigatingFrom(e); //this call isn't necessary
    //...
}

【讨论】：