双向动画 [英] Two way animation

问题描述

我triying隐藏/显示一个StackPanel中，当我在点击一个按钮。这是我迄今所取得：

I'm triying to hide/show a stackpanel when I click in a button. This is what I made so far:

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

这个动画效果很好，当我点击它，它隐藏在面板。但现在我需要找到一种方式再次点击该按钮时启动反向动画。我可以存储当前的状态，并决定什么样的动画推出或类似这样的东西吗？

This animation works well, and it hides the panel when I click on it. But now I need to find a way to launch the reverse animation when the button is clicked again. Could I store the current state and decide what animation launch or something like this?

感谢。

推荐答案

您可以改变你的按钮，一个切换按钮，并使用经过和未选中路由事件来设置2情节串连图板：

You can change your button to a ToggleButton and use the Checked and Unchecked routed events to set up your 2 storyboards:

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

这篇关于双向动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！