如何在元素变为可见时为ScaleY设置动画

时间:2010-06-22 12:10:04

标签: wpf xaml

我想让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'中对象'System.Windows.Controls.ListBox'的错误'第69行位置399。“}

1 个答案:

答案 0 :(得分:2)

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>