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

【问题标题】：How to animate stack panel visibility bound to a toggle button如何动画绑定到切换按钮的堆栈面板可见性
【发布时间】：2017-12-26 09:16:16
【问题描述】：

我有一个堆栈面板，其可见性绑定到切换按钮检查属性，它工作正常。但是，我希望堆栈面板的唯一附加效果是上下滑动以提供更好的用户体验。

这是我的 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>

【问题讨论】：

我还不习惯 xaml 中的动画，但这篇文章中的答案似乎与您的实现略有不同：stackoverflow.com/questions/25278653/…（即使使用样式解决方案）
我正在尝试达到类似的效果，但我面临的问题是在我的情况下没有鼠标进入或离开事件。该事件是从外部源触发的，我希望动画在那个时候运行。

标签： c# wpf

【解决方案1】：

您的折叠动画不起作用的原因是您的情节提要基于设置为折叠的可见性属性开始。此时您的控件已经不可见，因此看不到动画。您必须找到一种方法在您要折叠的堆栈面板消失之前启动故事板……这有点棘手。试试下面的方法，它应该可以有效地得到你想要的：

       <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>

【讨论】：

非常感谢！这正是我一直在寻找的，您的答案很准确，并且以比我试图实现的更容易的方式实施解决方案，您还花时间解释了我的方法有什么问题。真的很感激！