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:
bool MyControlVisible
property which is binded toMyUserControl
'sVisibility
propertyRelayCommand RaiseMyControl
command which purpose is to set the value of theMyControlVisible
property totrue
(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 toTextBlock
'sText
propertybool Fading
property which is binded to border's data template, and is used to make the border fade in or outRelayCommand CloseMyControl
command which does two things: 1. It sets theFading
property tofalse
to make the border fade out, and 2. it sets theVisibility
property of the user control toCollapsed
.
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.
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.
I'd try setting the visibility to Collapsed as part of the fade out animation, not a separate line in the CloseMyControl command.
精彩评论