双向动画

Question

当我点击按钮时,我正在试图隐藏/显示堆叠面板.这是我到目前为止所做的:

<Button.Triggers>
    <EventTrigger RoutedEvent="Mouse.PreviewMouseDown">
        <BeginStoryboard>
            <Storyboard>
                <DoubleAnimation Storyboard.TargetProperty="Height"                                                     
                                 Storyboard.TargetName="PanelDeCampos"
                                 From="{Binding ElementName=PanelDeCampos,Path=ActualHeight}" 
                                 To="0" 
                                 Duration="0:0:0.25" />
            </Storyboard>

        </BeginStoryboard>
    </EventTrigger>
</Button.Triggers>

这个动画效果很好,当我点击它时它会隐藏面板.但是现在我需要找到一种方法来在再次单击按钮时启动反向动画.我可以存储当前状态并决定动画启动或类似的东西吗？

谢谢.

Answer 1

您可以将按钮更改为a ToggleButton并使用Checked和Unchecked路由事件来设置2个故事板:

<ToggleButton>
    <ToggleButton.Triggers>
        <EventTrigger RoutedEvent="Checked">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetProperty="Height"                                                     
                                     Storyboard.TargetName="PanelDeCampos"
                                     From="{Binding ElementName=PanelDeCampos,Path=ActualHeight}" 
                                     To="0" 
                                     Duration="0:0:0.25" />
                </Storyboard>

            </BeginStoryboard>
        </EventTrigger>
        <EventTrigger RoutedEvent="Unchecked">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetProperty="Height"                                                     
                                     Storyboard.TargetName="PanelDeCampos"
                                     From="0" 
                                     Duration="0:0:0.25"
                                     To="1000" /> <!-- or whatever height you want-->
                </Storyboard>

            </BeginStoryboard>
        </EventTrigger>
    </ToggleButton.Triggers>
</ToggleButton>