How to animate ScaleY when Element becomes visible

Question

I'd like to make a WPF UI Element appear to expand vertically when its Visibility property transitions to "Visible". I don't want to hard-code the Height in the animation since I'd like to apply this animation to any UI Element as a Style. So, I'm trying to use ScaleY but am not having any luck. Here is the XAML for the style and the listbox:

<Style x:Key="VerticalGrow" TargetType="ListBox">
     <Style.Triggers>
         <Trigger Property="Visibility" Value="Visible">
             <Trigger.EnterActions>
                 <BeginStoryboard>
                     <Storyboard> 
                         <DoubleAnimation Storyboard.TargetProperty="TransformGroup.ScaleTransform.ScaleY" BeginTime="0:0:0.5" From="0" To="1" Duration="0:0:0.5" /> 
                     </Storyboard> 
                 </BeginStoryboard>
            </Trigger.EnterActions>
        </Trigger>
    </Style.Triggers>
</Style>


<ListBox Grid.Row="2" MaxHeight="60" MinHeight="60" Visibility="{Binding MyViewModel.ListBoxVisibility}" IsSynchronizedWithCurrentItem="False" ItemsSource="{Binding MyViewModel.ListBoxItems}" Style="{DynamicResource VerticalGrow}" IsTabStop="True">
</ListBox>

I get an runtime exception complaining that:

"Cannot convert the value in attribute 'Style' to object of type 'System.Windows.Style'. Cannot resolve all property references in the property path 'TransformGroup.RenderTransform.ScaleTransform.ScaleY'. Verify that applicable objects support the properties. Error at object 'System.Windows.Controls.ListBox' in markup file 'MyApp;component/mainwindow.xaml' Line 69 Position 399."}

Answer 1

ListBox doesn't have a property TransformGroup. I think you want to set RenderTransform or LayoutTransform to a ScaleTransform, and then animate that.

<Style x:Key="VerticalGrow" TargetType="ListBox">
    <Setter Property="RenderTransform">
        <Setter.Value>
            <ScaleTransform/>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="Visibility" Value="Visible">
            <Trigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation
                            Storyboard.TargetProperty="RenderTransform.ScaleY"
                            BeginTime="0:0:0.5" From="0" To="1" Duration="0:0:0.5" />
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.EnterActions>
        </Trigger>
    </Style.Triggers>
</Style>