如何在WPF中为控件实现缩小动画(How to implement a shrink animation for a control in WPF)

我希望控件（例如GroupBox）在可见时显示增长动画，并在可见性更改为“折叠”时显示缩小动画。

因此，我创建了一个实现动画生长和缩小效果的样式，如下面的小样本应用程序所示（如下所示）。

但是，仅显示增长动画。组框不会立即显示缩小动画，而是立即消失。

谁能告诉我，为什么？甚至更好，如何解决它？

<Window x:Class="ShrinkTest.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525"> <Window.Resources> <Style TargetType="FrameworkElement" x:Key="ExpandableElement"> <Setter Property="RenderTransformOrigin" Value="0.5 0" /> <Setter Property="RenderTransform"> <Setter.Value> <ScaleTransform/> </Setter.Value> </Setter> <Style.Triggers> <Trigger Property="Visibility" Value="Visible"> <Trigger.EnterActions> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY" From="0" To="1" Duration="0:0:0.5" AccelerationRatio="0.2" DecelerationRatio="0.4"/> </Storyboard> </BeginStoryboard> </Trigger.EnterActions> </Trigger> <Trigger Property="Visibility" Value="Hidden"> <Trigger.EnterActions> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY" From="1" To="0" Duration="0:0:0.5" AccelerationRatio="0.2" DecelerationRatio="0.4"/> </Storyboard> </BeginStoryboard> </Trigger.EnterActions> </Trigger> </Style.Triggers> </Style> </Window.Resources> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Button Grid.Row="0" Margin="8" Width="140" Click="ButtonBase_OnClick">Expand / Shrink</Button> <TextBlock Grid.Row="1" Text="--- Header ---"/> <GroupBox x:Name="GroupBox" Grid.Row="2" Header="GroupBox" Style="{StaticResource ExpandableElement}" > <StackPanel Orientation="Vertical"> <TextBlock Text="Test Test Test"/> <TextBlock Text="Test Test Test"/> <TextBlock Text="Test Test Test"/> <TextBlock Text="Test Test Test"/> <TextBlock Text="Test Test Test"/> </StackPanel> </GroupBox> <TextBlock Grid.Row="3" Text="--- Footer ---"/> </Grid> </Window>

I want a control (e.g. a GroupBox) to show a grow animation when it becomes visible and a shrink animation, when the visibility is changed to "Collapsed".

Therefore, I created a style which implements an animated grow and shrink effect as shown here in a small sample application (shown below).

However, only the grow animation is shown. Instead of showing the shrink animation, the groupbox disappears at once.

Can anyone tell me, why? And even better, how to fix it?

<Window x:Class="ShrinkTest.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525"> <Window.Resources> <Style TargetType="FrameworkElement" x:Key="ExpandableElement"> <Setter Property="RenderTransformOrigin" Value="0.5 0" /> <Setter Property="RenderTransform"> <Setter.Value> <ScaleTransform/> </Setter.Value> </Setter> <Style.Triggers> <Trigger Property="Visibility" Value="Visible"> <Trigger.EnterActions> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY" From="0" To="1" Duration="0:0:0.5" AccelerationRatio="0.2" DecelerationRatio="0.4"/> </Storyboard> </BeginStoryboard> </Trigger.EnterActions> </Trigger> <Trigger Property="Visibility" Value="Hidden"> <Trigger.EnterActions> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY" From="1" To="0" Duration="0:0:0.5" AccelerationRatio="0.2" DecelerationRatio="0.4"/> </Storyboard> </BeginStoryboard> </Trigger.EnterActions> </Trigger> </Style.Triggers> </Style> </Window.Resources> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Button Grid.Row="0" Margin="8" Width="140" Click="ButtonBase_OnClick">Expand / Shrink</Button> <TextBlock Grid.Row="1" Text="--- Header ---"/> <GroupBox x:Name="GroupBox" Grid.Row="2" Header="GroupBox" Style="{StaticResource ExpandableElement}" > <StackPanel Orientation="Vertical"> <TextBlock Text="Test Test Test"/> <TextBlock Text="Test Test Test"/> <TextBlock Text="Test Test Test"/> <TextBlock Text="Test Test Test"/> <TextBlock Text="Test Test Test"/> </StackPanel> </GroupBox> <TextBlock Grid.Row="3" Text="--- Footer ---"/> </Grid> </Window>

最满意答案

我有类似的问题。想想它一分钟......你的问题是你可以看到你的动画可见，但你不能隐藏它。这也是你解释原因的答案......因为它是隐藏的。我知道，这是一个相当令人不满意的答案，但事实就是如此。

至于如何解决它...说它很简单，但实现它不是。简而言之，您必须运行动画直到结束，然后将“ Visibility设置为“ Hidden 。所以不幸的是，这意味着在Trigger设置Visibility属性的漂亮，简单不再可行......可以使其可见，而不是隐藏。

就我而言，我有一个完整的框架，我构建了我的动画。基本上，当我从集合中删除项目时，内部的项目实际上并未被删除，而是启动了退出动画。仅当该动画完成时，内部集合才会实际删除该项目。

因此，如果你可能会受到打扰，那么你必须实现类似这样的东西，而不是将Visibility属性设置为Hidden ，你将另一个属性设置为true来触发动画，当调用该动画的Completed事件时，您将Visibility属性设置为Hidden 。

Sheridan is right. As soon as a control becomes invisible, it doesn't matter, which animation you apply to it. :-)

So I created a special ExpandingContentControl:

public class ExpandingContentControl : ContentControl { public static readonly DependencyProperty IsExpandedProperty = DependencyProperty.Register( "IsExpanded", typeof(bool), typeof(ExpandingContentControl), new PropertyMetadata(false)); public bool IsExpanded { get { return (bool)GetValue(IsExpandedProperty); } set { SetValue(IsExpandedProperty, value); } } public ExpandingContentControl() { Visibility = IsExpanded ? Visibility.Visible : Visibility.Collapsed; } }

But there was also a problem with the style: Creating two triggers which are bound to different values of the same property obviously doesn't work. Instead, I'm now using just one trigger where the EnterAction implements growing and the ExitAction implements shrinking the control:

更多推荐

如何在WPF中为控件实现缩小动画(How to implement a shrink animation for a control in WPF)

最满意答案

发布评论取消回复

最近发表

热门文章

标签列表