wpf - 动画完成后如何正确执行命令？

Question

我有一个按钮，如下所示:

<Button x:Name ="Btn_Import" Grid.Row="33" Grid.Column="15" Grid.ColumnSpan="36" Grid.RowSpan="36" >
            <Button.Template>
                <ControlTemplate>
                    <Grid RenderTransformOrigin="0.5,0.5" x:Name="bg">
                        <Image x:Name ="import_image" Source="{Binding ImportBtnBaseImagePath}"/>

                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="import_image" Property="Source" Value="{Binding ImportBtnOverImagePath}" />
                        </Trigger>

                        <Trigger Property="ButtonBase.IsPressed"  Value ="True">
                            <!-- press effect -->
                            <Setter TargetName="bg" Property="RenderTransform">
                                <Setter.Value>
                                    <ScaleTransform ScaleX="0.9" ScaleY="0.9"/>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Button.Template>

            <Button.Triggers>
                <EventTrigger RoutedEvent="PreviewMouseDown" >
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="Studio" Storyboard.TargetProperty="Opacity" From="1" To="0" Duration="0:0:2" >
                                <i:Interaction.Triggers>
                                    <i:EventTrigger EventName="Completed">
                                        <i:InvokeCommandAction Command="{Binding NavigateCommand}" CommandParameter="ImportButtonClickParmeters" />
                                    </i:EventTrigger>
                                </i:Interaction.Triggers>
                            </DoubleAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Button.Triggers>

        </Button>

我希望此按钮触发其他控件上的动画淡出2秒钟，然后在动画完成后通过“NavigateCommand”导航到其他 View 。但是我收到以下错误:

Additional information: Specified value of type 'System.Windows.Interactivity.EventTrigger' must have IsFrozen set to false to modify.

Answer 1

您的问题取决于一个众所周知的bug。不幸的是，我发现common solution在这种情况下无法正常工作。

无论如何，如果希望保持应用程序MVVM的兼容性，建议您创建一个“假”动画，其任务是执行命令。当然，此动画必须是 Storyboard 中的最后一个。

这是CommandFakeAnimation代码:

public class CommandFakeAnimation : AnimationTimeline
{
    public static readonly DependencyProperty CommandProperty =
        DependencyProperty.Register("Command", typeof(ICommand), typeof(CommandFakeAnimation), new UIPropertyMetadata(null));

    public static readonly DependencyProperty CommandParameterProperty =
        DependencyProperty.Register("CommandParameter", typeof(object), typeof(CommandFakeAnimation), new PropertyMetadata(null));

    public CommandFakeAnimation()
    {
        Completed += new EventHandler(CommandAnimation_Completed);
    }

    public ICommand Command
    {
        get
        {
            return (ICommand)GetValue(CommandProperty);
        }
        set
        {
            SetValue(CommandProperty, value);
        }
    }

    public object CommandParameter
    {
        get 
        {
            return GetValue(CommandParameterProperty);
        }
        set
        {
            SetValue(CommandParameterProperty, value);
        }
    }

    private void CommandAnimation_Completed(object sender, EventArgs e)
    {
        if (Command != null && Command.CanExecute(CommandParameter))
        {
            Command.Execute(CommandParameter);
        }
    }

    protected override Freezable CreateInstanceCore()
    {
        return new CommandFakeAnimation();
    }

    public override Type TargetPropertyType
    {
        get
        {
            return typeof(Object);
        }
    }

    public override object GetCurrentValue(object defaultOriginValue, object defaultDestinationValue, AnimationClock animationClock)
    {
        return defaultOriginValue;
    }
}

如您所见，您可以将此动画应用于所需的任何dependecy属性，因为它不会更改其值。它仅在完成时执行命令。

现在我们可以在XAML中使用新的动画:

<Button.Triggers>
    <EventTrigger RoutedEvent="PreviewMouseDown">
        <BeginStoryboard>
            <Storyboard>
                <DoubleAnimation Storyboard.TargetProperty="Opacity" From="1" To="0" Duration="0:0:2" />
                <local:CommandFakeAnimation Duration="0:0:0" Command="{Binding Path=YourCommand, Mode=OneWay}"
                                            CommandParameter="{Binding Path=YourParameter, Mode=OneWay}" 
                                            Storyboard.TargetProperty="Opacity" />
            </Storyboard>
        </BeginStoryboard>
    </EventTrigger>
</Button.Triggers>

希望对您有所帮助。