如何使用 WPF 中的 Unloaded 事件为控件设置动画答案

【问题标题】：How to Animate a Control Using the Unloaded Event in WPF如何使用 WPF 中的 Unloaded 事件为控件设置动画
【发布时间】：2015-03-07 02:12:49
【问题描述】：

我不想这么快就提出另一个问题，但我似乎无法让它正常工作。

我有一个UserControl 和一个StoryBoard 设置为在Unloaded RoutedEvent 发生时运行。但是，我也有代码，以便在单击按钮时它将UserControl 从其包含的StackPanel 中删除。我希望看到的是，当单击删除按钮时，StoryBoard 运行，然后UserControl 从StackPanel 中删除。

已经有很多代码了，所以我不知道该放什么。让我知道你想让我放置什么代码来帮助我。

我所拥有的只是UserControl 中的RoutedEvent，它引发了删除（或卸载）事件：

public static readonly RoutedEvent deleteEvent = 
            EventManager.RegisterRoutedEvent("delete", RoutingStrategy.Bubble,
            typeof(RoutedEventHandler), typeof(TimeEntry));

    private void raiseDeleteEvent()
    {
        RoutedEventArgs newDeleteEvent = new RoutedEventArgs(deleteEvent,this);
        RaiseEvent(newDeleteEvent);
    }

    private void deleteButton_Click(object sender, RoutedEventArgs e)
    {

        raiseDeleteEvent();
    }

然后，主窗口中的两个方法注册到被抛出的事件：

    private void entryAdder_Click(object sender, RoutedEventArgs e)
    {
        currentSession.addEntry(DateTime.Now);
        scrollStack.Children.Add(currentSession.currentTimeEntry);
        currentSession.currentTimeEntry.delete += currentTimeEntry_delete;
    }

    void currentTimeEntry_delete(object sender, RoutedEventArgs e)
    {
        scrollStack.Children.Remove(sender as TimeEntry);
    }

最后是UserControl，还有它的StoryBoards：

        <Storyboard x:Key="Ondelete">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="UserControl">
                <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.25" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="UserControl">
                <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.25" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>

【问题讨论】：

我能想到的最简单的方法是使用计时器来延迟删除，但我不知道这是不是最好的方法

标签： c# wpf xaml storyboard routed-events

【解决方案1】：

我想出了如何解决我的问题。我决定不使用Unloaded 事件来制作动画，而是对动画进行程序编码，然后让UserControl 订阅DoubleAnimation 的Completed 事件，最后触发它自己的删除事件，这将使订阅 that 事件的任何事情发生（即从视觉 StackPanel 和UserControl 对象列表中删除）。这将允许动画运行，然后在完成后引发删除事件。

这里是乱七八糟的代码。这些方法调用几乎都概括了这一切。它们位于UserControl：

public static readonly RoutedEvent deleteEvent = EventManager.RegisterRoutedEvent("delete", RoutingStrategy.Bubble,
    typeof(RoutedEventHandler), typeof(TimeEntry));

 private TransformGroup animatedTransform;
 private ScaleTransform animatedScale;

 private DoubleAnimation deleteDoubleAnimation;

 public UserControl()//the constructor
 {
     timeIn = DateTime.Now;
     timeSpent = timeOut - timeIn;
     this.InitializeComponent();
     setUpRenderTransform();
     setUpAnimationVariables();
     deleteDoubleAnimation.Completed += deleteDoubleAnimation_Completed;
 }

private void setUpRenderTransform()
{
    animatedTransform = new TransformGroup();
    animatedScale = new ScaleTransform();
    animatedTransform.Children.Add(animatedScale);

    this.RenderTransform = animatedTransform;

}

private void setUpAnimationVariables()
{
    deleteDoubleAnimation = new DoubleAnimation();
    deleteDoubleAnimation.To = 0;
    deleteDoubleAnimation.Duration = new Duration(TimeSpan.Parse("0:0:.25"));
}

private void raiseDeleteEvent()
{
    RoutedEventArgs newDeleteEvent = new RoutedEventArgs(deleteEvent, this);
    RaiseEvent(newDeleteEvent);
}

private void deleteButton_Click(object sender, RoutedEventArgs e)
{
    deleteAnimation();
}

void deleteDoubleAnimation_Completed(object sender, EventArgs e)
{
    raiseDeleteEvent();
}

private void deleteAnimation()
{
    animatedScale.BeginAnimation(ScaleTransform.ScaleXProperty, deleteDoubleAnimation);
    animatedScale.BeginAnimation(ScaleTransform.ScaleYProperty, deleteDoubleAnimation);
}

【讨论】：