动画完成后运行代码答案

【问题标题】：Run code after the animation is finished动画完成后运行代码
【发布时间】：2011-04-16 02:35:28
【问题描述】：

我正在使用 MVVM Light。我创建了一个如下所示的窗口：

<Window Name="MainWindow" ...>
  <Window.Resources>
    ...
    <viewModels:MainViewModel x:Key="mainVM" />
    ...
    <BooleanToVisibilityConverter x:Key="visConv" />
    ...
  </Window.Resources>

  <Grid DataContext="{StaticResource mainVM}>
    ...
    <Button Command="{Binding RaiseMyControl}" />
    ...
    <my:MyUserControl Visibility="{Binding MyControlVisible, 
        Converter={StaticResource visConv}}" />
  </Grid>

</Window>

所以基本上，MainViewModel 是窗口的视图模型类。它包含：

bool MyControlVisible 绑定到MyUserControl 的Visibility 的属性财产
RelayCommand RaiseMyControl 命令的目的是设置 MyControlVisible 属性为 true（默认为 false）。

单击窗口中的按钮会出现MyUserControl - 很简单。

MyUserControl 用户控件如下所示：

<UserControl ...>
  <UserControl.Resources>
    ...
    <viewModels:MyUserControlViewModel x:Key="userControlVM" />
    ...
  </UserControl.Resources>

  <Grid DataContext="{StaticResource userControlVM}>
    ...
    <Border Width="200" Height="100" Background="Red">
      <TextBlock Text="{Binding MyUserControlText}" />
    </Border>
    <!-- This border has a DataTrigger bound to "bool Fading" property of 
         the view model. When Fading is true, the border fades in through 
         an animation. When it is false, the border fades out. -->
    ...
    <Button Command="{Binding CloseMyControl}" />
  </Grid>

</UserControl>

同样，非常简单。 MyUserControlViewModel 是用户控件的视图模型类。它包含：

string MyUserControlText 绑定到TextBlock 的Text 的属性财产
bool Fading 绑定到边框数据模板的属性，用于制作边框淡入或淡出
RelayCommand CloseMyControl 命令做了两件事： 1. 它设置Fading 属性为false 使边框淡出，2. 它设置Visibility 用户控件的属性为Collapsed。

问题出在：只要将Visibility 设置为Collapsed，用户控件就会消失。我需要它先淡出然后再消失。我怎样才能让它发生？谢谢。

【问题讨论】：

标签： wpf xaml animation mvvm

【解决方案1】：

由于可见性属于淡出，我会同时运行两个动画。除了您的淡入淡出动画（可能是任何类型或复合）之外，您还可以创建一个ObjectAnimationUsingKeyFrames，它将 Visibiliy 设置在淡入淡出结束的关键时间。

XAML 示例：

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility">
    <DiscreteObjectKeyFrame KeyTime="0:0:0.5">
        <DiscreteObjectKeyFrame.Value>
            <Visibility>Collapsed</Visibility>
        </DiscreteObjectKeyFrame.Value>
    </DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>

此外，所有故事板和动画都有一个 Completed 事件，您可以订阅该事件并立即设置值。

要将动画定向到另一个控件，请使用 Storyboard.Target 进行复杂引用，或使用 Storyboard.TargetName 进行名称引用。

要为 UserControl 设置动画，您可以尝试：

Storyboard.Target="{Binding RelativeSource={RelativeSource AncestorType=UserControl}}"

或

Storyboard.Target="{Binding RelativeSource={RelativeSource AncestorType=my:MyUserControl}}"

如果逻辑树完好无损，两者都应该工作。

【讨论】：

@H.B.再次问好！ :) 由于动画设置在边框上，我需要Visibility 来定位我的用户控件，我如何从这个动画中引用它？
在答案中添加了一些更多信息，看看它是否有效。
我添加了ObjectAnimationUsingKeyFrames，但它不会折叠Visibility 属性。它仍然是Visible。我知道这一点是因为我暂时将根布局网格的背景颜色设置为黄色。因此，边框淡出，但控件仍然可见，即黄色。有什么想法吗？
对，AncestorType 应该就是UserControl，因为类型只适用于外部，用我自己的 UserControl 试了一下。
更改AncestorType 后，它仍然无法在我这边工作。我在主窗口中绑定Visibility 属性可能会搞砸吗？

【解决方案2】：

我会尝试将可见性设置为 Collapsed 作为淡出动画的一部分，而不是 CloseMyControl 命令中的单独行。

【讨论】：