WPF中的ListBoxItem - 选择时缩放动画答案

【问题标题】：ListBoxItem in WPF - scale animation when selectedWPF中的ListBoxItem - 选择时缩放动画
【发布时间】：2013-10-26 21:29:48
【问题描述】：

我有一个ListBox 带有自定义项目的样式。我希望该项目在选中时会增长一点，并在取消选中时恢复其原始大小。我尝试了几种解决方案，但似乎都没有。我认为问题在于Storyboard.TargetProperty的正确设置。

我当前的 XAML 如下所示：

...
<ListBox.Resources>                   
    <Style TargetType="{x:Type ListBoxItem}">
        <Style.Triggers>
            <Trigger Property="IsSelected" Value="True">
                <Trigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="LayoutTransform.(ScaleTransform.ScaleX)" To="1.2" Duration="0:0:.3" AutoReverse="True"/>
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.EnterActions>
            </Trigger>
        </Style.Triggers>
    </Style>
</ListBox.Resources>
...

我的最终代码（已应用答案）：

...
<ListBox.Resources>                   
    <Style TargetType="{x:Type ListBoxItem}">
        <Setter Property="RenderTransformOrigin" Value="0.5,0.5" />
        <Setter Property="RenderTransform">
            <Setter.Value>
                <ScaleTransform />
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsSelected" Value="True">
                <Trigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX" To="1.1" Duration="0:0:.1" />
                            <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY" To="1.1" Duration="0:0:.1" />
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.EnterActions>
                <Trigger.ExitActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX" To="1.0" Duration="0:0:.1" />
                            <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY" To="1.0" Duration="0:0:.1" />
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.ExitActions>
            </Trigger>
        </Style.Triggers>
    </Style>
</ListBox.Resources>
...

【问题讨论】：

标签： wpf animation triggers listbox listboxitem

【解决方案1】：

尝试使用以下代码：

...
<ListBox.Resources>
    <Style TargetType="{x:Type ListBoxItem}">
        <Setter Property="LayoutTransform">
            <Setter.Value>
                <ScaleTransform x:Name="scaleTransform" />
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsSelected" Value="True">
                <Trigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="LayoutTransform.ScaleX" To="1.2" Duration="0:0:.3" AutoReverse="True"/>
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.EnterActions>
            </Trigger>
        </Style.Triggers>
    </Style>
</ListBox.Resources>
...

【讨论】：

谢谢！你碰巧知道如何让它围绕项目的中心缩放吗？设置<ScaleTransform CenterX="0.5" CenterY="0.5" /> 不起作用。
使用RenderTransform 代替LayoutTransform 并将RenderTransformOrigin 设置为0.5,0.5。