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>