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

您的折叠动画无法正常工作的原因是您的故事板基于设置为折叠的可见性属性启动。此时您的控件已经不可见，因此看不到动画。你必须找到一种方法来启动故事板，然后你崩溃的堆栈面板就会消失......这有点棘手。请尝试下面的内容，它应该有效地为您提供所需的内容：

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

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

1 个答案: