CODEWITHSUNDEEP
wpfxamlanimationmvvm
Boris
Boris

Reputation: 10286

Run code after the animation is finished

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:

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:

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.

Upvotes: 5

Views: 2155

Answers (2)

brunnerh
brunnerh

Reputation: 185290

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.

Upvotes: 4

Jamie
Jamie

Reputation: 51

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

Upvotes: 0

Related Questions