Question

我已经通过点击事件连接两个表单，该事件会在两个方向上触发连接的动画。第一次前进和后退它工作正常。第二次转发可行，但尝试再次返回会导致应用程序崩溃，并出现以下异常：

System.ArgumentException：参数不正确。无法启动动画 - 源元素不在元素树中。

这发生在SecondPage_BackRequested的第一行，但仅在第二次执行时发生。第一次执行工作和动画完美。

非常感谢任何帮助。我已经完成了连接的动画文档，据我所知，这是应该如何使用它，但我找不到任何地方发生此错误的引用。

我的代码（MainPageViewModel省略，因为它不相关，但可以根据要求添加）：

MainPage.xaml中

<Page
    x:Class="AnimTest.Views.Main.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:models="using:AnimTest.Models"
    xmlns:main="using:AnimTest.Views.Main"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
          Padding="10">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <TextBlock Grid.Row="0"
                   Style="{ThemeResource HeaderTextBlockStyle}"
                   Text="AnimTest"/>
        <GridView x:Name="TileGrid"
                  Grid.Row="1"
                  IsItemClickEnabled="True"
                  ItemsSource="{x:Bind ViewModel.Tiles, Mode=OneWay}"
                  ItemClick="GridView_ItemClick"
                  Loaded="TileGrid_Loaded">
            <GridView.ItemTemplate>
                <DataTemplate x:DataType="models:Tile">
                    <Border x:Name="TileBorder"
                            Background="Red"
                            MinHeight="150"
                            MinWidth="200">
                        <StackPanel Orientation="Vertical"
                                    VerticalAlignment="Center">
                            <SymbolIcon Symbol="World"/>
                            <TextBlock Text="{x:Bind Name}"
                                       HorizontalTextAlignment="Center"/>
                        </StackPanel>
                    </Border>
                </DataTemplate>
            </GridView.ItemTemplate>
        </GridView>
    </Grid>
</Page>

MainPage.xaml.cs中

public sealed partial class MainPage : Page
{
    public MainPageViewModel ViewModel => (MainPageViewModel)DataContext;

    public MainPage()
    {
        InitializeComponent();

        DataContext = new MainPageViewModel();
    }

    private void GridView_ItemClick(object sender, ItemClickEventArgs e)
    {
        TileGrid.PrepareConnectedAnimation("borderIn", e.ClickedItem, "TileBorder");
        Frame.Navigate(typeof(SecondPage));
    }

    private async void TileGrid_Loaded(object sender, RoutedEventArgs e)
    {
        var animation = ConnectedAnimationService.GetForCurrentView().GetAnimation("borderOut");
        if (animation != null)
        {
            var success = await TileGrid.TryStartConnectedAnimationAsync(animation, ViewModel.Tiles[0], "TileBorder");
        }
    }
}

SecondPage.xaml

<Page
    x:Class="HomeTiles.Views.Thermostat.ThermostatPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:HomeTiles.Views.Thermostat"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Border x:Name="MainBorder"
            Background="Red">
    </Border>
</Page>

SecondPage.xaml.cs

public sealed partial class SecondPage : Page
{
    public SecondPage()
    {
        this.InitializeComponent();
        SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility = AppViewBackButtonVisibility.Visible;
        SystemNavigationManager.GetForCurrentView().BackRequested += SecondPage_BackRequested;
    }

    private void SecondPage_BackRequested(object sender, BackRequestedEventArgs e)
    {
        ConnectedAnimationService.GetForCurrentView().PrepareToAnimate("borderOut", MainBorder);
        Frame?.GoBack();
        e.Handled = true;
    }

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

        var animation = ConnectedAnimationService.GetForCurrentView().GetAnimation("borderIn");
        animation?.TryStart(MainBorder);
    }
}

Answer 1

问题实际上不是连接动画，而是导航事件。

第一次到达SecondPage时，你联系了BackRequested事件，当你回去时，一切都很好。但是，即使您从SecondPage导航，事件处理程序仍然依附于该事件。这是一个问题，因为一旦您再次导航到SecondPage，现在偶数将被注册两次。并且第一次处理程序运行失败，因为第一个处理程序连接到页面的前一个实例，并且连接的动画已经通过了这个。最后 - 由于该事件，页面将永远保留在内存中，这可能会导致严重的内存泄漏。

解决方案非常简单 - 您必须确保在离开页面时忘记取消订阅均值处理程序，例如在OnNavigatedFrom方法中订阅{{1}方法更清晰：

OnNavigatedTo

为了避免这种问题，我通常会在public sealed partial class SecondPage : Page { public SecondPage() { this.InitializeComponent(); } protected override void OnNavigatedFrom(NavigationEventArgs e) { base.OnNavigatedFrom(e); SystemNavigationManager.GetForCurrentView().BackRequested -= SecondPage_BackRequested; } private void SecondPage_BackRequested(object sender, BackRequestedEventArgs e) { ConnectedAnimationService.GetForCurrentView().PrepareToAnimate("borderOut", MainBorder); Frame?.GoBack(); e.Handled = true; } protected override void OnNavigatedTo(NavigationEventArgs e) { base.OnNavigatedTo(e); SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility = AppViewBackButtonVisibility.Visible; SystemNavigationManager.GetForCurrentView().BackRequested += SecondPage_BackRequested; var animation = ConnectedAnimationService.GetForCurrentView().GetAnimation("borderIn"); animation?.TryStart(MainBorder); } }中为整个应用程序设置BackRequested事件，并在发布时只订阅一次。然后，您可以将连接的动画代码放在App方法中，而不必订阅OnNavigatedFrom：

BackRequested

UWP连接动画在第二次使用后崩溃

1 个答案: