Run code after the animation is finished - wpf

Question

I am using MVVM Light. I have created a window that looks like this:
<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>
So basically, the MainViewModel is a view model class for the window. It contains:
bool MyControlVisible property which is binded to MyUserControl's Visibility
property
RelayCommand RaiseMyControl command which purpose is to set the value of the
MyControlVisible property to true (default is false).
Clicking the button in the window results in the appearance of the MyUserControl - simple.
MyUserControl user control looks like this:
<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>
Again, very simple. The MyUserControlViewModel is a view model class for the user control. It contains:
string MyUserControlText property which is binded to TextBlock's Text
property
bool Fading property which is binded to border's data template, and is used to make
the border fade in or out
RelayCommand CloseMyControl command which does two things: 1. It sets the Fading
property to false to make the border fade out, and 2. it sets the Visibility
property of the user control to Collapsed.
Here's the problem: as soon as the Visibility is set to Collapsed, the user control disappears. I need it to fade out first and then to disappear afterwards. How can I make it happen? Thanks.

Answer 1

Since the visibility belongs to the fade-out i would run two animations at the same time. Additionally to your fade-animation (of whatever type or composite that may be) you can create a ObjectAnimationUsingKeyFrames which sets the Visibiliy at the key time at which the fade ends.
XAML example:
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0.5">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
Additionally all storyboards and animations have a Completed event to which you could subscribe and just set the value right away.
To direct the animation at another control use Storyboard.Target for complex references, or Storyboard.TargetName for reference by name.
To animate the UserControl you could try:
Storyboard.Target="{Binding RelativeSource={RelativeSource AncestorType=UserControl}}"
or
Storyboard.Target="{Binding RelativeSource={RelativeSource AncestorType=my:MyUserControl}}"
Both should work if the logical tree is intact.

Answer 2

I'd try setting the visibility to Collapsed as part of the fade out animation, not a separate line in the CloseMyControl command.