Animate Collapse and Expand of Control in WPF When Altering Visibility VB.Net

Question

I want to be able to animate the collapse of a <StackPanel> when I change its visibility to Collapsed. I found this Question for which the accepted answer gets me close. I have created this XAML Code:

                        <Grid x:Name="grdBRDS">
                            <Grid.Resources>
                                <Style TargetType="StackPanel" x:Key="XPND">
                                    <Setter Property="RenderTransform">
                                        <Setter.Value>
                                            <ScaleTransform ScaleX="1"/>
                                        </Setter.Value>
                                    </Setter>
                                    <Style.Triggers>
                                        <Trigger Property="Tag" Value="Hide">
                                            <Trigger.EnterActions>
                                                <BeginStoryboard>
                                                    <Storyboard>
                                                        <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX"
                                                                         From="1" To="0"
                                                                         Duration="0:00:1"/>
                                                    </Storyboard>
                                                </BeginStoryboard>
                                            </Trigger.EnterActions>
                                        </Trigger>
                                        <Trigger Property="Tag" Value="Show">
                                            <Trigger.EnterActions>
                                                <BeginStoryboard>
                                                    <Storyboard>
                                                        <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX"
                                                                         From="0" To="1"
                                                                         Duration="0:00:1"/>
                                                    </Storyboard>
                                                </BeginStoryboard>
                                            </Trigger.EnterActions>
                                        </Trigger>
                                    </Style.Triggers>
                                </Style>
                            </Grid.Resources>
                        <StackPanel x:Name="pnlTRG" Orientation="Horizontal" Margin="7" Style="{StaticResource XPND}">

I have two buttons with these Click Events:

    Private Sub btnCLPS_Click(sender As Object, e As RoutedEventArgs) Handles btnCLPS.Click
        pnlTRG.Tag = "Hide"
        btnCLPS.Visibility = 2 'This is just to have the buttons replace each other rather than create 
        btnEXPD.Visibility = 0 'logic for which action to invoke
    End Sub

    Private Sub btnEXPD_Click(sender As Object, e As RoutedEventArgs) Handles btnEXPD.Click
        pnlTRG.Tag = "Show"
        btnCLPS.Visibility = 0
        btnEXPD.Visibility = 2
    End Sub

Everything works fine once through. But after I collapse the <StackPanel> and then expand it, the collapsing no longer works, though the expansion will (it snaps to scale 0 then grows to scale 1). What am I missing?

score 0 · Accepted Answer · answered Oct 11 '20 at 02:59

I came up with a solution. I created 4 different styles:

one for collapsing (active)
one for collapsed (static)
one for expanding (active)
one for expanded (static)

The buttons set the active style, trigger the transition, then use a timer to trigger setting the appropriate static style. This is the final code:

XAML:

<Grid x:Name="grdBRDS">
    <Grid.Resources>
        <Style TargetType="StackPanel" x:Key="HDN">
            <Setter Property="RenderTransform">
                <Setter.Value>
                    <ScaleTransform ScaleX="0"/>
                </Setter.Value>
            </Setter>
        </Style>
        <Style TargetType="StackPanel" x:Key="SHN">
            <Setter Property="RenderTransform">
                <Setter.Value>
                    <ScaleTransform ScaleX="1"/>
                </Setter.Value>
            </Setter>
        </Style>
        <Style TargetType="StackPanel" x:Key="CLPS">
            <Setter Property="RenderTransform">
                <Setter.Value>
                    <ScaleTransform ScaleX="1"/>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="Tag" Value="Hide">
                    <Trigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX"
                                                    From="1" To="0"
                                                    Duration="0:00:1"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.EnterActions>
                </Trigger>
            </Style.Triggers>
        </Style>
        <Style TargetType="StackPanel" x:Key="XPND">
            <Setter Property="RenderTransform">
                <Setter.Value>
                    <ScaleTransform ScaleX="0"/>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="Tag" Value="Show">
                    <Trigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX"
                                                    From="0" To="1"
                                                    Duration="0:00:1"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.EnterActions>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Grid.Resources>
<StackPanel x:Name="pnlTRG" Orientation="Horizontal" Margin="7">

VB for the Timer and Buttons:

    Private tmrXPD As New Threading.DispatcherTimer

    Private Sub NewTmr()
        InitializeComponent()
        tmrXPD.Interval = TimeSpan.FromSeconds(1.1)
        AddHandler tmrXPD.Tick, New EventHandler(AddressOf tmrXPD_Tick)
    End Sub

    Private Sub tmrXPD_Tick(sender As Object, e As RoutedEventArgs)
        ExpansionState(Convert.ToString(sender, Tag))
    End Sub

    Private Sub ExpansionState(ByVal strSTATE As String)
        Select Case strSTATE
            Case "HDN"
                pnlTRG.Style = DirectCast(grdBRDS.Resources("HDN"), Style)
                pnlTRG.Tag = "Standby"
            Case "SHN"
                pnlTRG.Style = DirectCast(grdBRDS.Resources("SHN"), Style)
                pnlTRG.Tag = "Standby"
        End Select
    End Sub

    Private Sub btnCLPS_Click(sender As Object, e As RoutedEventArgs) Handles btnCLPS.Click
        pnlTRG.Style = DirectCast(grdBRDS.Resources("CLPS"), Style)
        btnCLPS.Tag = "HDN"
        pnlTRG.Tag = "Hide"
        tmrXPD.Start()
        btnCLPS.Visibility = 2
        btnEXPD.Visibility = 0
    End Sub

    Private Sub btnEXPD_Click(sender As Object, e As RoutedEventArgs) Handles btnEXPD.Click
        pnlTRG.Style = DirectCast(grdBRDS.Resources("XPND"), Style)
        btnCLPS.Tag = "SHN"
        pnlTRG.Tag = "Show"
        tmrXPD.Start()
        btnCLPS.Visibility = 0
        btnEXPD.Visibility = 2
    End Sub

Animate Collapse and Expand of Control in WPF When Altering Visibility VB.Net

1 Answers1