动画后执行命令

Question

我在屏幕上收集了一系列错误，一个错误一行。用户可以通过单击该行上的按钮来关闭任何错误消息。代码示例：

<UserControl>
    <ItemsControl ItemsSource="{Binding Errors}" >
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Grid x:Name="grid" Height="20">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <TextBlock Text="{Binding ErrorText}"/>
                    <Button Grid.Column="1" Width="16" Height="16" Content="Close" Command="{Binding DataContext.RemoveErrorCommand, RelativeSource={RelativeSource FindAncestor, AncestorType=UserControl}}" CommandParameter="{Binding CurrentError}">
                        <Button.Triggers>
                            <EventTrigger RoutedEvent="ButtonBase.Click">
                                <BeginStoryboard>
                                    <Storyboard TargetProperty="Height" TargetName="grid">
                                        <DoubleAnimation To="0" Duration="0:0:0.35"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                        </Button.Triggers>
                    </Button>
                </Grid>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</UserControl>

出了什么问题：如您所见，我添加了带有情节提要的触发器以使其清楚，我想顺利隐藏消息，并且只有在关闭它之后。因此，首先是情节提要，然后执行命令。如何实现？请尽量减少代码隐藏。

Answer 1

您可以像这样使用附加属性：

public static class StoryboardHelper
{
    public static readonly DependencyProperty CompletedCommandProperty = DependencyProperty.RegisterAttached("CompletedCommand", typeof(ICommand), typeof(StoryboardHelper), new PropertyMetadata(null, OnCompletedCommandChanged));
    public static readonly DependencyProperty CompletedCommandParameterProperty = DependencyProperty.RegisterAttached("CompletedCommandParameter", typeof(object), typeof(StoryboardHelper), new PropertyMetadata(null));

    public static void SetCompletedCommand(DependencyObject o, ICommand value)
    {
        o.SetValue(CompletedCommandProperty, value);
    }

    public static ICommand GetCompletedCommand(DependencyObject o)
    {
        return (ICommand)o.GetValue(CompletedCommandProperty);
    }

    public static void SetCompletedCommandParameter(DependencyObject o, object value)
    {
        o.SetValue(CompletedCommandParameterProperty, value);
    }

    public static object GetCompletedCommandParameter(DependencyObject o)
    {
        return o.GetValue(CompletedCommandParameterProperty);
    }

    private static void OnCompletedCommandChanged(object sender, DependencyPropertyChangedEventArgs e)
    {
        var sb = sender as Storyboard;

        if(sb != null)
        {
            sb.Completed += (a, b) =>
            {
                var command = GetCompletedCommand(sb);

                if (command != null)
                {
                    if (command.CanExecute(GetCompletedCommandParameter(sb)))
                    {
                        command.Execute(GetCompletedCommandParameter(sb));
                    }
                }
            };
        }
    }
}

并像这样使用它：

<Storyboard TargetProperty="Opacity" local:StoryboardHelper.CompletedCommand="{Binding Path=StoryCompletedCommand}">
    <DoubleAnimation From="0" To="1" Duration="0:0:5"/>
</Storyboard>

所以Command会在动画结束后触发。

Answer 2

在 DoubleAnimation 中使用 Completed 事件处理程序

<Storyboard TargetProperty="Height" TargetName="grid">
       <DoubleAnimation To="0" Duration="0:0:0.35" Completed="do_this"/>
</Storyboard>

您必须在后面的代码中设置事件，但这对于您需要做的事情非常简单。

编辑：这是您应该在代码隐藏中获得的事件处理程序以及您需要删除用户控件的代码行

private void do_this(object sender, EventArgs e)
{
    this.Grid.Children.Remove(UserControl);
}

您需要为用户控件和它所在的网格设置一个 x:Name。我刚刚对此进行了测试，它确实有效，我认为您无法在不触及代码隐藏的情况下找到任何方法。