How to animate stack panel visibility bound to a toggle button

Question

I have a stack panel that has visibility bound to a Toggle Button Checked Property and it is working fine. However the only additional effect I want for the stack panel is to slide up and down to give a better user experience.

Here is my 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>

Can you guys please suggest the right way of achieving this? Ideally I would like to add a style that can be reused on other panels as well.

Thanks

Update:

I was able to apply the style for animating the visibility from collapsed to visible and animation works fine, but I still cannot figure out how to animate stack panel when it is collapsing. It just jumps into collapsed state. Here is the style:

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

I'm not used to animations in xaml yet, but the answer in this post seems lightly different to your implementation: https://stackoverflow.com/questions/25278653/apply-animation-on-wpf-control-visibility-change (even with the style solution) — Mikitori, Dec 26 '17 at 10:36
I am trying to achieve similar effect but the problem I am facing is that there is not mouse enter or leave event in my case. The event is triggered from external source and I want the animation to run at that time. — Afraz Ali, Dec 26 '17 at 11:01

Rowbear · Accepted Answer · 2017-12-27T02:07:26.720

The reason why your collapse animation doesn't work is because your storyboard starts based on the visibility property being set to collapsed. At that point your control is already not visible, so the animation is not seen. You have to find a way to start the storyboard before the stackpanel you're collapsing disappears... which is a bit tricky. Try the below instead, it should effectively get you what you want:

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

Thank you so much! This is exactly what I was looking for, your answer is precise and implements the solution in a more easier way than I was trying to achieve and you have also taken time to explain what was wrong with my approach. Really appreciated! — Afraz Ali, Dec 27 '17 at 23:56

How to animate stack panel visibility bound to a toggle button

1 Answers1