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.