如何设置绑定到切换按钮的堆栈面板可见性的动画

Question

我有一个堆栈面板，其可见性绑定到Toggle Button Checked属性，并且工作正常。然而，我想要的堆栈面板的唯一额外效果是上下滑动以提供更好的用户体验。

这是我的Xaml

 <Window.Resources>
    <ResourceDictionary>
        <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
    </ResourceDictionary>
</Window.Resources>


<ToggleButton x:Name="Products" Tag="&#xf03a;" Content="Products" Template="{StaticResource MenuButton}" Style="{StaticResource MenuItem}"/>
                    <StackPanel Background="{StaticResource MenuItemBrush}" Visibility="{Binding ElementName=Products, Path=IsChecked, Converter={StaticResource BooleanToVisibilityConverter}}">
                        <ToggleButton  Padding="30,0,0,0" Content="Menu Item" Template="{StaticResource MenuButton}" Style="{StaticResource SubMenuItem}"/>
                    </StackPanel>

你能告诉我们实现这个目标的正确方法吗？理想情况下，我想添加一个可以在其他面板上重复使用的样式。

谢谢

更新：

我能够应用样式来设置从折叠到可见的可见性动画和动画工作正常，但我仍然无法弄清楚如何在折叠时动画堆栈面板。它刚刚陷入崩溃状态。这是风格：

<Style x:Key="MyStyle" TargetType="{x:Type StackPanel}">
            <Setter Property="RenderTransform">
                <Setter.Value>
                    <ScaleTransform ScaleY="1"/>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="Visibility" Value="Visible">
                    <Trigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard >
                                <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY" From="0" Duration="0:00:.300"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.EnterActions>
                </Trigger>
                <Trigger Property="Visibility" Value="Collapsed">
                    <Trigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard >
                                <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY" From="1" Duration="0:00:.300"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.EnterActions>
                </Trigger>
            </Style.Triggers>
        </Style>

Answer 1

折叠动画不起作用的原因是因为故事板基于设置为折叠的visibility属性启动。此时您的控件已经不可见，因此看不到动画。你必须找到一种方法来启动故事板，然后你崩溃的堆栈面板就会消失......这有点棘手。尝试以下，它应该有效地得到你想要的：

       <ToggleButton x:Name="ProductToggleButton" Content="Products">
            <ToggleButton.Triggers>
                <EventTrigger RoutedEvent="ToggleButton.Checked">
                    <BeginStoryboard>
                        <Storyboard >
                            <DoubleAnimation Storyboard.TargetName="HideableStackPanel" Storyboard.TargetProperty="RenderTransform.ScaleY" From="0" To="1" Duration="0:00:.300"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
                <EventTrigger RoutedEvent="ToggleButton.Unchecked">
                    <BeginStoryboard>
                        <Storyboard >
                            <DoubleAnimation Storyboard.TargetName="HideableStackPanel" Storyboard.TargetProperty="RenderTransform.ScaleY" From="1" To="0" Duration="0:00:.300"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </ToggleButton.Triggers>
        </ToggleButton>
        <StackPanel x:Name="HideableStackPanel" >
            <StackPanel.RenderTransform>
                <ScaleTransform ScaleY="0"></ScaleTransform>
            </StackPanel.RenderTransform>
            <ToggleButton  Padding="30,0,0,0" Content="Menu Item"/>
        </StackPanel>