WPF中的ListBoxItem - 当选中时缩放动画

Question

我有一个自定义项样式的 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>
...

- PiotrK

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

- kmatyaszek

---

谢谢！你知道如何使它围绕物品中心缩放吗？设置<ScaleTransform CenterX="0.5" CenterY="0.5" />不起作用。 - PiotrK

使用RenderTransform而不是LayoutTransform，并将RenderTransformOrigin设置为0.5,0.5。 - Ming Slogar