我正在使用 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
是窗口的 View 模型类。它包含:
bool MyControlVisible
属性,绑定(bind)到MyUserControl
的Visibility
属性(property)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
是用户控件的 View 模型类。它包含:
string MyUserControlText
属性,绑定(bind)到TextBlock
的Text
属性(property)bool Fading
属性,绑定(bind)到边框的数据模板,用于制作 边框淡入或淡出RelayCommand CloseMyControl
命令执行两件事: 1. 它设置Fading
属性设置为false
以使边框淡出,并且 2. 设置Visibility
将用户控件的属性设置为Collapsed
。
问题是:一旦Visibility
设置为Collapsed
,用户控件就会消失。我需要它先淡出,然后再消失。我怎样才能实现它?谢谢。
最佳答案
由于可见性属于淡出,我会同时运行两个动画。除了淡入淡出动画(无论何种类型或复合)之外,您还可以创建一个ObjectAnimationUsingKeyFrames
,它在淡入淡出结束的关键时间设置可见性。
XAML 示例:
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0.5">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
此外,所有 Storyboard和动画都有一个 Completed
事件,您可以订阅该事件并立即设置值。
要将动画定向到另一个控件,请使用 Storyboard.Target
进行复杂引用,或使用 Storyboard.TargetName
进行名称引用。
要为 UserControl 设置动画,您可以尝试:
Storyboard.Target="{Binding RelativeSource={RelativeSource AncestorType=UserControl}}"
或
Storyboard.Target="{Binding RelativeSource={RelativeSource AncestorType=my:MyUserControl}}"
如果逻辑树完好无损,两者都应该有效。
关于wpf - 动画完成后运行代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5684124/