Two way animation

Question

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?

Thanks.

Answer 1

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>

Answer 2

What about a little trick: Together with the storyboard you have in place now, you are hidding the current button and setting another button (which looks the same) visible. The other button has the reverse storyboard, and reverse button visibility settings. With that you don't have to worry about a state, and you can do it only in XAML.

Other Idea would be to handle the click in the code behind, maintain a flag there, and trigger the storyboard from the code. As this is a view-only functionality I don't see a conflict with MVVM.