当元素变得可见时如何为 ScaleY 设置动画答案

【问题标题】：How to animate ScaleY when Element becomes visible当元素变得可见时如何为 ScaleY 设置动画
【发布时间】：2010-06-22 12:10:03
【问题描述】：

我想让 WPF UI 元素在其 Visibility 属性转换为“Visible”时显示为垂直扩展。我不想在动画中对高度进行硬编码，因为我想将此动画作为样式应用于任何 UI 元素。所以，我正在尝试使用 ScaleY，但没有任何运气。这是样式和列表框的 XAML：

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

我收到一个运行时异常，抱怨：

“无法将属性“Style”中的值转换为“System.Windows.Style”类型的对象。无法解析属性路径“TransformGroup.RenderTransform.ScaleTransform.ScaleY”中的所有属性引用。验证适用的对象是否支持属性。标记文件 'MyApp;component/mainwindow.xaml' 第 69 行位置 399 中的对象 'System.Windows.Controls.ListBox' 出错。"}

【问题讨论】：

标签： wpf xaml

【解决方案1】：

ListBox 没有属性TransformGroup。我认为您想将 RenderTransform 或 LayoutTransform 设置为 ScaleTransform，然后对其进行动画处理。

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

【讨论】：

谢谢。虽然现在我意识到我的动画并没有完全符合我的要求，但这很有效，但这与你的答案无关。